월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
크로스브라우징 체크 질문
선생님 코드작성을 모두 완료하고 브라우저 창에서 하나씩 확인해보는중에 궁금한 사항이 있어 질문드립니다! 크롬으로 확인해가며 연습중인데 다 완료후에 일반 인터넷 익스플로어에서 확인시 조금씩 레이아웃이 틀어져있는데 이부분도 점수나 시험결과에 큰 문제가 있을까요? 그렇다하면 크롬 보다는 일반 인터넷 익스플로어를 기준으로 확인해가며 연습을 해야할까요? 조금씩 틀어지는 부분은 예를들어 아래 사진과 같습니다. (갤러리 이미지가 크롬에서는 정확하게 잘 나열되어 있으나 익스플로어에서는 그렇지 않은 배열이 틀어짐, .btn의 사이 간격 벌어짐 크롬에서는 딱 맞춤, .tab1 a b 문안이 짤림 크롬에서는 짤리지 않음.)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오코드 관련 질문
질문1) 비주얼스튜디오코드의 경우 !를 치면 에밋 설치여부와 관계없이 코드들이 나오는지 궁금해요! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 만약 나오지 않는다면 저부분 다 외워서 입력해야되는걸까요? 질문2) 시험장소에서는 인터넷 사용이 안된다고 하셨는데 그러면 중간중간에 자동저장을 하여 인터넷 브라우저창을 켜서 확인하면서 작업이 불가능한건가요ㅠㅠ? 진행상황 아예 안보고 코드만 줄줄이 나열하고 다 완성이 된 이후에야 감독관 컴퓨터로 가서 확인이 되는건지 궁금해요.. 질문3) 비주얼스튜디오코드의 경우 코드 힌트는 별도의 설정이나 설치 없이 자동으로 나오나요? 블라켓처럼 비주얼스튜디오코드도 누군가 저 코드힌트를 임의로 끌수도있나요ㅠㅠ?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.tab-inner .btn span태그 box sizing: border box;
선생님 .tab-inner .btn span태그에 width:100px; 을 주고 padding:5px;을 주었으니 너비값이 padding으로 인해서 변하니 box sizing: border box;를 줘야되는거 아닐까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 호버 관련
선생님 네비게이션 옆으로 보이게 하는 구성 연습중 막히는 부분이 있어 질문드립니다!! 캡쳐화면과 같이 마우스를 menu1에 올리면 sub-menu가 menu1 의 sub-menu가 아닌 menu4의 sub-menu가 나와요.. 제이쿼리 적용시에는 괜찮은데 이게 혹시 나중에 문제가 있을까 걱정이 되어서요ㅠㅠ html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Vallery Festival</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo-header"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">축제소개</a> <div class="sub-menu"> <a href="#none">Festival소개</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> <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/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 class="open-modal" href="#none"><em>운영위원장 후보자 추천을 받고 있습니다.</em><b>2020.01.09</b></a> <a href="#none"><em>홈커밍데이 진행위원회 결과를 다운로드 받으세요.</em><b>2020.01.07</b></a> <a href="#none"><em>카드결제 무이자 이벤트 한시적 10월 20일까지</em><b>2019.12.31</b></a> <a href="#none"><em>보안강화 시스템 작업 안내 공지</em><b>2019.12.20</b></a> <a href="#none"><em>부여 가을연꽃축제 10주년 콘서트 축제</em><b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-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="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-header.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : (주)린 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="familysite"> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </footer> </div> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. <br><br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. <br><br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: #333; } .container { width: 1000px; } .container > div { /* border: 1px solid red; */ float: left; box-sizing: border-box; height: 600px; } .left { width: 200px; } .right { width: 800px; } header {} header > div {} .header-logo { height: 100px; line-height: 130px; } .navi {} /* Navigation */ .menu { position: relative; width: 90%; margin: auto; list-style: none; padding: 0; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: -30px; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub-menu a { display: block; padding: 5px; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide Animation */ .slide { width: 800px; height: 350px; overflow: hidden; } .slide > div { width: 2400px; font-size: 0; animation: slide 10s linear infinite; } .slide a { } .slide a img {} @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -800px; } 65% { margin-left: -800px; } 70% { margin-left: -1600px; } 95% { margin-left: -1600px; } 100% { margin-left: 0; } } .items { overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid red; */ height: 200px; float: left; box-sizing: border-box; } /* Tab Content */ .tab-inner { width: 95%; margin: auto; } .tab-inner > div {} .tab-inner .btn {} .tab-inner .btn span { border: 1px solid #000; text-align: center; width: 100px; padding: 5px; box-sizing: border-box; display: inline-block; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab1, .tab2 { border: 1px solid #000; height: 160px; } .tab1 { padding: 0 10px; } .tab1 a { display: block; border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 a {} .tab2 a img { padding-top: 30px; width: 85px; } /* css 깔끔하게 */ .tab1 a { overflow: hidden; } .tab1 em, .tab1 b { float: left; } .tab1 em { width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; } .tab1 em b{} .news { width: 300px; } .gallery { width: 300px; } .shortcut { width: 200px; } .shortcut img { width: 95%; } footer { overflow: hidden; } footer > div { /* border: 1px solid red; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .footer-logo { width: 200px; line-height: 130px; } .copyright { padding-top: 30px; width: 400px; } .familysite { width: 200px; padding-top: 40px; } /* Modal */ .modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .modal-content { position: absolute; background-color: #fff; width: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px 30px; border-radius: 10px; } .modal-content h2 {} .modal-content p { line-height: 1.6em; } .close-modal { border: 1px solid #000; padding: 5px 10px; float: right; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
select 에 option태그 관련
선생님! option태그에 value="" 이부분은 그냥 공백으로 비워놔도 상관없는지 궁금해요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2022년 출제기준 웹디자인 기능사 실기시험 공개문제 완성본 파일
선생님! 완성본 파일이 A1, B4, C2뿐인데 나머지는 어디서 확인할수있을까요???
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
저 뭘 잘못한걸까요? index에 왜 안보이죠? ㅠㅠ
잘 되고 있었는데 갑자기 index에 표시가 안되는데.... 뭘 잘못한걸까요 ㅠ HTML > <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="side"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="benner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> </footer> </div> </div> </body> </html> CSS > .container {} .header-inner { border: 1px solid red; } .content-inner {} .footer-inner {}
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B4 결과 좀 부탁드립니다.!
혼자서 해봤는데 이정도로 만들면 몇 점 정도 받을 수 있을까요..? [HTML] <!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="header_inner"> <header> <div class="header_logo"> <a href="#"><img src="images/logo-header.png" alt="header_img"></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> <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> <li> <a href="#">커뮤니티</a> <div class="sub_menu"> <a href="#">공지사항</a> <a href="#">참여게시판</a> <a href="#">자료실</a> </div> </li> </ul> <div class="sub_back"></div> </div> </header> </div> <div class="content_inner"> <div class="slide"> <div> <a href="#"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab_inner"> <div class="btn"> <a href="#">공지사항</a> </div> <div class="tab"> <a href="#"><span>산업대학교 동문회장배 자선골프대회 </span><b>2016-09-12</b></a> <a href="#"><span>개교 100주년 기념 야외 오페라 초청 </span><b>2016-09-10</b></a> <a href="#"><span>동문회장 및 운영위원장 후보자 추천 </span><b>2016-09-09</b></a> <a href="#"><span>진행위원회(정회원) 선발 결과 </span><b>2016-09-07</b></a> <a href="#"><span>산업대학교 동문회 개최일 변경 </span><b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery_inner"> <div class="btn"> <a href="#">갤러리</a> <div class="tab"> <a href="#"><img src="images/gallery-01.jpg" alt="gallery_img1"></a> <a href="#"><img src="images/gallery-02.jpg" alt="gallery_img2"></a> <a href="#"><img src="images/gallery-03.jpg" alt="gallery_img3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="banner_img"></a> </div> </div> <div class="footer_inner"> <footer> <div class="copyright"> <div> <a href="#">법적고지</a> <a href="#">개인정보취급방침</a> <a href="#">개인정보처리방침</a> </div> <div> 상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49 </div> </div> <div class="familysite"> <select> <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> --------------------------------------------------------- [CSS] @charset "utf-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a { text-decoration: none; color: #222328; } .container {} .header_inner { background-color: #ddd; } header { width: 1200px; margin: auto; height: 100px; position: relative; } header>div { height: 100px; } .header_logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content_inner {} .slide { width: 1200px; margin: auto; margin-bottom: 10px; } .slide>div { height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; margin-bottom: 10px; } .items>div { height: 200px; float: left; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer_inner { background-color: #ddd; } footer { width: 1200px; margin: auto; overflow: hidden; } footer>div { height: 100px; float: left; text-align: center; } .copyright { width: 1000px; } .copyright>div { line-height: 50px; height: 50px; } .familysite { line-height: 100px; width: 200px; } /* 슬라이드 */ .slide { overflow: hidden; } .slide div { font-size: 0; width: 3600px; animation: slide 10s linear infinite; } @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -1200px; } 65% { margin-left: -1200px; } 70% { margin-left: -2400px; } 95% { margin-left: -2400px; } 100% { margin-left: -0px; } } /* 탭메뉴 */ .gallery_inner, .tab_inner { width: 90%; } .tab_inner .btn {} .gallery_inner .btn>a, .tab_inner .btn>a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; background-color: white; margin-bottom: -1px; } .gallery_inner .tab, .tab_inner .tab { border: 1px solid #000; padding: 6px 15px; height: 155px; } .tab_inner .tab a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab_inner .tab a span { width: 60%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab_inner .tab a b { width: 30%; float: right; text-align: right; } .tab_inner .tab a:last-child { border-bottom: none; } .gallery_inner .tab { text-align: center; } .gallery_inner .tab a img { margin-top: 20px; width: 110px; } /* 네비게이션 */ .navi { padding-right: 20px; } .menu { padding: 0; list-style: none; padding-top: 42px; } .menu li { float: left; text-align: center; width: 150px; margin-right: -1px; } .menu li>a { display: block; border: 1px solid #000; padding: 10px; transition: 0.5s; } .menu li:hover>a { background-color: black; color: white } .sub_menu { height: 150px; position: relative; z-index: 10000; display: none; } .sub_menu a { display: block; padding: 5px; color: white; transition: 0.5s; } .sub_menu a:hover { background-color: black; } .sub_back { position: absolute; background-color: rgba(20, 110, 5, 0.8); top: 100px; left: 0; width: 100%; height: 200px; display: none; } ---------------------------------- [jq] /* 네비 */ $('.menu li').mouseenter(function() { $('.sub_menu').stop().slideDown(); $('.sub_back').stop().slideDown(); }) $('.menu li').mouseleave(function() { $('.sub_menu').stop().slideUp(); $('.sub_back').stop().slideUp(); })
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 궁금해요~~
@charset 'utf-8'; 을 써주었는데 이전 강의들에서는 따로 기재없이 진행 했는데 이걸 꼭 써줘야하는 이유가 있을까요? 아래와 같이 html 안에 비슷한 구문?이 있는데 저거말고 추가로 css에 꼭 적어줘야 되는건지 궁금해요! 정리해서 질문드리자면 질문1) css에 @charset 'utf-8'; 기재하는 이유? 그리고 해당 구문 입력시 utf-8이 빨간색으로 떠요! 무슨 문제일까요? 질문2) html title태그안에 이름은 보통 수험번호를 적나요? <head> <meta charset="UTF-8"> <title>수험번호??</title> <link rel="stylesheet" href="css/style.css"> </head>
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 공개문제
기출문제가 a1 ~ a4 b1 ~ b4 c1 ~ c4 가 있던데 강의에서는 a1, b4, c2 만 있더라구요 다른문제들 혼자서 해보려는데 각 문제에 해당하는 이미지, 텍스트 같은건 어디서 구하나요??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제공해주신 txt 파일 관련
선생님! 맥os의 경우 제공해주신 최종본 제작 파일 안에 txt파일이 모두 깨져서 안보이는데 어떻게 확인 할 방법이 있을까요ㅜㅜ?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 setInterval 관련 질문
css보다 코드는 간결한데 조금 헷갈려서 좀 더 명확히 이해하고자 질문드립니다ㅜ! 본문영상과 같은 상황일때 여기서 eq(1)이 가장 먼저 실행되고 eq(1)은 즉 이미지01 eq(2)은 이미지02 eq(0)이 가장 마지막에 실행되고 eq(0)은 이미지03 으로 보면 되는걸까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.sub_back의 헤더는 div.navi 아닌가요???
강의에서 부모요소는 header라 하시길래 만약 .sub_back의 header랑 div.navi 둘 다 된다면 무슨 차이인지 궁급합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
세로2컬럼에 가로슬라이드 적용시 문제
가로 슬라이드를 세로2컬럼 레이아웃에 적용 해보는 연습 중 질문드립니다. 아래 사진과 같이 이미지 3개중 일부가 위로 못올라오는데 도무지 이유를 모르겠습니다ㅠㅠ 분명 .slide > div 에 width: 2400px; 와 font-size: 0;을 주었는데 이미지가 두개는 올라오고 한개는 밑에 머물러있어요.. (저와 같은 문제로 질문하신분 글을 보았는데 내용인즉 .slide div에 width:2400px을 지정해도 가로로 나열이 안된 것처럼 보이는게 container에 overflow:hidden을 지정했기에 그걸 가리니 제대로 작동이 된다 라고 하셨더라구요 하지만 저는 .container에 overflow: hidden;을 가려도 변화가 없이 이미지 세개가 다올라오지 않습니다 ..) css body { margin: 0; color: #222; font-size: 15px; } a { text-decoration: none; color: #222; } .container { width: 1000px; overflow: hidden; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } header {} header > div { border: 1px solid #ddd; } .header-logo { height: 100px; text-align: center; line-height: 100px; } .navi { height: 400px; } .right { width: 800px; } /* Slide Animation */ .slide { position: relative; width: 800px; height: 300px; } .slide > div { width: 2400px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -800px; } 65% { left: -800px; } 70% { left: -1600px; } 95% { left: -1600px; } 100% { left: 0; } } .items { overflow: hidden; } .items > div { border: 1px solid #ddd; float: left; box-sizing: border-box; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; text-align: center; line-height: 200px; } footer { overflow: hidden; } footer > div { border: 1px solid #ddd; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-content { width: 600px; } .footer-content > div { border: 1px solid #ddd; height: 50px; } html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</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"> <!-- Slide Animation --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="image1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="image2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="image3"></a> </div> </div> <!-- Slide Animation --> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut">바로가기</div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div></div> <div></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드려용!!
(*이 글에서 제가 참고한 완성본 파일은 강의 목록 모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)에 있는 (탭메뉴) 안에 "공지사항,갤러리 별도로" 파일 입니다.) 질문 1) 강의에는 없는 것 같은데 선생님께서 주신 완성본 파일 확인시 궁금한점이 몇가지 생겨 질문드립니다. ( 주석처리한 부분 관련입니다. 학습참고용이라고 답변 주셨는데 궁금해서 질문드려요!!) (주석1️⃣ .slide 태그 안) .content-inner { width: 1200px; margin: auto; } .slide { /* width: 1200px; */ text-align: center; line-height: 300px; /* clear: both; */ } .slide에 clear: both;를 주었던 이유는 무엇인지 궁금합니다! (주석2️⃣ .tab-inner .tab, gallery-inner .tab 태그 안) .tab-inner, .gallery-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid #000; display: inline-block; padding: 3px; width: 120px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab { border: 1px solid #000; padding: 0 10px; height: 160px; /* box-sizing: border-box; */ } .tab-inner .tab a { display: block; border-bottom: 1px solid #000; padding: 3px; } .tab-inner .tab a:last-child { border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img { width: 110px; } .gallery .tab { text-align: center; padding-top: 25px; box-sizing: border-box; } box-sizing: border-box;를 .tab-inner .tab, .gallery-inner .tab 에 같이 주었던 이유가 궁금합니다!.gallery .tab 에서 padding-top: 25px을 주었기때문에 저는 .gallery-inner .tab에만 개별적으로 box-sizing: border-box 을 주었습니다 그런데! 확인해보니 제가 말한대로 .gallery-inner .tab에만 box-sizing: border-box를 주면 옆에 공지사항 박스가 갤러리 박스와 비교시 미세하게 박스크기의 높이부분이 차이가 나더라구요 이유를 알수있을까요ㅜㅜ? 질문 2) 이전 말씀 해주신 것처럼 position: relative;를 넣으면 밑에 줄이 사라져보이는데요 선생님 강의와 완성본 파일에는 position이 따로 없는데 어떻게 적용하신건지 궁금해요!! (아래 코드는 선생님께서 제공해주신 완성본파일입니다. 보시다시피 position: relative; 는 없어요! ) 선생님께서는 span태그를 사용하고 저는 div태그를 사용했기 때문에 발생한 이슈일까요? .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid #000; display: inline-block; padding: 3px; width: 120px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
clear: both;를 줘야하는 이유?
items > div 이면 스페이스가 아닌 꺽세이기 때문에 자식태그만 float: left; 를 상속 받는게 아닌가요? 왜 밑에 따로 떨어져 있는 footer가 그 영향을 상속 받는건지 모르겠어요ㅜㅜ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
float 상속
강사님 .items > div에 float 속성을 준게 다음 요소에게 성질을 주기 때문에 footer-inner에 clear : both를 해준다는건 이해했습니다. 그러면 header-logo, navi한테도 float를 줬으니까 content-inner에게도 clear:both를 줘야하는게 맞지 않나요?? 그리고 footer-inner에 clear를 안줘도 결과는 똑같던데 생략해도 되나요??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
10분쯤에 clear:both;
.items > div에 float값을 줬으니까 상속받은 채로 내려와서 footer에도 영향을 끼치기 때문에 해제하려고 footer에 clear : both를 준다고 이해했습니다. 이렇게 하면 .items에 overflow : hidden을 안줘도 되니까 근데 위 방법말고 그냥 .items에 overflow : hidden을 주고 footer에서도 overflow: hidden이나 height : 100px을 주는 방법을 쓰면 안되나요 둘의 차이점이 궁금합니다.!!
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A3타입
혼자서 해봤는데 혹시 감점 요인이 있을까요..? html코드는 강의랑 똑같이 했습니다. .container { width: 1200px; margin: auto; /* border: 1px solid red; */ } header { overflow: hidden; } header > div { border: 1px solid blue; height: 100px; box-sizing: border-box; } .header_logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide { } .slide > div { border: 1px solid green; height: 300px; box-sizing: border-box; } .items { overflow: hidden; } .items > div { border: 1px solid orange; height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { border: 1px solid pink; height: 100px; float: left; box-sizing: border-box; } .footer_logo { width: 200px; } .copyright { width: 1000px; } .copyright div { height: 49px; border: 1px dashed rgb(240, 123, 191); box-sizing: border-box; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing
공지사항, 갤러리, 바로가기의 높이값들이 200px로 명시 돼있는데 .items > div에 height를 줬으면 .items > div에 border : 1px solid black을 줬을 때는 무조건 box-sizing : border-box; 를 해야되죠?? (안하면은 높이가 202px이 되니까..?) 아니면 border : 1px solid black을 삭제하거나