173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Just 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a> </div> <div class="navi"> <ul class="menu"> <li>탑 <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li>아우터 <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li>팬츠 <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li>악세서리 <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a> <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a> <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"></div> <div class="btn"> <a href="#none" class="btn1">공지사항</a> <a href="#none" class="btn2">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a> <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a> <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> <a href="#none">법적고지 개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a> </div> <div class="SNS"> <a href="#none"><img src="images/sns-01.png" alt=""></a> <a href="#none"><img src="images/sns-02.png" alt=""></a> <a href="#none"><img src="images/sns-03.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum.js"></script> </body> </html> @charset "utf-8"; body{ margin: 0; background-color: #fff; color: #333333; font-size: 15px; } body a{ text-decoration: none; color: #333333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; border: red solid 1px; box-sizing: border-box; position: relative; z-index: 10; } .slide{ height: 300px; width: 1200px; border: red solid 1px; box-sizing: border-box; position: relative; overflow: hidden; } .items{ height: 200px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } footer{ height: 100px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } .items > div{ height: 200px; float: left; } .footer>div{ float: left; height: 100px;} .header-logo{ width: 200px; border: red solid 1px; box-sizing: border-box; float: left; margin-top: 25px; } .navi{ width: 500px; border: red solid 1px; box-sizing: border-box; float: right; text-align: center; } .slide-items{ border: red solid 1px; box-sizing: border-box; position: absolute; height: 300px; font-size: 0; left: 0; top: 0; } .news{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: smaller; } .banner{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .shortcut{ width: 390px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .footer-logo{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; margin: 20px; } .copyright{ width: 700px; border: red solid 1px; box-sizing: border-box; text-align: center; height: 100px; padding-top: 10px; color: darkgray; float: left; } .sns{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; } .sns a img{margin: 20px;} /* 네이게이션 */ ul.menu{padding: 0px; list-style: none;} .menu li{ float: left; background: #fff; width: 25%; font-weight:bolder; } .sub-menu{ display: none; background: #fff; } .sub-menu a { display: block; background: #fff; } .menu>li>a {display: block; padding: 5px;} ul.menu li:hover > a { color: #fff; background-color: black; } ul.menu li .sub-menu a:hover{ color: #fff; background-color: black; } /* 탭메뉴 */ .btn{margin-left: 4px;} .btn a{ display: inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; width: 100px; text-align: center; margin-right: -6px; background-color: #ddd; margin-bottom: -3px; border-bottom: none; } .tab-inner{width: 80%; margin: auto; border: 1px solid #000; box-sizing: border-box;} .tab1{border: 1px solid #000; padding: 0 10px;} .tab1 a{ display: block; padding: 5px; border-bottom: #333333 1px solid; } .tab1 a:last-child{border-bottom: none;} .tab1 a b {float: right; font-weight: normal;} .tab2{ border: 1px solid #000; display: none; height: 165px; text-align: center; padding-top: 20px; box-sizing: border-box; } .btn a.active {background-color: #fff;} $(".menu li").mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $(".menu li").mouseleave(function(){ $('.sub-menu').stop().slideUp() }) $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') },3500) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $(this).addClass('active') $(this).siblings().removeClass('active')
안단감
2025-06-09T10:18:12.469Z
댓글 4
좋아요 0
조회수 148
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
세로 2칼럼(C2타입) Part ①』 영상 18분 58초 지점에서, 강사님께서 footer > div 에 height: 100px 를 적용하시던데, 혹시 이 부분의 높이는 50px 이 맞는 값이 아닌가요? footer의 높이가 100px로 주어졌는데 footer > div 에 height: 100px 를 적용하면 실제 높이는 200px 아닌가요?
chobo
2025-05-27T01:33:03.411Z
댓글 2
좋아요 1
조회수 69
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다. 2강 가로 고정형 레이아웃 A3 유형 푸터 부분 변형하는 것 듣다가 선생님 따라 똑같이 썼는데도 푸터 부분의 div가 변형이 안되고 이런식으로 분배가 돼요. 3-4번 반복해서 코드 쓰신거 보고 있는데 뭐가 다른지 모르겠어요 ㅠㅠ엉엉
도도한 랫서팬더
2025-05-20T22:15:04.684Z
댓글 2
좋아요 0
조회수 89
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
상태로 임포트가 안됩니다.
HTML/CSS jquery 모바일-디자인 figma 포트폴리오
에일리언오더
2025-05-15T05:13:09.864Z
댓글 2
좋아요 1
조회수 109
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
19분 55초 보면 자식이 position: absolute 사용했기 때문에 부모에 position: relative를 주는 줄 알았는데 갑자기 부모에도 positoin: absolute를 주더라구요. 다른 강의에서는 position:relative 주시다가 이번 강의에서는 부모에 absolute를 주신 이유가 있나요?
chobo
2025-05-15T00:58:41.289Z
댓글 2
좋아요 1
조회수 71
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
강의 35초에 .slide-items 에 width 3600px 필요없지 않나요? (어짜피 slide에 width 1200px에 hidden 있어서) 혹시 3600px 입력하신 이유가 있으신가요? width 3600px 삭제해도 정상 동작합니다.
chobo
2025-05-07T02:09:45.503Z
댓글 1
좋아요 1
조회수 74
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
가로 슬라이드만 font-size : 0으로 하고 세로 슬라이드와 크로스페이드는 아래 css 사용해야 되는 건가요? .slide div a img { display: block; } 모든 슬라이드 강의가 font-size : 0으로 해서 헷갈리네요... 그리고 강의에서는 font-size : 0만 했는데 어떻게 공백이 제거되었을까요? line-height: 1.6em; line-height 이런 거 안 적은 건가요?
chobo
2025-05-06T23:58:29.342Z
댓글 1
좋아요 0
조회수 100
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>ㅇㅇ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <!-- Slide Animation --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <!-- Slide Animation --> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> <script type="text/javascript" src="script/jquery-1.12.4.js"></script> <script type="text/javascript" src="custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; font-size: 15px; color: #333; /* line-height: 1.6em; */ background-color: #fff; } a { text-decoration: none; color: #222; } .container { border: 1px solid #ddd; width: 1200px; margin: auto; } header { height: 100px; } header > div { border: 1px solid #ddd; height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide > div { border: 1px solid #ddd; height: 300px; } .items { overflow: hidden; } .items > div { border: 1px solid #ddd; height: 200px; float: left; box-sizing: border-box } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .family-site { width: 200px; } .copyright { width: 1000px; } .copyright div { border: 1px solid #ddd; height: 50px; } /* Slide Animation */ .slide { position: relative; } .slide div { border: 1px solid red; position: absolute; /* font-size: 0; */ } 강의에는 세로 슬라이드도 font-size 0으로 하면 이미지 사이에 공백(5px)이 제거된다고 하는데 아무리 해도 되지 않더라구요. 오타 있나? 뭐 잘못한 거 있나? 이래저래 1시간 소비했는데 body 태그의 css쪽에 line-height: 1.6em 이거 제거한 뒤에 font-size: 0 을 해야 되던데 line-height 이게 이미지 공백에도 영향을 주나요? 그리고 위에 코드 강사님이 업로드한 코드 그대로 사용한 것인데 강의에서는 line-height 영향을 어떻게 안 받았을까 싶네요.
chobo
2025-05-06T12:45:08.156Z
댓글 2
좋아요 1
조회수 125
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<header> <div class="header-logo"></div> <div class="navi"></div> </header> header 밑에 있는 div에 공통적으로 들어가는 속성이 있는 경우, 자식 선택자 혹은 하위 선택자를 통해 접근할 수 있는데 ① header div {} ② header > div{} 강사님은 ①번을 사용하시는 이유가 있으신가요? ②번이 header 태그의 직계 자식 요소 중 div 태그를 선택한다고 직관적으로 알 수 있다고 보는데... 혹시 제가 모르는 이유가 있는지 궁금합니다. 참고로 유투브에서 다른 강의들도 강사님처럼 ①번을 사용합니다
chobo
2025-04-29T02:29:16.347Z
댓글 1
좋아요 1
조회수 117
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문내용: checked 초기에는 선택이 되지만 checked가 해제된 상태로 돌아가지 않습니다. html <header> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <nav class="header__nav"> <ul class="header__nav-list"> <li><a href="#home" class="header__menu-link">HOME</a></li> <li><a href="#profile" class="header__menu-link">PROFILE</a></li> <li><a href="#projects" class="header__menu-link">WORKS</a></li> <li><a href="#resume" class="header__menu-link">RESUME</a></li> <li><a href="#contact" class="header__menu-link">CONTACT</a></li> </ul> </nav> <a href="#home" class="header__top-btn">TOP</a> </header> css .header__nav { position: fixed; top: 0; left: -100%; list-style: none; z-index: 1000; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } /*checked 안된상태*/ input[id=trigger]:checked ~ nav.header__nav { transform: translateX(0); left:0 } input[id=trigger] { display: none; } label[for=trigger] { display: block; width: 25px; height: 24px; position: relative; cursor: pointer; } label[for=trigger] span { position: absolute; top: 0; left: 0; display: block; height: 2px; width: 100%; background: #FFD24C; transition: 0.3s; } label[for=trigger] span:nth-child(1) { top: 0; } label[for=trigger] span:nth-child(2) { top: 50%; } label[for=trigger] span:nth-child(3) { top: 100%; } /* 체크박스 선택 시 */ input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { display: none; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
catcat123df
2025-04-27T06:02:28.386Z
댓글 1
좋아요 0
조회수 92
미해결
퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
다운로드가 pc에서는 안되나요? 자료 녹색버튼을 클릭하면 된다고 하는데 없는데요
최윤정입니다
2025-04-21T01:56:48.228Z
댓글 1
좋아요 0
조회수 129
해결됨
Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
안녕하세요 선생님 수업 잘 듣고 있습니다. 강의를 듣는 도중에 sign in 왼쪽선이랑 아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑 미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요 이것도 딱 맞게 조정할 수 있는 방법이 있나요?
HTML/CSS javascript jquery figma
김가희
2025-04-14T13:19:33.157Z
댓글 2
좋아요 1
조회수 93
미해결
실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
크루알라모드 강의수강 했는데 자료 다운 받아보니 안에 내용이 없습니다 자료요청 드려용 rkgml6255@naver.com
HTML/CSS jquery 인터랙티브-웹 반응형-웹
김가희
2025-04-08T22:25:55.333Z
댓글 1
좋아요 0
조회수 89
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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 */ 슬라이드 배너가 묘하게 어긋나는데 어떤부분이 문제인지 모르겠어 질문 드립니다.
Cheon
2025-03-24T12:01:05.560Z
댓글 2
좋아요 0
조회수 108
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D,E,F유형 작업시 슬라이드,배너,갤러리 이미지는 어떤사이즈로 제작해야하는지 시험지에 기재 돼 있는 부분일까요?
Cheon
2025-03-23T13:55:10.848Z
댓글 1
좋아요 1
조회수 133
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
포토샵 작업시 PSD 파일은 어느 파일에 저장하는지, PSD파일도 최종 작업물 폴더와 제출해야하는지 이해가 잘 안돼 질문 드립니다.
Cheon
2025-03-22T12:51:37.865Z
댓글 2
좋아요 1
조회수 118
해결됨
UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
안녕하세요. 선생님께서 제공해주신 피그마 화일에서 움직이는 아이콘을 확대해도 이미지가 깨지지 않습니다. 방법을 알려 주실 수 있을까요? 질문이 많은데, 친절히 설명해주셔서 감사합니다. 답변을 기다리겠습니다. 감사합니다.
HTML/CSS javascript jquery 반응형-웹 media-query
happinessboom
2025-03-21T14:50:40.454Z
댓글 1
좋아요 1
조회수 297
해결됨
아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지
안녕하세요 강사님 탭스를 구현하기 위해 3가지 방법을 알려주셨는데 그러면 실무에서는 JQuery-UI를 사용하여 구현을 하는걸까요?? 그리고 지금 보니까 해당 강의 섹션 제목에 오타가 있는 것 같습니다. jQuery 가 아닌 Jqeury 로 되어있네요
HTML/CSS javascript jquery jquery-selector
SHYU
2025-03-16T09:56:02.027Z
댓글 2
좋아요 0
조회수 141
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이렇게 가로로 배치되어집니다. 뭐가 문제인걸까요 ㅠㅠ + 애초에 이렇게 공지사항 내용이 적힌 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; }
도트유우카프사
2025-03-16T08:55:36.400Z
댓글 4
좋아요 1
조회수 205
해결됨
UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
안녕하세요. 위의 이미지에 질문을 넣었습니다. 강의명은 UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오 입니다. 답변 부탁드립니다. 감사합니다.
HTML/CSS javascript jquery 반응형-웹 media-query
happinessboom
2025-03-16T04:12:58.803Z
댓글 2
좋아요 1
조회수 157
