묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
스타일콤포넌트 스크립트의 색상 다르게 보이는 부분 문의 드립니다.
스타일콤포넌트 작성 부분에 백틱 다음 문자열 작성에 소플님의 VS 화면의 css 스타일 코드 부분이 하늘색(?)과 노랑색, 갈색으로 보여서 가독성이 좋아 보입니다.그런데 저는 백틱 다음의 문자열이 모두 갈색으로 보이는데 VS환경설정 기능에 뭔가 있는 건가요?다른 부분은 색깔 구분에 잘되어져 보이는데, 유독 스타일콤포넌트의 백틱 부부분만 색상 구분이 안됩니다.
-
미해결자바스크립트 : 기초부터 실전까지 올인원
강의 정리된 자료
혹시 강의 정리된 자료 없을까요? ㅠ
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
로고 제작 크기 관련 질문 드립니다.
보통 200X40 혹은 190X45 픽셀 크기로 작업하라고 로고 세부사항에 지시가 되어있는데header 폴더에 제공된 로고를 삽입한다.로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. 이 부분에서 가로 세로 비율을 유지하라는 것이 정확히 어떤 의미인지 이해가 잘 가지 않습니다. 이러한 지시사항이 있을 땐 로고 작업 크기를 어떻게 하는 것이 좋을까요??
-
미해결처음 만난 리액트(React)
book.jsx library.jsx 실행 안 됨
실습 코드 그대로 진행한 것 같은데 npm start를 치면 오류는 안 나지만 화면에 아무 내용도 출력되지 않습니다 ㅜㅜ.. 어떤 부분에서 잘 못 된 것인지 여러 번 봐도 모르겠어서 질문 남깁니다
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
section04 - 각각의 객체에 개별 애니메이션 적용하기
선생님 안녕하세요 !강의를 듣는 중 궁금한 점이 있어 질의 드립니다.section04 - 각각의 객체에 개별 애니메이션 적용하기 영상에서let bar를 for문 밖에 선언하고 for문 안에서 document.createElement를 할당한 이유가 있을까요?for문 안에 같이 선언하면서 할당하는 코드와 어떤 부분이 다른지 잘 모르겠어서 질의 드립니다. const bars = []; let bar; for(let i = 0; i < 30; i++){ bar = document.createElement('div'); bar.classList.add('bar'); barContainer.appendChild(bar); bars.push(bar); }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
애니메이션이작동안되고 사진부분이 원래 빈공간이 생기는게 맞을까요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="d-1images/slide-d-01.jpg" alt="slide1"></a> <a href="#none"><img src="d-1images/slide-d-02.jpg" alt="slide2"></a> <a href="#none"><img src="d-1images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <!--modal--> <div class="modal"> <div class="content-modal"> <h2> 부여 가을연꽃축제 팸투어 모집 </h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다.<br> 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <div class="close-modal">X 닫기</div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /*slide animation*/ .slid-image-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } .slid-image-inner a{} .slid-image-inner a img{} @keyframes slide{ 0%{ top: 0; } 10%{ top: 0; } 35%{ top: -400px; } 65%{ top: -400px; } 70%{ top: -800px; } 90%{ top: -800px; } 100%{ top: 0; } } .slide-banner img{ width: 150px; display: block; } .slide-banner{ position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 4px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -2px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px dashed #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 img{ margin: 47px 20px; width: 170px; align-items: center; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*modal*/ .modal{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .content-modal{ width: 500px; height: 400px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } h2{ background-color: blue; text-align: center; padding: 5px; color: #fff; } p{ line-height: 2.5em; padding: 0 15px; } .close-modal{ float: right; padding: 5px 7px; border: 1px solid #000; margin-right: 25px; cursor: pointer; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /*modal*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })사진첨부한곳처럼 빈공간이 나오는게 정상인건가요 ? 애니메이션 작동이 안되는데 사진때문에 그런걸까요 object-fit cover 해도 저상태에서 애니메이션 움직이지도 않아요,
-
미해결ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기
긴 문장을 번역하고 싶습니다!
강사님 안녕하세요. 덕분에 강의도 잘 듣고, 개인 번역사이트도 만들어서 너무 기쁩니다. 다름이 아니라, 어느 정도 긴 문장을 넣었을 때도 번역이 되려면 어떻게 코드를 짜야 하나요?예를 들어, 영어로 1400단어 정도로 넣고, 한글로 번역을 실행하면, 한국어로 번역해서 대답해주다가 어느 중간에 끊겨서 출력이 됩니다.max_tokens 값을 500에서 5000으로 크게 바꾸어 보아도, 대답해 주는 문장 길이는 변하지 않았습니다. ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
혼자해보고 안되서 찾아보고 해도 해결안되서 문의합니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> <div class="tabs"> <div class="tab1"> <a href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ border: 1px solid #000; height: 400px; } .slide-banner img{ width: 150px; display: block; } .slide-banner{ border: 1px solid #000; position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 5px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px solid #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{} .tab2 img{ display: none; width: 200px; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })탭메뉴부분이 .btn a 로 하면 탭메뉴들이 다망가져서 .btn > a했다가 아닌거같아서 span 으로했는데 제이쿼리가 안먹히는데요 또 난감한 질문드려서 죄송하네요,,선생님 저도 결제해서 강의보는데 모르는거있어서 하다가 안되서 문의글올린겁니다 그리고 초보인데 당연히 제가 맞는지안맞는지 틀렷는지도 궁금한거고요 .. 질문을 많이해서 지적받은거는 조금 그렇네요 결제해서강의보는데 배울려면 제대로배워야할거같아서 안되는거 봐달라고한건데 물론 제가 좀 많이 남겨놔서 죄송하다고도 했지만 하다가 막혀서 선생님 답변보고 질문할까말까 스트레스도받고 망설여지네요 혼자해도 안되서 도움의손길을 요청하는건데 댓글보고 조금 질문하기도 불편해졌네요 이번주시험이라 예민하기도하고 진도는안나가지고 마음만 급해져서 문의많이했습니다 귀찮게 해드려서 죄송하네요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 click 함수 오류
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/css/style.css" /> </head> <body> <script src="/js/code.jquery.com_jquery-3.7.0.js"></script> <script src="/js/custom.js"></script> <a class="show-btn" href="#">보이기</a> <a class="hide-btn" href="#">감추기</a> <div>Box</div> </body> </html> $(document).on('click', '.show-btn', function () { $('div').show(); }); $(document).on('click', '.hide-btn', function () { $('div').hide(); });click함수로 쓸때 작동이 안되고 on함수로 썼을 때 작동이 되는데 이유가 무엇인가요?
-
미해결처음 만난 리액트(React)
미니 블로그 질문입니다.
미니블로그를 실행시키면 아래와 같은 에러가 브라우저 콘솔에 찍힙니다.소스는 몇 번을 확인해서 잘 못 된 부분이 없다고 생각합니다.MainPage.jsx 부터 불러오질 못하네요.뭐가 잘 못 됐는지 찾아주시면 고맙겠습니다.아래는 App.js 에 PostWritePage, PostViewPage 를 빼고 실행했을 경우 브라우저 페이지 자체에 나오는 에러입니다. function App(props) { return ( <BrowserRouter> <MainTitleText>제플리카의 미니 블로그</MainTitleText> <Routes> <Route index element={<MainPage />} /> </Routes> </BrowserRouter> ); } Uncaught runtime errors:×ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at beginWork$1 (http://localhost:3000/static/js/bundle.js:36015:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35284:16)
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 시험 9시 시작하고 1시간 20분만에 나왔습니다.
B유형이 나왔구 선생님 강의 듣고 매일 연습한 결과 아주 완벽하게 끝내고 왔습니다!팁을 하나 드리자면 제가 맨처음에 시험을 시작할때 라이브서버나 한글버전의 비주얼 스튜디오가 설치되어 있지 않아서(영문버전) 일단 그냥 했는데 시험 도중에 웹 페이지에서 아무것도 CSS에 적은게 반영이 안되는겁니다... 감독관님을 손들며 부를 때 알게 되었죠 저장 누르면서 해야 적용될 것 같은데? 이생각을요 ㅠㅠ..(+추가드립니다! 시험장에서 영문버전 Auto Save 누르고 하였으나.. 적용이 안되어 비주얼 소프트웨어 문제인지 그거까지 둘다 Ctrl+S / 브라우저 F5를 번갈아가며 눌렀습니다 ;ㅅ;)Html, Css, jQuery를 저장하면서 홈페이지까지 F5로 새로고침을 계속 누르면서 해야되는게 많이 번거로웠습니다!저의 작업순서는 와이어프레임 작성 (8분) --> 포토샵 열고 파일 정리(이미지 등등 크기에 맞게 자르고 텍스트까지 전부다 마침) (20분) --> 헤더로고, 푸터 모든 영역 완성 (5분) --> 바로 슬라이드 완성 (5분) --> news, gallery 완성 (10분) --> Navi 완성 (10분+10분 서브백 어떻게하는지 중간에 까먹음...!!그래도 완성) --> 그리고 나머지는 검토시간(10분정도) 이 순서로 했던 것 같습니다.많은분들이 작업 순서를 고민하신다면 이렇게 해보시는걸 추천드립니다!(참고로....저는...시험 다 끝나고 제출할때까지도...용량 초과했는지 확인을 못했지만... 연습을 엄청나게 많이 해봤을때 아무리커봐야 2MB~3MB정도 일거라고 판단하여.. 95점정도의 고득점 예상합니다!) 다들 화이팅입니다!ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ아차! 추가로 영문버전은 단축키(줄 삭제 / 줄 복제 / 줄 이동) 이런거는 단축키에 들어가셔서 "line" 이것만 쳐도 바로 상단에 전부다 몰려있으니 꼭 시험 시작하기전에 단축키부터 설정하고 하시면됩니다. 한글버전도 마찬가지구 이게 시험 시간 단축의 큰 도움이 될겁니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘이 시험인데 C타입 와이어프레임이 갑자기 이상합니다!....
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>남도맛기행 축제</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { background-color: #fff; color: #222328; font-size: 15px; margin: 0; } a { color: inherit; text-decoration: none; } .container { border: 1px solid red; width: 1000px; overflow: hidden; } .container > div { /* border: 1px solid black; */ /* height: 1000px; */ float: left; box-sizing: border-box; } .left { width: 200px; } header {} header > div { border: 1px solid green; } .header-logo { height: 100px; } .navi { height: 400px; } .right { width: 800px; } .slide {} .slide > div { border: 1px solid pink; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid blue; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } .banner { width: 200px; } footer {} footer > div { border: 1px solid green; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 600px; } .copyright > div {}이게 갑자기이런식으로 밑에가 안밀리고 왼쪽으로 딱 붙어있는데 저도 실기 연습중에 처음으로 일어난 일이라 방법을 못찾고있습니다....도움이 필요합니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
e-2했는데 이게맞는가요 ??
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>e-2레이아웃연습</title> <link rel="stylesheet" href="css/e-2.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="family-site"></div> </footer> </div> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .items{} .items > div{ border: 1px solid #000; } .news{ height: 250px; } .gallery{ height: 250px; } .slide-banner{ height: 200px; } .slide{} .slide > div{} .slide-image{ border: 10px solid blue; height: calc(100vh - 100px); } footer{ display: flex; } footer > div{ border: 1px solid green; height: 100px; } .footer-logo{ width: 200px; } .copyright{ flex: 1; } .family-site{ width: 230px; }선생님 강의하신대로 따라했는데 vh 하고나서 저게맞는지는 모르겠지만 사진에 빨간색 칠해놓은부분이 선생님화면이랑 다르게 길어보여서 그런데 혹시 잘못한부분이 있을까요 ? 계속 문의드려 죄송하네요 ...
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
e유형하는데 선생님이랑 같이했는데 vh넣고 칸이 밑으로 크게보여요..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>e-1레이아웃연습</title> <link rel="stylesheet" href="css/e-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> <div class="right"> <div class="slide-image"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; height: 800px; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .spot-menu{ height: 50px; } /*slide*/ .slide{} .slide-image{ border: 5px solid green; height: calc(100vh - 120px); } /*shortcut*/ .shortcut{ border: 1px solid #000; height: 150px; } /*news-gallery*/ .news{ border: 1px solid #000; height: 250px; } .gallery{ border: 1px solid #000; height: 250px; } .slide-banner{ border: 1px solid #000; height: 150px; } /*footer*/ footer{ display: flex; } footer >div{ border: 1px solid pink; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content > div{ border: 1px solid blue; height: 60px; } .footer-link{} .copyright{}선생님이랑 같이했는데 vh넣고 칸이 밑으로 크게보여요.. 뭐가잘못된걸까요 ....????ㅠㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
ㅜㅜ확실히 d유형은 헷갈리네요 ㅠㅠ 선생님 사진에 처럼 왜겹쳐져서 보이는걸까요ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d-4레이아웃연습</title> <link rel="stylesheet" href="css/d-4.css"> </head> <body> <div class="container"> <div class="main-container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="news-gallery"> <div class="news"></div> <div class="gallery"></div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } /*layout*/ .container{} .main-container{ display: flex; } .main-container > div{ border: 1px solid #333; } .left{ width: 200px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid #333; } .header-logo{ height: 100px; } .navi{ height: 400px; } .slide{ height: 400px; } .slide > div{ border: 1px solid #333; } .slide-image{ height: 400px; } .slide-banner{ height: 150px; } /*news-gallery*/ .news-gallery{ display: flex; } .news-gallery > div{ border: 1px solid #000; height: 250px; flex: 1; } .news{} .gallery{} footer{ display: flex; } footer > div{ border: 1px solid #333; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content> div{ border: 1px solid #333; height: 60px; } .family-site{ width: 230px; } 강의 1,2,3,4 할때 마다 조금씩 방식이 바뀌는거같아서 혼란스럽네요 container 하고 main-content인가요 main-container 인가요 ?ㅜㅠ헷갈려요,, 그리고 2 4탭메뉴부분도 똑같다고하셨는데 2에서는 .news, .gallery 하셨는데 4에서는 news-gallery 에 .news/.gallery 로나뉘는거 보고 혼란이왔네요 ..어떤게 정확한건가요 ?? 그리고 3-4유형에서도 item에 shortcut 따로 하는게 맞는걸까요 ㅜ 4번에서 news-gallery부분도 헷갈리네요... 위에첨부한거는 왜 저렇케 겹쳐지는지 모르겠어서 문의남깁니다 ㅠㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항부분이 왜올라가져서 안보일까요 ?? 뭐가문제일까요 ㅠㅠㅠ???ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">축제소개</a> <div class="sub-menu"> <a href="#none">초대의 글</a> <a href="#none">축제개요</a> <a href="#none">축제연혁</a> <a href="#none">오시는길</a> </div> </li> <li> <a href="#none">행사안내</a> <div class="sub-menu"> <a href="#none">셔틀버스안내</a> <a href="#none">행사안내</a> <a href="#none">행사일정</a> <a href="#none">소공연장</a> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">음식레시피</a> </div> </li> <li> <a href="#none">참여마당</a> <div class="sub-menu"> <a href="#none">참가후기</a> <a href="#none">연꽃갤러리</a> <a href="#none">포토갤러리</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> 운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"> <a href="#none"><img src="images/shortcut-c.jpg" alt=""></a> </div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; } 5%{ opacity: 1; visibility: visible; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /*navigation*/ .menu{ list-style: none; padding: 0; width: 90%; margin: auto; position: relative; } .menu li{ padding: 2px; text-align: center; } .menu li > a{ display: block; border: 1px solid #000; padding: 4px; text-decoration: none; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; border: 1px solid #000; } .sub-menu a{ display: block; text-decoration: none; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; }사진처럼 공지사항부분이 위에서 슬라이더에 가렸는데 뭐때문에 가린건지요 ,,, 크기값이안맞아서 그런지 display:flex 를 써서 영향이 있는지 뭐때문에 그런지 궁금합니다 !ㅜ
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
node server.js 실행 시 오류 발생
Express에서 데이터 처리하기 강의 수강 중에 생긴 오류 입니다. 이후에 포스트맨에서 body 수정 후 send 시에도 Error: connect ECONNREFUSED이 오류가 떳습니다.index.js를 실행 후에 웹 브라우저에 http://localhost:8080/products 입력하면 [{"name":"농구공","price":5000}] 이렇게 웹 화면에 뜨면서 node:events:492 thorw er;도 같이 뜨면서 서버 에러가 납니다 database.sqlite3을 vs코드 열었을 때는 위 사진처럼 뜨고sqllite로 열었을 때는 읽을 수 없다고 뜹니다
-
해결됨따라하며 배우는 HTML, CSS
개발블로그 내용정리 게시 가능 여부
안녕하세요! 존안님! html, css에 대해 많이 모르는 상태인데도 불구하고 이 강의를 열심히 따라 치고 공부하면서 조금이나마 알아가고 있는 수강생입니다! :)다름이 아니라 제가 개발 블로그를 사용 중인데 내용을 정리하고, 이전에 공부했던 내용들을 다시 찾아보기 위해서 해당 강의를 보고 제가 정리한 내용을 출처 표기하고 올려도 되는지 궁금합니다! 제공되는 강의 자료는 아니고 따로 제가 보고 정리한 내용들만 올리려고 합니다.감사합니다!
-
해결됨[코드캠프] 강력한 CSS
반응형 실습
강사님 안녕하세요~ 강의 잘 들었습니다. 다름이 아니라 반응형 실습진행을 flex로 진행하셨는데 grid로 되어있는 css 도 있다고 하신 것 같은데 어디서 받아 볼 수 있을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요 ..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; border: 1px solid #000; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } 선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요. 가로세로는 이해가되는데 페이드인아웃 효과가 젤어렵긴하네요 .. 일단 해봤는데 약간 버벅거리는느낌이있는거같아 첨부해보아요,,
