월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달이 작동이 안됩니다..ㅠㅠ
html <!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/logo.jpg" alt="header.lg"></a></div> <div class="navi"> <div 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> </div> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/Slide01.jpg" alt="slide01"></a> <a href="#none"><img src="images/Slide02.jpg" alt="slide02"></a> <a href="#none"><img src="images/Slide03.jpg" alt="slide03"></a> </div> </div> <div class="contents"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.09</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2020.01.09</b></a> <a href="#none">올앳 시스템 작업 안내<b>2020.01.09</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2020.01.09</b></a> </div> <div class="tab2">tab~~~2</div> </div> </div> </div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/f-logo.jpg" alt="footer-logo"></a> </div> <div class="copy"></div> <div class="sns"> <a href="#none"><img src="images/sns1.jpg" alt="face book"></a> <a href="#none"><img src="images/sns2.jpg" alt="twt"></a> <a href="#none"><img src="images/sns3.jpg" alt="instagram"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <br> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> css *{ margin: 0; text-decoration: none; list-style: none; color: #000; } /*layout*/ .container{ width: 1200px; /* border: 1px solid #000;*/ margin: auto; box-sizing: border-box; } .container > div{} header{ height: 100px; box-sizing: border-box; position: relative; z-index: 10; } header > div{ float: left; height: 100px; box-sizing: border-box; } .header-logo{ width: 200px; border: 1px solid #000; line-height: 8; } .navi{ width: 1000px; border: 1px solid #000; } .slide{ height: 300px; border: 1px solid #000; } .slide > div{} .contents{ overflow: hidden; } .contents > div { height: 200px; float: left; border: 1px solid #000; box-sizing: border-box; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ overflow: hidden; } footer > div{ height: 100px; float: left; border: 1px solid #000; box-sizing: border-box; padding:30px 0 0 15px; } .footer-logo{ width: 200px; } .footer-logo img{ margin-left: -15px; } .copy{ width: 800px; } .sns{ width: 200px; } /*layout*/ /*slide*/ .slide{ height: 300px; position: relative; overflow: hidden; } .slide > div{ position: absolute; font-size: 0; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 0%{top: 0;} } /*slide*/ /*navi*/ .menu{ padding-top: 30px; border: 1px solid #000; width: 600px; float: right; box-sizing: border-box; } .menu li{ width: 25%; float: left; text-align: center; } .menu li > a{ display: block; border: 1px solid #000; width: 100%; font-size: 18px; padding: 5px 0 5px 0; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; background-color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } /*navi*/ /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.15); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content{ padding: 20px; width: 350px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .close-modal{ float: right; padding: 10px; font-weight: 600; } /*modal*/ /*tab contents*/ .tab-inner{} .btn{ } .btn a.active{ background-color: #fff; } .btn a{ border: 1px solid #000; display: inline-block; width: 150px; padding: 5px; text-align: center; margin-left: -6px; background-color: #ddd; border-radius: 10px 10px 0 0; margin-bottom: -1px; border-bottom: none; } .btn a:nth-child(1){ margin-left: 1px; } .tabs{} .tabs > div{ height: 160px; border: 1px solid #000; } .tab1{ } .tab1 a{ display: block; padding: 5px; } .tab1 b{ float: right; } .tab2{ display: none; } /*tab contents*/ js /*navi*/ $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) /*navi*/ /*tab content*/ $('.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') }) /*tab content*/ /*modal*/ $('.open-modal').click(function(){ ('.modal').fadeIn() }) $('.close-modal').click(function(){ ('.modal').fadeout() }) /*modal*/
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 jquery 오류
오류나는 이유를 모르겠습니다 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
margin 질문
css에서 body { margin:0; } .container { margin:auto; } 각각 왜 넣는건가요? body에는 초기 마진값을 없앤다고 쳐도 .container에 margin auto를 주면 좌우 값뿐만 아니라 상하 값도 가운데 정렬이 되어야 하는 거아닌가요?(그런데 상하값은 왜 또 가운데 정렬이 되지 않는지..) 이 두 가지를 적지 않는 대신 body에 margin:0 auto;를 주어도 되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이 강의처럼 세팅하려면 어떻게 해야하나요
선생님 갑자기 진도가 너무 확 나간 기분인데 저 강의를 들을수 있게 세팅하려면 어떻게 해야할까요? 전에 만들었던 레이아웃 그대로 해야하나요 색션이나 아티클은 레이아웃 만들때 없었는데 이게 어떻게 된건가요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이어 창까지 완성해 보았는데요~
코드 확인 좀 부탁드려도 될까요....혼자 공부하느라 혹시 놓치고 있는 부분이 있을까 해서요...^^
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer가 구현을 안해요ㅠㅠ
선생님이 가르쳐주신 그대로 따라했는데 왜 저는 다른거같죠ㅠ content 까지는 잘 되다가 footer부터 슬라이드 구현이 안되네요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
height 설정에 관한 질문
전에 float 속성 썼을 때 부모요소가 높이값을 잃을 때 overflow:hidden 쓰거나 height설정 중 둘 중 하나를 하면 된다고 했는데 여기서는 부모요소에 overflow:hidden을 넣는다 해도 height도 꼭 써줘야 하나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
세로 레이아웃의 슬라이드에 대한 질문입니다.
이전에 질문한 내용인데 코드를 올려 달라고 하셔서 여기에 올립니다. 한 번 더 보니까 .slide div에 width:2400px을 지정해도 가로로 나열이 안된 것처럼 보이는게 container에 overflow:hidden을 지정해서 그런것 같더라고요~ 그걸 푸니까 가로로 올라가는게 보였어요. 그런데 애니메이션이 적용되면서 왼쪽으로 이동될 때 여전히 이동된 왼쪽 슬라이드가 보여서 .right에 overflow:hidden을 지정했거든요. 이렇게 코딩하는게 맞을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
브라켓에서 폴더 구조가...
이 상태로 작업하는게 맞나요? 제출시 수험자 파일과 포토샵 원본 파일은 제외한 A01(임의로 지정) 파일을 제출하고요. index.html은 브라켓 열고 마우스 우측 버튼 클릭해서 파일 만들기로 만들었어요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달창 modal의 높이값 오류 질문입니다.
modal div가 height:100%(100vh)로 지정해도 검정색 배경이 브라우저 전체에 채워지지 않습니다. 문제집에 나와 있는 문제라서 구조를 변경하여 코딩했는데 html 구조 자체에 문제가 있는 건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
다시 만들어보니
span 부분의 밑줄이 없어지지 않네요 ㅜㅜ <!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> <article class="header-logo">로고</article> <article class="navi">네비게이션</article> </header> </div> <div class="content-inner"> <div class="slide"> <div>이미지슬라이드</div> </div> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none">SMS 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<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> </article> <article class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab"> <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> </article> <article class="shortcut">shortcut</article> </section> </div> <div class="footer-inner"> <footer> <article class="footer-logo">로고</article> <article class="copyright">copyright</article> <article class="familysite">familysite</article> </footer> </div> </div> </body> </html> css ------------------------------------- .container { } .header-inner { background-color: #ddd; } header { border: 1px solid #ccc; width: 1200px; margin: auto; height: 100px; } header article { height: 100px; border: 1px solid #ccc; } .header-logo { width: 200px; float: left; text-align: center; line-height: 100px; } .navi { width: 600px; float: right; text-align: center; line-height: 100px } .content-inner { width: 1200px; margin: auto; } .slide { width: 1200px; height: 300px; text-align: center; line-height:250px; border: 1px solid #ccc; } .slide article{ height: 300px; } .items { overflow: hidden; } .items article{ height: 200px; border: 1px solid #ccc; float: left; box-sizing:border-box; width: 33.3333%; } .news { border: 1px solid #ccc; } .gallery { border: 1px solid #ccc; } .shortcut { border: 1px solid #ccc; } .footer-inner { background-color: #ccc; } footer { width: 1200px; margin: auto; height: 100px; overflow: hidden; } footer article { height: 100px; border: 1px solid #000; float: left; box-sizing:border-box; text-align: center; line-height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .familysite { width: 200px; } .tab-inner, .gallery-inner{ width: 95%; margin: auto; } .tab-inner .btn { } .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid #333; width: 100px; text-align: center; padding: 5px; display:inline-block; border-radius:5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #333; padding: 0 10px; height: 155px; } .tab-inner .tab a { display:block; padding: 4px; border-bottom:1xp solid #000 ; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b { float: right; font-weight:normal; } .gallery .tab{ text-align: center; padding-top: 20px; box-sizing:border-box; } .gallery .tab img { width: 110px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 ㅠ 이 오류 해결할수 없을까요?...
(사진)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
탭 화면전환이 되지않습니다
html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>가로 레이아웃-1</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide03.jpg" alt="slide3"></a> </div> </div> <div class="contents"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1">tab1</div> <div class="tab2">tab2</div> </div> </div> </div> <div class="banner"> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copy"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> css *{ padding: 0; margin: 0; text-decoration: none; list-style: none; color: #000; } .container{ width: 1200px; margin: auto; border: 1px solid red; } .container > div{} header{ width: 1200px; margin: auto; height: 100px; position: relative; /*슬라이더 위에 올라오기*/ z-index: 1; } header > div{ height: 100px; box-sizing: border-box; } .header-logo{ width: 200px; border: 1px solid #000; float: left; } .navi{ width: 600px; border: 1px solid #000; float: right; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .contents{ overflow: hidden; } .contents > div{ height: 200px; float: left; border: 1px solid #000; box-sizing: border-box; /*컨텐츠에 보더박스!!*/ } .news{ width: 400px; } .banner{ width: 400px; } .shortcut{ width: 400px; } footer{ overflow: hidden; } footer > div{ height: 100px; border: 1px solid #000; box-sizing: border-box; float: left; } .footer-logo{ width: 200px; } .copy{ width: 800px; } .sns{ width: 200px; } /* slide */ .slide{ position: relative; width: 1200px; height: 300px; /*레이아웃이 깨지지않게 필수!*/ } .slide > div{ font-size: 0; } .slide div a { 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%{ visibility: visible; /* 0% 구간에서 visibility: hidden 상태를 5% 구간에서 보이는 상태로 전환 */ opacity: 1; } 35%{opacity: 1;} 40%{ visibility: hidden; /* 슬라이드로 보이는 구간이 끝났으니까 투명도 0과 함께 실제로도 보이지 않는 상태로 100% 구간까지 전환 */ opacity: 0; } 100%{ opacity: 0;} } /* navi */ .menu{ /*ul*/ padding: 0; list-style: none; margin-top: 65px; /*메뉴 전체를 보기좋게 네비 중간에 정렬*/ } .menu li{ float: left; width: 25%; /*퍼센트로 주는게 정확*/ box-sizing: border-box; text-align: center; } .menu li > a{ /*MENU-1 ~4*/ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; /*메뉴 css 마지막 작업*/ } .sub-menu a{ display: block;/*가장 먼저 주는게 편함*/ padding: 10px; transition: 0.5s; /*부드럽게 전환*/ color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } /* content 공지사항 갤러리 탭으로 구성*/ .tab-inner{ width: 97%; margin: auto; } .tab-inner .btn{} .tab-inner .btn a{ border: 1px solid #000; display: inline-block; width: 120px; text-align: center; padding: 3px; border-radius: 10px 10px 0 0; margin-right: -5px; background-color: #ddd; cursor: pointer; /*마우스 커서*/ border-bottom: none; margin-bottom: -1px; } .tab-inner .btn.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 160px; } .tabs .tab1{} .tabs .tab2{ display: none; /*갤러리는 태초 안보이는 상태 유지*/ } js /*tab*/ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) $('.btn a:last-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) tab1 > tab2 글자가 전환되는게 안보이네요 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
position을 줬을 때 너비값을 잃는 이유
7:00 쯤에서 position: absolute나 position:fixed를 주면 block요소(div)인 modal이 width값을 잃는다고 했는데 왜 잃게 되나요? 또 부모 요소에는 position:relative를 주고 자식 요소에는 position:absolute를 준다고 들었던 것 같은데 부모요소인 modal에 relative를 주지 않고 부모요소와 자식요소 둘 다 absolute를 주는 이유가 뭔가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
몇가지 질문이 있습니다.
1.세로형 레이아웃에서 좌우로 움직이는 슬라이드 제작시 width:2400px이 적용되지 않습니다. slide div가 위로 올라가지 않습니다. 2.수험지에 지정된 색상으로 텍스트 컬러를 지정하는데... 결과물의 네비게이션 목록의 텍스트 색상이 흰색이면 #fff로 지정해도 문제 없는거죠? 3.네비게이션의서브메뉴 테두리를 왼쪽/오른쪽/아래쪽만 지정할시 (menu li:first-child~) sub-menu:first-child로 코딩하면 안되더라고요. 왜 그런가요? 4.탭 메뉴 제작시 tab2의 img를 수직 중앙 정렬하기 위해 padding-top:30px을 지정하는데 패딩을 지정하면 부피가 커지잖아요. 그런데 정해진 부피 안에서 이미지가 아래로 내려가고 넘치는 부분은 잘리더라고요. 레이아웃 제작 items div들의 너비, 높이값이 정해져 있고 box-sizing:border-box를 코딩해 놓은 것과 연관이 있는 건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
푸터 레이아웃이 깨져요
html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>가로 레이아웃-1</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUBMENU-1</a> <a href="#none">SUBMENU-2</a> <a href="#none">SUBMENU-3</a> <a href="#none">SUBMENU-4</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> <div class="slide"> <div> <!--꼭 div안에 a를 넣도록 하자! slide > div > a > img--> <a href="#none"><img src="images/slide01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide03.jpg" alt="slide3"></a> </div> </div> <div class="contents"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.11</b></a> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.11</b></a> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.11</b></a> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.11</b></a> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.11</b></a> </div> </div> </div> <div class="banner"> <div class="banner-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab"> <a href="#none"><img src="images/gallery-01.jpg" alt="갤러리1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="갤러리2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="갤러리3"></a> </div> </div> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copy"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> CSS *{ padding: 0; margin: 0; text-decoration: none; list-style: none; color: #000; } .container{ width: 1200px; margin: auto; border: 1px solid red; } .container > div{} header{ width: 1200px; margin: auto; height: 100px; position: relative; /*슬라이더 위에 올라오기*/ z-index: 1; } header > div{ height: 100px; box-sizing: border-box; } .header-logo{ width: 200px; border: 1px solid #000; float: left; } .navi{ width: 600px; border: 1px solid #000; float: right; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .contents{ overflow: hidden; } .contents > div{ height: 200px; float: left; border: 1px solid #000; box-sizing: border-box; /*컨텐츠에 보더박스!!*/ } .news{ width: 400px; } .banner{ width: 400px; } .shortcut{ width: 400px; } footer{ overflow: hidden; } footer > div{ height: 100px; border: 1px solid #000; box-sizing: border-box; float: left; } .footer-logo{ width: 200px; } .copy{ width: 800px; } .sns{ width: 200px; } /* slide */ .slide{ position: relative; width: 1200px; height: 300px; /*레이아웃이 깨지지않게 필수!*/ } .slide > div{ font-size: 0; } .slide div a { 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%{ visibility: visible; opacity: 1; } 35%{opacity: 1;} 40%{ visibility: hidden; opacity: 0; } 100%{ opacity: 0;} } /* navi */ .menu{ /*ul*/ padding: 0; list-style: none; margin-top: 65px; } .menu li{ float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a{ /*MENU-1 ~4*/ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 10px; transition: 0.5s; color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } /* content 공지사항 갤러리*/ .tab-inner, .banner-inner{ width: 95%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .banner-inner .btn span{ display: inline-block; border: 1px solid #000; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-bottom: -1px; border-bottom: none; background-color: #fff; } .tab-inner .tab, .banner-inner .tab{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab-inner .tab a{ display: block; padding: 5px; border-bottom: 1px solid #000; } .tab-inner .tab a:last-child{ border: none; } .tab-inner .tab a b{ float: right; font-weight: normal; } .banner-inner .tab img{ width: 110px; } .banner-inner .tab{ text-align: center; padding-top:20px; box-sizing: border-box; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
slide 질문
div class="slide" 안에 또 div를 만들었는데, div를 또 만들지 않고 div class="slide"에 width=1200px, height=300px,margin: auto, border와 같은모든 속성을 지정해줘도 되나요?
- [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer가 레이아웃에 조회되지않아 clear:both;을 입력하니 동일한 레이아웃으로 나옵니다. css태그 보내드립니다. 확인부탁드립니다.
삭제된 글입니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
갤러리 이미지가 가려집니다
html <div class="contents"> <!--tab--> <div class="news"> <div class="tab-inner"> <!--전체박스--> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none">sns 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선작업<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<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> </div> <!--tab--> <!--갤러리--> <div class="banner"> <div class="banner-inner"> <div class="btn"> <span></span> </div> <div class="tab"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> <!--갤러리--> </div> <div class="shortcut"></div> css .tab-inner .btn span, .banner-inner .btn span{ border: 1px solid #000; display: inline-block; /*크기값을 주기위해,in-line으로 해야 밑줄 없애는거 적용*/ width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0;/*상우하좌*/ border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .banner-inner .tba{ border: 1px solid #000; padding: 0 10px; } .tab-inner .tab a{ display: block; /*가장 먼저 하기*/ padding: 5px; border-bottom: 1px solid #333; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b{ float: right; font-weight: normal; } .banner .tab img{ width: 110px; } - 이미지들이 버튼 위에 위치해서 다 가려지네요 ㅠ 뭐가 문제일까요..?포지션-제트인덱스를 써봐도 안내려가네용 ㅠ 적용이 안된걸까요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
CSS 목록 스타일 이미지 크기 조정
선생님 강의를 다 듣고 한번 이미지를 목록 디자인에 넣어볼려고 시도를 해봤는데, 이미지 크기가 너무 커서 조절을 해볼려고 했습니다. 근데, 이미지 크기를 해볼려고 하다가 막혀서 여기저기 찾아봤는데 비슷한 구문인거 같은데 왜 안되는지를 몰라서 궁금한 마음에 질문드립니다. 클래스 menu로 설정한 경우 before 쪽하고 따로 들어가는거진... 실패한 css - 배경이미지로 들어가버림 성공한 css 의도한 이미지