묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
nav 에 sign in 라인
안녕하세요 선생님수업 잘 듣고 있습니다.강의를 듣는 도중에 sign in 왼쪽선이랑아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요이것도 딱 맞게 조정할 수 있는 방법이 있나요?
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의자료 요청드립니다
크루알라모드 강의수강 했는데자료 다운 받아보니 안에 내용이 없습니다자료요청 드려용rkgml6255@naver.com
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
slide-banner 위치 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="logo"></a> </div> <div class="nav"> <ul class="menu"> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> </ul> </div> </header> </div> <div class="slide"> <div class="slide-banner"></div> <div class="slide-content"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide"></a> </div> </div> <div class="content-inner"> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="logo"></a> </div> <div class="footer-content"> <div> <a href="#none">기업소개</a> <p>|</p> <a href="#none">제휴 및 입점 문의</a> <p>|</p> <a href="#none">이용약관</a> <p>|</p> <a href="#none">개인정보처리방침</a> <p>|</p> <a href="#none">이메일무단수집거부</a> <p>|</p> <a href="#none">사이트맵</a> <p>|</p> <a href="#none">인재채용</a> </div> <div> <p> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </p> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { color: #666; background: #fff; margin: 0; } a { color: inherit; text-decoration: none; } header { border: 1px solid #000; margin: auto; display: flex; width: 1340px; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .nav { width: 800px; position: relative; } .menu { margin-top: 50px; z-index: 1; position: absolute; display: flex; padding: 0; list-style: none; } .menu a { width: 170px; display: block; padding: 10px; text-align: center; } .menu li > a { border: 1px solid #000; transition: 0.3s; } .menu li:hover > a { color: white; background: #000; } .sub-menu { display: none; border: 1px solid #000; } .sub-menu > a { background: #fff; transition: 0.3s; } .sub-menu > a:hover { color: white; background: #000; } .slide { width: 100vw; height: 350px; border: 1px solid #000; position: relative; } .slide-content { width: inherit; height: inherit; position: relative; display: flex; width: inherit; height: inherit; } .slide-content a { position: absolute; width: inherit; height: inherit; } .slide-content img { width: inherit; height: inherit; object-fit: cover; object-position:center; } .slide-banner { background: #fff; z-index: 1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 1px solid #000; width: 1340px; height: 100px; } .items > div { width: 1340px; margin: auto; border: 1px solid #000; } .shortcut { height: 150px; } .news-gallery { height: 300px; } footer { width: 1340px; margin: auto; display: flex; } footer > div { height: 120px; border: 1px solid #000; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content > div { height: 50%; border: 1px solid #000; box-sizing: border-box; } /* fiexd content */ .header-logo, .footer-logo, .footer-content>div { display: flex; align-items: center; } .header-logo, .footer-logo { justify-content: center; } .footer-content>div { padding-left: 20px; } .footer-content>div:first-child>* { margin: 5px; } .footer-content>div:first-child>a { transition: 0.3s; } .footer-content>div:first-child>a:hover { color: dodgerblue; } /* fiexd content */ 슬라이드 배너가묘하게 어긋나는데 어떤부분이 문제인지 모르겠어 질문 드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E,F유형 포토샵 질문
D,E,F유형 작업시 슬라이드,배너,갤러리 이미지는 어떤사이즈로 제작해야하는지 시험지에 기재 돼 있는 부분일까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
실기시험 질문
포토샵 작업시PSD 파일은 어느 파일에 저장하는지,PSD파일도 최종 작업물 폴더와 제출해야하는지이해가 잘 안돼 질문 드립니다.
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
figma에서 이미지 크기를 문의드립니다
안녕하세요.선생님께서 제공해주신 피그마 화일에서움직이는 아이콘을 확대해도이미지가 깨지지 않습니다.방법을 알려 주실 수 있을까요?질문이 많은데, 친절히 설명해주셔서 감사합니다.답변을 기다리겠습니다. 감사합니다.
-
해결됨아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지
실무에서 탭스 구현 시 어떤 방법을 많이 사용하는지 궁금합니다.
안녕하세요 강사님 탭스를 구현하기 위해 3가지 방법을 알려주셨는데 그러면 실무에서는 JQuery-UI를 사용하여 구현을 하는걸까요??그리고 지금 보니까 해당 강의 섹션 제목에 오타가 있는 것 같습니다. jQuery 가 아닌 Jqeury 로 되어있네요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A2 작업하는데 공지사항 내용이 아래로 내려가지 않습니다.
이렇게 가로로 배치되어집니다. 뭐가 문제인걸까요 ㅠㅠ + 애초에 이렇게 공지사항 내용이 적힌 a 메뉴를 하나만 더 적어도 이렇게 가려집니다... ㅠㅠ심지어 저 상황은 지금 갤러리 css까지 다 지웠는데도 이럽니다.... ㅠㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <title>A2</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">재단소개</a> <div class="sub-menu"> <a href="#">설립취지</a> <a href="#">연혁</a> <a href="#">찾아오시는 길</a> </div> </li> <li> <a href="#">후원하기</a> <div class="sub-menu"> <a href="#">국내후원</a> <a href="#">국외후원</a> <a href="#">맞춤후원</a> </div> </li> <li> <a href="#">자료실</a> <div class="sub-menu"> <a href="#">서식자료실</a> <a href="#">사진자료실</a> <a href="#">후원양식</a> </div> </li> <li> <a href="#">스토리</a> <div class="sub-menu"> <a href="#">웹진</a> <a href="#">보고서</a> <a href="#">나의 후원</a> </div> </li> </ul> <div class="sub-back"> <!-- 슬라이드 부분을 가려야 하므로 따로 생성하기 (어차피 이 내비게이션 어려운거 맞음) 주의사항: ul 밑에 넣어야함!!! 형제 요소로 넣어!! --> </div> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> </div> <div class="tab"> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> </div> </div> <div class="gallery"> <a href="#"> <img src="img/gallery1.png" alt="gallery1"> </a> <a href="#"> <img src="img/gallery2.png" alt="gallery2"> </a> <a href="#"> <img src="img/gallery3.png" alt="gallery3"> </a> </div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"><span class="banner-text">Banner</span> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="copyright"> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> <div class="familysite"> <select> <option>패밀리사이트1</option> <option>패밀리사이트2</option> <option>패밀리사이트3</option> </select> </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; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } /* .container{} */ .header-inner{ /* border: 1px solid red; */ background-color: #d58c71; } header{ width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header>div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } /* .content-inner{} */ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; margin: auto; } .slide-items{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .slide>div{ /* border: 1px solid green; */ height: 300px; } .items{ width: 1200px; margin: auto; overflow: hidden; } .items>div{ /* border: 1px solid purple; */ height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .gallery{ width: 350px; } .banner{ width: 350px; } .footer-inner{ /* border: 1px solid red; */ background-color: #eee; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer>div{ /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid palevioletred; */ height: 50px; box-sizing: border-box; } .familysite{ width: 200px; } /*모듈 이외 부분*/ .header-logo{ line-height: 130px; text-align: center; } .gallery a{ text-align: center; padding: 5px; } .gallery a img{ text-align: center; padding-top: 45px; transition: 0.1s; } .gallery a img:hover{ opacity: 50%; } .banner a img{ width: 350px; height: 200px; } .under-menu{ text-align: center; } .under-menu a{ line-height: 50px; padding: 10px; } .copyright{ text-align: center; line-height: 45px; } .familysite{ text-align: center; line-height: 90px; } .familysite select{ width: 100%; text-align: center; padding: 8px; } /*내비게이션*/ .menu{ margin-top: 59px; list-style: none; padding: 0; } .menu li{ /* border: 1px solid red; */ float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li>a{ /* border: 1px solid red; */ background-color: #a7634a; color: white; padding: 10px; display: block; transition: 0.5s; } .menu li:hover>a{ background-color: #e8a891; color: #333333; } .sub-menu{ height: 130px; display: none; } .sub-menu a{ background-color: #e8a891; padding: 10px; display: block; transition: 0.5s; } .sub-menu a:hover{ background-color: #a7634a; color: white; } .sub-back{ position: absolute; width: 100%; height: 200px; top: 100%; right: 0; background-color: #e8a891; z-index: -1; display: none; }
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
슬라이드 문의드립니다.
안녕하세요. 위의 이미지에 질문을 넣었습니다.강의명은 UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오 입니다.답변 부탁드립니다. 감사합니다.
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
일러스트의 "gif 애니메이션"을 문의드립니다.
"UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오" 강의에서"섹션2"에 있는 일러스트의 "gif 애니메이션"을 어떻게 만드셨는지 알려주실 수 있을까요?유투브, 구글, 네이버에서 관련 강의를 찾아봤는데, 못 찾았어요.만약 관련 강의를 아신다면, 알려주셔도 될 것 같습니다.답변 주세요. 감사합니다.
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
이미지를 문의드립니다.
안녕하세요."UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오" 강의를 재밌게 보고 있습니다."완성" 폴더에 "원본"폴더에 있는 "yeskey"에 들어간 움직이는 이미지들을, 이미지 사이트에서 다운로드 받으신걸까요?만약 그렇다면 다운 받으신 사이트의 주소를 알려주실 수 있을까요?제 이메일 주소를 남깁니다. happinessboom@daum.net 입니다.좋은 강의를 만들어 주셔서 감사합니다.
-
해결됨[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]
member.self-ex 코드 업로드요청
깃허브 url에 member.self-ex 코드가 없습니다.확인 후 업로드 부탁드려요 그리고, useEffect 제대로 써보기: 반복 작업 제거와 효과적인 클린업 3:43 이부분부터 몇초간 화면이 안보입니다..
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
E-1 레이아웃 제작 중 궁금점
강의 내용중에는슬라이드 아이템에 height: calc(100vh - 100px);을 주셨는데,.main-content > div에 똑같은 값을 주고 슬라이드 아이템에 height: inherit;을 주는건 안될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
뷰티파이 대체
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요 비쥬얼 스튜디오 코드에서 뷰티파이가 더이상 업데이트 하지 않는다고 하는데요, 자동 인덴트 조절은 어떤 어플 대체품이 있을까요? 또한 선생님 설명에는 블라켓 사용법이 pdf 앞장에 되어있는데, 현재는 비쥬얼만 된다는 강의를 봤습니다.이론 강의를 듣기 시작하려고 하는데 블라켓베이스 기준 설명이신데 그거 상관없이 코드로 그냥 하면 될까요? 헷갈려서 여쭤봅니다 - 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D, E 유형 수험자 제공파일 어디서 받을 수 있을까요?
D,E 최종본 제작 전 영상에서 말씀주신 파일모음을 받고싶은데 수업자료에 첨부된 파일들 확인해봐도 찾을수가 없습니다. 참고PSD. 텍스트, 사진이 포함된 수험자제공파일은 어디서 받을 수 있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
브라우저 비율 확대시 header-inner,footer-inner 잘림 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>B</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="nav"> <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> <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> </ul> </div> <div class="nav-bg"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></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>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner-image"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> </div> <div class="family-site"> <select> <option value="">Family Site</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> </select> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; color: #333; background: #fff; font-size: 15px; } a { color: inherit; text-decoration: none; } /* .container {} */ .header-inner { background: #ddd; } header { position: relative; z-index: 1; height: 100px; justify-content: space-between; } header > div { /* border: 1px solid #000; */ height: 100px; } .header-logo { float: left; width: 200px; line-height: 130px; } .nav { float: right; width: 600px; } .menu { position: relative; z-index: 1; margin-top: 67px; list-style: none; padding: 0; display: flex; } .menu > li { flex: 1; } .menu > li > a { display: block; text-align: center; padding: 5px; background: #fff; border: 1px solid #000; } .menu > li:hover > a { color: white; background: #000; } .sub-menu { display: none; } .sub-menu > a { color: white; padding: 5px; display: block; text-align: center; } .sub-menu > a:hover { color: black; background: white; } .nav-bg { display: none; left: 0; top: 100%; position: absolute; width: inherit; height: 150px; background: #000; } /* .content-inner {} */ .slide { overflow: hidden; /* border: 1px solid #000; */ height: 300px; position: relative; } .slide > div { position: absolute; display: flex; font-size: 0; } .items { display: flex; } .items > div { /* border: 1px solid #000; */ padding-top: 10px; height: 200px; } .news { width: 425px; } .gallery-inner { margin: auto; width: 95%; } .tab-inner { float: left; width: 95%; margin: auto; } .btn > span { display: inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px 5px 0 0; border: 1px solid #000; border-bottom: none; background: white; margin-bottom: -1.5px; } .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 0 10px; } .tab1 > a { border-bottom: 1px solid black; padding: 4px 0; display: block; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a > b { float: right; font-weight: normal; } .gallery { width: 425px; } .tab2 { display: flex; } .tab2 > a { margin: auto; } .tab2 img { width: 120px; } .banner { text-align: right; width: 350px; } .banner img { width: 95%; } .footer-inner { background: #ddd; } footer { display: flex; } footer > div { height: 100px; /* border: 1px solid #000; */ } .copyright { width: 1000px; } .copyright > div { /* border: 1px solid #000; */ /* box-sizing: border-box; */ height: 50%; text-align: center; line-height: 1px; } .family-site { text-align: center; width: 200px; line-height: 100px; } .container > div > * { width: 1200px; margin: auto; }setInterval(function(){ $('.slide>div').animate({left:'-100%'},function(){ $('.slide>div').css({left:0}) $('.slide>div>a:first-child').appendTo('.slide>div') }) },3500) $('.menu li').mouseenter(function(){ $('.sub-menu, .nav-bg').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .nav-bg').stop().slideUp() })브라우저 비율을 줄인 상태로 보면 정상적으로 보이지만브라우저 비율을 100%로 맞춰서 보면 헤더랑 푸터 배경 부분이 잘려서 보입니다. 혹시 어떤 문제가 있을까요?(100%)(75%)
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A3 내비게이션이 슬라이드 이미지에 가려져 앞으로 오지 않습니다.
A3 뿐만 아니라 나머지도 앞으로 오지 않아서 질문합니다 ㅠㅠ(공지사항, 갤러리는 아직 만들지 않은 상태이며 여기 올려놓은 코드는 A3입니다...!주석 처리시킨 이상한 메모는 무시해주세요 ㅠㅠ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> <title>A3</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">강원천문대</a> <div class="sub-menu"> <a href="#">천문대소개</a> <a href="#">인사말</a> <a href="#">오시는길</a> </div> </li> <li> <a href="#">이용안내</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">관람시간표</a> <a href="#">이달의별자리</a> </div> </li> <li> <a href="#">천문대예약</a> <div class="sub-menu"> <a href="#">예약하기</a> <a href="#">예약확인</a> <a href="#">예약취소</a> <a href="#">정보서비스</a> </div> </li> <li> <a href="#">커뮤니티</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">공지사항</a> <a href="#">자유게시판</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"></div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"> </a> </div> <div class="direct"> <a href="#"> <img src="img/direct.png" alt="direct"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="footer-menu"> <div> <a href="#"> 하단메뉴1 </a> <a href="#"> 하단메뉴2 </a> <a href="#"> 하단메뉴3 </a> </div> <div> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> </div> </footer> </div> </body> </html>@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ /* border: 1px solid red; */ width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ /* border: 1px solid violet; */ box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; } /*내비게이션*/ .menu{ list-style: none; /* 점(목록에 쓰이는거) 없애줌*/ padding: 0; /*왼쪽 패딩 제거*/ margin-top: 35px; } .menu li{ border: 1px solid black; float: left; width: 150px;/*25%로 해도 됨*/ box-sizing: border-box; text-align: center; } .menu li>a{ /*기초 틀을 잡았으면, 모양을 만들자!*/ border: 1px solid black; display: block; padding: 5px; } .menu li:hover>a{ /*주의사항: .menu li>a:hover가 아니라 .menu li:hover>a임. 우리느 지금 박스에 호버를 줄꺼지 텍스트에 호버 줄껀 아니잖아*/ background-color: black; color: #fff; transition: 0.5s; } .sub-menu{ border: 1px solid black; background-color: #fff; display: none; } .sub-menu a{ display: block; /*배치!!*/ padding: 5px; } .sub-menu a:hover{ background-color: black; color: #fff; transition: 0.5s; }$(document).ready(function(){ /*Navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown(); }); $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp(); }); /*Slide*/ $('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500); $('.slide-item:first-child').appendTo('.slide-items'); }, 3000); });
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A3 크로스페이드 슬라이드가 이상합니다.
저만 그런건지는 모르겠으나, 세번째 슬라이드 이미지가 고정된 상태에서 첫번째, 두번째 슬라이드 이미지가 빠르게 점멸한 뒤 크로스페이드 슬라이드가 시작합니다. 혹시 뭐가 문제일까요?(제일 아래쪽에 코드 텍스트 있습니다.) @charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ border: 1px solid red; width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ border: 1px solid violet; box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; }ㅡㅡㅡㅡㅡㅡㅡㅡㅡ<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> <title>A3</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"></div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"></div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"> </a> </div> <div class="direct"> <a href="#"> <img src="img/direct.png" alt="direct"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="footer-menu"> <div> <a href="#"> 하단메뉴1 </a> <a href="#"> 하단메뉴2 </a> <a href="#"> 하단메뉴3 </a> </div> <div> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> </div> </footer> </div> </body> </html>@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ border: 1px solid red; width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ border: 1px solid violet; box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; }$('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500); $('.slide-item:first-child').appendTo('.slide-items'); }, 3000);
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
웹디자인기능사 슬라이드를 이미지로 처리해도 문제없나요?
슬라이드 영역의 텍스트 부분도 주는 것으로 알고 있습니다.그래서 코딩으로 텍스트를 띄우지 않고 포토샵에서 슬라이드의 텍스트와 슬라이드 이미지 합쳐서 저장한 뒤 코딩하는 방식으로 처리해도 감점은 없겠죠?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
display:none 적용 안됨 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="nav"> <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> <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> </ul> </div> <div class="spot-menu"></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="shortcut"></div> <div class="news-gallery"></div> </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> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background: white; color: #333; } a { text-decoration: none; color: inherit; } /* entire layout */ .container {} .main-content { display: flex; } .main-content > div { /* height: 800px; */ border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header { z-index: 999; position: relative; } header > div { border: 1px solid #f00; } .header-logo { height: 100px; } /* 네비 */ .nav { width: 95%; margin: 20px auto; } .menu { list-style: none; padding: 0; margin: 0; } .menu > li { position: relative; } .menu div { display: inline-block; } .menu > li > a { transition: 0.5s; border: 1px solid #000; display: block; text-align: center; padding: 10px; } .menu > li:hover > a { background: #00000050; color: white; } .sub-menu { border: 1px solid #000; display: none; background: #00000050; width: calc(100vw - 200px); top: 0; left: 100%; position: absolute; padding: 6px; } .sub-menu > a { transition: 0.5s; padding: 5px; cursor: pointer; text-align: center; width: 120px; color: white; display: inline-block; } .sub-menu a:hover { color: white; background: #00000060; } /* 네비 */ .spot-menu { height: 50px; } /* slide */ .slide { position: relative; height: 400px; } .slide > div { border: 1px solid #0f0; } .slide-image { height: inherit; } .slide-banner { top: 0; right: 0; width: 150px; height: 300px; position: absolute; } /* news-gallery */ .items {} .items > div { border: 1px solid #000; } .news-gallery { height: 250px; } /* shortcut */ .shortcut { height: 200px; } /* footer */ footer { display: flex; } footer > div { height: 120px; border: 1px solid #000; } .footer-logo { width: 200px; } .footer-content { flex:1; } .footer-content > div { border: 1px solid #0f0; height: 50%; box-sizing: border-box; }$('menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }) $('menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() })D유형 메가메뉴 제작중서브메뉴가 display:none으로 없어지지 않는 문제가 생겼습니다.!important 로 적용하면 없어지긴 하는데 제이쿼리가 안먹네요 혹시 어떤 부분이 잘못된걸까요?
