173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
외부 api 에서 ajax를 통해 데이터를 받아오고, 받아온 데이터를 카피해서 mysql 에 삽입하고자 합니다. 일정시간마다 반복하는 것은 setInterval 을 활용하면 되는것까지는 구글링을 통해 알아냈는데 본 강의에서는 데이터 생성을 postman 을 사용해 수동으로 데이터를 입력하고 전송하셔서 코드 상으로는 어떻게 구현해야 할지 궁금해서 여쭤봅니다! 1줄요약! postman을 통해 했던 데이터 삽입을 코드로 하는 방법이 궁금합니다!
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 사용하고 있는 next 버전이 궁금합니다. 12버전인가요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
압축을 푼뒤 진행해도 에러가 납니다 The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다 찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
해결됨
자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]
대출기능을 개발하려고 하니, 저희가 가진 두 테이블, User와 Book은 서로를 가리킬 필드가 없어서 '대출했다.'라는 정보를 표시할 수 없었습니다. 그래서 user_loan_history 테이블을 새로 만드는 내용이 강의의 주된 내용이 되는데요, 제가 궁금한건 여기서 User와 Book 테이블을 수정하여, 예를들면 User테이블에는 OneToMany로 Book의 id를 가리킬 수 있는 필드를, Book테이블에는 ManyToOne으로 User의 id를 가리킬 수 있는 필드를 추가하여 개발할 수도 있지 않나 싶어서요! 객체지향적으로 생각했을 때 User와 Book은 객체지만, '대출기록'은 객체가 아니라 객체간의 관계 같아서 테이블로 만드는 것에 거부감이 생기는 것 같습니다. 어떤 이유에서 기존의 테이블을 수정하지 않고, 새로운 테이블을 만들었는지 궁금합니다!
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
선생님 익스플로러는 사라지지 않았나요? 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기6 이번 강의 들어야 되는지.. 헷갈리네요. 오직 익스 호환성을 위한거라면.. 그냥 스킵해도 되나요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
유튜브 숏츠의 썸네일을 사용하려고 합니다 인포윈도우 가공하기 단계에서 똑같이 하는데도 섬네일이 오류표시가 나요ㅜㅜ 숏츠는 방법이 다른건가요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 내용] SpringConfig클래스에 MemoryMemberRepsoitory 메소드에 retrun new JdbcMemberRepository();를 하고 dataSource 객체 생성 후 생성자까지 만들어주었습니다. 여기까지는 ()에 오류가 생기는데 여기에 dataSource를 넣어주면 전체오류가 생기여 옵션엔터를 눌러 해결하면 메소드 이름을 MemoryMemberRepository가 아닌 JdbcMemeberRepository로 바꿔라 합니다. 이를 변경하면 위에 MemberService도 바꿔야하며 전체코드에 이상이 생깁니다. package hello.hellospring; import hello.hellospring.repository.JdbcMemberRepository; import hello.hellospring.repository.MemoryMemberRepository; import hello.hellospring.service.MemberService; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import javax.sql.DataSource; @Configuration public class SpringConfig { DataSource dataSource; public SpringConfig(DataSource dataSource) { this.dataSource = dataSource; } @Bean public MemberService memberService(){ return new MemberService(memberRepository()); } @Bean public MemoryMemberRepository memberRepository(){ //return new MemoryMemberRepository(); return new JdbcMemberRepository(dataSource); //오류발생 } } java: incompatible types: hello.hellospring.repository.JdbcMemberRepository cannot be converted to hello.hellospring.repository.MemoryMemberRepository 이러한 오류내용이 뜹니다. 수업 소스코드와 동일하게 해봤는데 이럽니다!
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
제가 html, css 등 까지 수강하고 배포 등 다음 과정으로 넘어가려고 하는데 Contact를 활용하는 강의를 못 본거 같아서요 혹시 제가 놓친 부분이 있을까요? 감사합니다..!
미해결
CSS Flex와 Grid 제대로 익히기
Q1: auto-fill 에 대해 질문드립니다. <Grid #3 강의의 4:30초> 에서 셀이 2개 있고, grid-template-columns에 minmax(200px, auto)가 설정되어 있으며 auto-fill이 적용되어 있을때 grid-template-columns: repeat(auto-fill, minmax(200px, auto)) 전체 Grid Container의 넓이가 500px 일때에, 셀의 column 길이가 200px 이상이 되어지게 됩니다. 제가 알기로는 minmax(최솟값, auto) 라면 셀의 길이가 최솟값 보다 커지려면 셀이 가지는 컨텐츠의 길이가 최솟값보다 커야된다고 알고 있는데요. 그런데 왜 auto-fill이 설정되어 있을때에는 컨텐츠의 column 길이가 200px 보다 작은데 왜 Grid Container의 넓이 만큼 늘어나는 것인가요? 이것이 auto-fill을 적용하여 Grid의 기본 성질인 꽉 차게 늘어나는 성질때문에 그런가요? Q2 auto-fill 적용불가에 대해 질문드립니다. 저의 브라우저에서 테스트 해본결과, auto-fill이 적용이 되지 않는 부분은 셀이 2개가 있고, column의 길이가 minmax(200px, auto) 이며, auto-fill을 사용하고, Grid Container의 넓이가 600px 초과 된다면, 셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서게 되니 꽉차지 않게 되는 것 같습니다. 위의 질문과 동일한 것같습니다만, 자동으로 늘어나는 것은 400px (200px 셀 2개) 의 크기보다 Grid Container의 길이에서 뺀것의 크기가 200px 이상이라면 자동으로 늘어나는 것이 중단되고, 200px 이하라면 늘어나는 것이 되는 것인데, 왜 200px 이하라면 늘어나는 것입니까? Grid Container의 넓이를 200px으로 나눌때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것인가요? Flex만 사용하던 사람이라 minmax의 대한 성질과 auto-fill을 공부하니 약간 했갈리네요...
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요. 그랩님 매일 같이 열정적으로 댓글 달아주셔서 항상 감사드립니다. 모든 것이 그러하듯 강의를 운영하는 것도 엄청난 공수가 든다는 것을 깨달았네요. 현재 오류가 생겼는데, useHistory를 이용해서 upload 페이지로 이동한 후 Upload 클라이언트 쪽에서 아무 반응도 일어나지 않고 있습니다. 아무리 코드랑 구글링을 해봐도 해결이 안되는데요. upload페이지가 console창을 보면 /upload/index.js의 html 코드가 아무것도 불러와지지 않고 있는 것 같아요. 혹시 조언좀 구할 수 있을까요? 1. 현상 : 클라이언트에 아무것도 뜨지 않음 Elements 창을 클릭해도 upload.js 작성한 HTML이 없습니다. 2.App.js에 제가 작성한 코드입니다. History와 import 란에 모두 정확하게 작성하였는데요. 3. upload/index.js 파일 코드도 같이 첨부드립니다. 한번만 봐주실 수 있을까요? ㅠ useHistory가 만료가 되어서 작동을 안 하는걸까요.. https://github.com/promotionX/Grabmarket-clinet
해결됨
재고시스템으로 알아보는 동시성이슈 해결방법
안녕하세요 강의듣다가 막혔다 해결한 부분이 있어서 혹여나 동일한 문제를 겪고 있으신 분이 계실까봐 공유드립니다. named lock파트의 native query를 작성하는 부분에서 강의 코드와 동일하게 작성하였음에도 불구하고 스프링 빈을 초기화 하는 과정에서 다음과 같은 에러를 만나게 되었습니다. 작성한 코드 @Query("select get_lock(:key, 3000)", nativeQuery = true) fun getLock(key: String) @Query("select release_lock(:key)", nativeQuery = true) fun releaseLock(key: String) 발생한 에러 Caused by: org.springframework.data.repository.query.QueryCreationException: Could not create query for public abstract void com.waterfogsw.cucurrentsolutions.domain.LockRepository.getLock(java.lang.String); Reason: Cannot invoke "String.contains(java.lang.CharSequence)" because "variable" is null at app//org.springframework.data.repository.query.QueryCreationException.create(QueryCreationException.java:101) at app//org.springframework.data.repository.core.support.QueryExecutorMethodInterceptor.lookupQuery(QueryExecutorMethodInterceptor.java:115) at app//org.springframework.data.repository.core.support.QueryExecutorMethodInterceptor.mapMethodsToQuery(QueryExecutorMethodInterceptor.java:99) at app//org.springframework.data.repository.core.support.QueryExecutorMethodInterceptor.lambda$new$0(QueryExecutorMethodInterceptor.java:88) at java.base@17.0.6/java.util.Optional.map(Optional.java:260) at app//org.springframework.data.repository.core.support.QueryExecutorMethodInterceptor.<init>(QueryExecutorMethodInterceptor.java:88) at app//org.springframework.data.repository.core.support.RepositoryFactorySupport.getRepository(RepositoryFactorySupport.java:357) at app//org.springframework.data.repository.core.support.RepositoryFactoryBeanSupport.lambda$afterPropertiesSet$5(RepositoryFactoryBeanSupport.java:279) at app//org.springframework.data.util.Lazy.getNullable(Lazy.java:245) at app//org.springframework.data.util.Lazy.get(Lazy.java:114) at app//org.springframework.data.repository.core.support.RepositoryFactoryBeanSupport.afterPropertiesSet(RepositoryFactoryBeanSupport.java:285) at app//org.springframework.data.jpa.repository.support.JpaRepositoryFactoryBean.afterPropertiesSet(JpaRepositoryFactoryBean.java:132) at app//org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1798) at app//org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1748) ... 122 more Caused by: java.lang.NullPointerException: Cannot invoke "String.contains(java.lang.CharSequence)" because "variable" is null at org.springframework.data.jpa.repository.query.QueryUtils.createCountQueryFor(QueryUtils.java:620) at org.springframework.data.jpa.repository.query.DefaultQueryEnhancer.createCountQueryFor(DefaultQueryEnhancer.java:49) at org.springframework.data.jpa.repository.query.StringQuery.deriveCountQuery(StringQuery.java:111) at org.springframework.data.jpa.repository.query.AbstractStringBasedJpaQuery.<init>(AbstractStringBasedJpaQuery.java:82) at org.springframework.data.jpa.repository.query.NativeJpaQuery.<init>(NativeJpaQuery.java:58) at org.springframework.data.jpa.repository.query.JpaQueryFactory.fromMethodWithQueryString(JpaQueryFactory.java:53) at org.springframework.data.jpa.repository.query.JpaQueryLookupStrategy$DeclaredQueryLookupStrategy.resolveQuery(JpaQueryLookupStrategy.java:170) at org.springframework.data.jpa.repository.query.JpaQueryLookupStrategy$CreateIfNotFoundQueryLookupStrategy.resolveQuery(JpaQueryLookupStrategy.java:252) at org.springframework.data.jpa.repository.query.JpaQueryLookupStrategy$AbstractQueryLookupStrategy.resolveQuery(JpaQueryLookupStrategy.java:95) at org.springframework.data.repository.core.support.QueryExecutorMethodInterceptor.lookupQuery(QueryExecutorMethodInterceptor.java:111) ... 134 more 동일한 강의를 수강중이던 지인분과 함께 비교해본 결과 스프링 부트 버전 문제임을 확인하였습니다. 지인분은 data jpa 3.0.1 버전을 사용중이셨고, 저는 data jpa 3.0.3버전을 사용하였는데 3.0.2 이상 버전에서 nativeQuery=true 사용시 NullPointerException이 발생하는 이슈가 있음을 알려드립니다. 저는 부트버전을 3.0.1로 다운그레이드하여 정상적으로 실습 진행할 수 있었습니다 :) https://github.com/spring-projects/spring-data-jpa/issues/2812
미해결
자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]
안녕하세요 선생님. CalculatorAddRequest 클래스에서 number1과 number2를 private final로 설정하는 이유가 무엇인가요? 감사합니다.
해결됨
자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]
예외 처리 부분이니까 주석 처리하면 실행될까 했는데 아래와 같은 에러메시지가 나옵니다. 혹시 몰라 전체 코드를 깃헙에 업로드해놓겠습니다! https://github.com/you-eun-hye/library-app-Inflearn
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Flex</title> <link rel="stylesheet" href="default.css" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
import React, { useState } from "react"; import { Card, Button, Form, Input, notification } from "antd"; import { useHistory } from "react-router-dom"; import Axios from "axios"; import { SmileOutlined, FrownOutlined } from "@ant-design/icons"; import useLocalStorage from "utils/useLocalStorage"; export default function Login() { const history = useHistory(); const [jwtAccessToken, setJwtAccessToken] = useLocalStorage( "jwtAccessToken", "" ); console.log("loaded Token: ", jwtAccessToken); // 왜 이게 두번이나 출력되는 것이지? const onFinish = (values) => { async function fn() { const { username, password } = values; const data = { username, password }; try { //응답을 꼭 받아야 한다. 토큰을 받아야 하니까 const response = await Axios.post( "http://127.0.0.1:8000/accounts/token/", data, { headers: { "Content-Type": "application/json" } } ); // const { data: token } = response; 이런 방식은 아래랑 다르다 response에서 data을 꺼내서 이름을 token이라 짓는 것 // const token = response.data 와 일치하며 밑에 녀석은 // const jwtAccessToken = response.data.access 과 일치한다 const { data: { access: jwtAccessToken }, } = response; setJwtAccessToken(jwtAccessToken); notification.open({ message: "로그인 성공!", icon: <SmileOutlined style={{ color: "#108ee9" }} />, }); // history.push("/accounts/login"); //TODO: 이동주소 } catch (error) { console.log(error); if (error.response) { notification.open({ message: "로그인 실패!", icon: <FrownOutlined style={{ color: "#ff3333" }} />, description: "아이디/암호를 확인해 주세요.", onClick: () => { console.log("Notification Clicked!"); }, }); } } } fn(); }; return ( <Card title="login"> <Form labelCol={{ span: 8 }} //부트스트랩은 한 행이 12 컬럼인데 antd는 24컬럼임 wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete="off" > <Form.Item label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다 > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: "Please input your password!" }, { min: 5, message: "5자리 이상 해주세요" }, // 한글자 한글자 들어갈때마다 검사해준다. ]} > <Input.Password /> </Form.Item> {/* //8칸 이동하고 16칸을 쓰겠다 */} <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Card> ); } 안녕하세요 강사님!! 위에서 15번째 줄에 있는 console.log("loaded Token: ", jwtAccessToken); 이 부분이 페이지의 콘솔창에서 두번이나 나타납니다... 왜 그런지 알 수 있을까요?? 새로고침을 했을때도 두번 나타나고 submit을 했을 때도 2번 출력됩니다. 아 ! 그리고 simplejwt토큰을 사용중 입니다!
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 선생님🙇♀️ 클래스_메소드 강의를 보다 궁금한 점이 생겨 질문 남깁니다. BlockBox 클래스에 두 메소드를 넣었고, 04_Method클래스에 두 메소드를 활용한 문장이 있었는데요. insertMemoryCard()는 그대로 사용했지만, getVideoFileCount()는 다시 변수로 선언한 이유가 무엇인가요? 감사합니다. void inserMemoryCard(int capacity) { System.out.println("메모리 카드가 삽입되었습니다."); System.out.println("용량은 " + capacity + "GB 입니다."); } void getVideoFileCount(int type) { if ( type == 1) { return 9; } else if ( type == 2) { return 1; } return 10; } b1.insertMemoryCard(256); int fileCount = b1.getVideoFileCount(1);
해결됨
스프링 시큐리티
안녕하세요 강의 잘 보고있습니다. csrf 토큰 값을 헤더에 넣어서 실습하는 부분 따라해봤는데 잘 안되서 코드를 뜯어봤습니다. 이번에 시큐리티 버전이 6으로 올라가면서 csrf 토큰을 인코딩해서 전달하고 이걸 디코딩하는 부분이 영상과 다른것같았습니다. 그래서 기본으로 제공하는 로그인 페이지에서 디버깅을 해보았는데 클라이언트에 전달한 csrf 토큰값이랑 실제 서버가 가지는 csrf 토큰값이 서로 달랐습니다. 이렇게되면 영상에서 보여주신 실습은 제대로 동작하지 않는게 맞나요? 해당 사진은 CsrfFilter에서 actualToken을 받아오기 위한XorCsrfTokenRequestAttributeHandler 클래스 내부에 존재하는 resolveCsrfTokenValue 함수의 소스코드입니다. 예제 따라하면 항상 마지막에 사이즈 비교하는 부분에서 걸렸습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 22:03 초 부분 에 cors 설치하시는데 요거는 안하셨는데 해야되는거 맞나요?? 저는 안하니까 오류나서 설치하라고 뜨더라구요.. 영상에서는 설치안했는데도 오류 안뜨는 거같아서.. 아님 제가 잘 못본걸 수도 있어서 알려주시면 감사드립니다!
미해결
따라하며 배우는 HTML, CSS
선생님 저는 왜 서치 부분이 이렇게 되는 걸까요?
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)"> <div class="text-area"> <h3 class="eng">한수원 새울본부 복지관 신축</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /*CSS*/ /* Web Font - Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap'); /* Web Font - S-CoreDream */ @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #333; } button, input { outline: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } ul, li { padding: 0; list-style: none; } /* Default CSS */ body { font-family: 'Kanit'; line-height: 1.7em; margin: 0; background-color: #fff; color: #333; } /*section - header*/ .header-inner { width: 1300px; margin: auto; padding-top: 20px; padding-bottom: 10px; overflow: hidden; } .logo { float: left; } .gnb { margin-top: 10px; float: right; } .gnb a { font-size: 20px; margin-left: 80px; } /*section - home*/ ul.imgbox { overflow: hidden; margin: 0; } .item-bg { display: inline-block; top: 0; background-size: cover; background-position: center; height: 100vh; } /*Custom JS*/ $(document).ready(function(){ $('.imgbox').slick({ infinite: true, dots: true, speed : 3000, autoplay: true, autoplaySpeed: 5000, swipe: true, arrows: false, fade : true, zIndex:50, pauseOnFocus: false, pauseOnHover: false, }); });
