월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer{clear:both;} 하지 않고 .items{ overflow: hidden; } 해도 됩니까?
footer{clear:both;} 하지 않고 .items{ overflow: hidden; } 해도 footer부분이 보이는데 이렇게 해도 됩니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) 완성본 파일과 테스트 파일 어디서 다운 가능합니까?
섹션 10. 모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)에 [모듈 제작 완성본] 탭 메뉴(공지사항, 갤러리) 수업자료 다운로드 해도 강의 중인 파일 완성 본은 없고 테스트 파일도 없습니다.어디서 다운로드 가능합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사(2023년도)
2023년 웹디자인기능사 기능사 제1회 부터(1~20형)D-1 ~ E-4까지 추가 문제는 어떻게 해야 하나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Lasso Tool 올가미 도구 선택 곡선이 아니라 각이 진 직선입니다.
Lasso Tool 선택 후 영역을 그리는데 곡선이 아니라 각이 진 직선으로 그려 집니다. 어떻게 해야 합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
로고 제작 방법이 궁금합니다.
A.1 로고❍ Header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명(가.주제)에 맞게 반드시 변경하여야 한다.어떤 방식으로 해야 하나요?제공된 로고 PNG 파일인가요?로고 파일 포토샵에서 불러와서 색만 바꿔주면 되는 건가요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
처음으로 완성해봤습니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>유진건설</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-header.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">회사소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">조직구성도</a> <a href="#none">오시는길</a> </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> </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> <div class="sub-back"></div> </header> <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> <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="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"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="Copyright"> <div> <a href="#none">동문경조사</a> <a href="#none">동문행사일정</a> <a href="#none">사용자매뉴얼</a> </div> <div> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </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 class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다.<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> @charset "UTF-8"; body { margin: 0; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container { /* border: 1px solid red; */ width: 1200px; margin: auto; } header { height: 100px; position: relative; z-index: 10; } header > div { /* border: 1px solid blue; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; margin-right: 20px; } .slide {} .slide > div { /* border: 1px solid green; */ height: 300px; } .items { overflow: hidden; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { /* border: 1px solid green; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .Copyright { width: 1000px; } .Copyright div { /* border: 1px solid black; */ height: 50px; } .Copyright div:nth-child(1) { padding-top: 20px; box-sizing: border-box; } .Copyright div:nth-child(1) a:hover { text-decoration: underline; } .family-site { width: 200px; line-height: 100px; } /* navigation */ .menu { list-style: none; padding: 0; padding-top: 53px; } .menu li { float: left; width: 25%; text-align: center; box-sizing: border-box; } .menu li > a { border: 1px solid #000000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000000; color: #ffffff; } .sub-menu { border: 1px solid #000000; display: none; } .sub-menu a { display: block; padding: 5px; color: #ffffff; transition: 0.5s; } .sub-menu a:hover { background-color: #ffffff; color: #000000; } .sub-back { background-color: #000000; width: 1200px; height: 140px; position: absolute; left: 0; top: 100%; z-index: -1; display: none; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; margin-bottom: 20px; } .slide > div { font-size: 0; } .slide > div a { position: absolute; left: 0; top: 0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1) { animation-delay: 0s; } .slide > div a:nth-child(2) { animation-delay: 3.5s; } .slide > div a:nth-child(3) { animation-delay: 7s; } @keyframes slide { 0% { opacity: 0; visibility: hidden; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* news & gallery & shortcut */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ffffff; } .tab1, .tab2 { border: 1px solid #000000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000000; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em, .tab1 a b { display: block; float: left; font-weight: normal; font-style: normal; } .tab1 a em { width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .tab2 img:hover { opacity: 0.7; } .shortcut img { width: 96%; } /* modal */ .modal { background-color: #00000053; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { width: 350px; background-color: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; } .close-modal { float: right; border: 1px solid #000000; padding: 5px 15px; } /* navigation */ $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .sub-back').stop().slideUp() }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })이렇게 연습하면 될까요?확인 부탁합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
만약에 시험장 비주얼 스튜디오 코드 확장에서 Korean Language Pack 설치 되지 않으면 어떻게 합니까?
만약에 시험장 비주얼 스튜디오 코드 확장에서 Korean Language Pack 검색 되지 않아 설치 되지 않으면 어떻게 합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
바탕화면에 임의 폴더 제작 작업 후 A01 작업 폴더에 복사 저장하면
바탕화면에 임의 폴더 제작하여 작업 한 후 마지막에 A01 작업 폴더에 복사 저장해서 제출 하면 어떻습니까? 그냥 처음부터 A01 폴더에서 작업 해서 제출하는 것이 좋습니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 글 넘침
글이 넘칠 땐 어떻게 css를 넣으면 될까요?아님 폰트사이즈를 줄여서 넣어도 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 시험 관련
psd 작업 파일의 경우 수험자 제공폴더>원본 이미지 파일에 저장하면 되는 걸까요?네비게이션의 경우 예를 들어서 상단 전체 검정 배경 드롭다운을 만들어야는데 실수로 상단전체 드롭다운으로 만들면 몇 점 정도 감점이 될까요?css에 @charset "utf-8";를 넣으라하는데 왜 넣어야되는 걸까요? 큰 차이가 있나요?script 링크에 'type=text/javascript' 넣는 건 선택사항인가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 관련 질문
문제 예제를 보면 네비게이션 서브메뉴가 4개가 아닌 3개인 것도 있는데.사진처럼 서브메뉴 개수에 맞춰 높이가 맞지 않게 노출이 됩니다. 어떻게 설정해야 위 사진처럼 설정할 수 있나요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 실기 시험 질문드립니다.
오늘 웹디자인기능사 실기 시험을 봤는데요.감독관분께서 완성본을 확인하시고 나서 이제 가도 된다고 하셔서 퇴실했는데 다른 사람들 후기 보니까 무슨 전송 버튼을 눌렀다고 하더라구요..전 제자리 컴퓨터에 완성본만 두고 나왔는데이거 실격사항일까요...?아니면 감독관분께서 감독관 컴퓨터로 보내는걸까요..?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
html, css 주석 관련
/*이나 <!--으로 주석을 넣을 때이름을 영어로 작성하시더라구요혹시 영어가 아닌 한글로 작성해도 괜찮나요?<!--네비게이션--> 이런 식으로 말이죠
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
코드작성 후 반영되는 글자
해당 강의에 맞춰 작성하면 글씨가 보라색깔에 글씨 밑줄이 그어진 채 반영이 됩니다.강의에서는 하단 사진처럼 나오던데 여태까지 color랑 text-decoration으로 수정해왔는데 상관 없을까요?네비게이션 작성 뿐만 아니라 공지사항/갤러리 작성할 때도 이랬습니다.혹시 모르니 코드 작성한 것도 올려놓겠습니다. <!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"></div> <div class="navi"> <!--navi--> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU1</a> <a href="#none">SUB-MENU2</a> <a href="#none">SUB-MENU3</a> <a href="#none">SUB-MENU4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU1</a> <a href="#none">SUB-MENU2</a> <a href="#none">SUB-MENU3</a> <a href="#none">SUB-MENU4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU1</a> <a href="#none">SUB-MENU2</a> <a href="#none">SUB-MENU3</a> <a href="#none">SUB-MENU4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU1</a> <a href="#none">SUB-MENU2</a> <a href="#none">SUB-MENU3</a> <a href="#none">SUB-MENU4</a> </div> </li> </ul> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </div> </body> </html> .container {} .header-inner { border: 3px solid red; } header { height: 100px; width: 1200px; margin: auto; } header > div { border: 1px solid blue; height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .content-inner {} .slide { width: 1200px; margin: auto; } .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; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid pink; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.btn a{에 border-bottom: none; margin-bottom: -1px; background-color: #fff; 해도 밑 줄이 보입니다.
.btn a{ }에 border-bottom: none; margin-bottom: -1px; background-color: #fff; 해도 공지사항, 갤러리 밑 줄이 보입니다. 무엇이 틀렸습니까?☞ index.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-header.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <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> </header> <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> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> <a href="#none">갤러리</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/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> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"> <img src="images/sns-01.png" alt="sns1"> <img src="images/sns-02.png" alt="sns2"> <img src="images/sns-03.png" alt="sns3"> </a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> ☞ style.css@charset 'utf-8';body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; }a{ color: #222828; text-decoration: none; }.container{ width: 1200px; margin: auto; }header{ height: 100px; position: relative; z-index: 10; }header>div{ height: 100px; }.header-logo{ width: 200px; float: left; }.navi{ width: 600px; float: right; }.slide{ margin-bottom: 20px; }.slide>div{ height: 300px; }.items{ overflow: hidden; }.items>div{ 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; }.footer-logo{ width: 200px; }.copyright{ width: 800px; }.sns{ width: 200px; }/* img & text */.header-logo, .footer-logo{ line-height: 130px; }.copyright{ padding-top: 30px; text-align: center; }.sns{ line-height: 130px; text-align: center; }/* slide */.slide{ position: relative; width: 1200px; height: 300px; overflow: hidden; margin-bottom: 20px; }.slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; }@keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 100%{top: 0;} }/* 네비게이션 */.menu{ list-style: none; padding: 0; padding-top: 20px; }.menu li{ float: left; width: 25%; box-sizing: border-box; text-align: center; }.menu li>a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; }.menu li:hover>a{ background-color: #000; color: #fff; }.sub-menu{ background-color: #fff; border: 1px solid black; display: none; }.sub-menu a{ display: block; padding: 5px; transition: 0.5s; }.sub-menu a:hover{ background-color: #000; columns: #fff; }/* tab menu */.tab-inner{ width: 95%; margin: auto; }.btn{}.btn a{ border: 1px solid #000; display:inline-block; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -5px; border-bottom: none; margin-bottom: -1px; background-color: #fff; }.tabs{}.tab1{ border: 1px solid black; padding: 0 15px; }.tab1 a{ display:block; padding: 5px; border-bottom: 1px solid #000; }.tab1 a:last-child{border-bottom: none;}.tab1 a b{ float: right; font-weight: normal; }.tab2{ display: none; }무엇이 틀렸습니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.sub-back
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="#none"> <img src="images/logo-header.png" alt="header logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">대학소개</a> <div class="sub-menu"> <a href="#none">총장인사말</a> <a href="#none">학교소개</a> <a href="#none">홍보관</a> <a href="#none">캠퍼스안내</a> </div> </li> <li> <a href="#none">입학안내</a> <div class="sub-menu"> <a href="#none">수시모집</a> <a href="#none">정시모집</a> <a href="#none">편입학</a> <a href="#none">재외국민</a> </div> </li> <li> <a href="#none">정보서비스</a> <div class="sub-menu"> <a href="#none">대학정보알림</a> <a href="#none">정보공개</a> <a href="#none">정보서비스안내</a> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">참여게시판</a> <a href="#none">자료실</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide1"> <img src="images/slide-02.jpg" alt="slide2"> <img src="images/slide-03.jpg" alt="slide3"> </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>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청<b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a> <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</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="gallery1"> <img src="images/gallery-02.jpg" alt="gallery2"> <img src="images/gallery-03.jpg" alt="gallery3"> </a> </div> </div> </div> <div class="banner"> <a href="#none"> <img src="images/banner.jpg" alt="banner"> </a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="Copyright"> <div></div> <div></div> </div> <div class="family-site"></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; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { height: 100px; width: 1200px; margin: auto; } header > div { /* border: 1px solid blue; */ height: 100px; position: relative; z-index: 10; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; margin-right: 20px; } .content-inner {} .slide { width: 1200px; margin: auto; margin-bottom: 20px; } .slide > div { /* border: 1px solid green; */ height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { height: 100px; width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid green; height: 100px; float: left; box-sizing: border-box; } .Copyright { width: 1000px; } .Copyright div { border: 1px solid black; height: 50px; } .family-site { width: 200px; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { position: absolute; width: 3600px; font-size: 0; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ffffff; } .tab1, .tab2 { border: 1px solid #000000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 96%; } /* navigation */ .menu { list-style: none; padding: 0; padding-top: 52px; border: 1px solid red; } .menu li { border: 1px solid black; float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid #000000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000000; color: #ffffff; } .sub-menu { border: 1px solid #000000; } .sub-menu a { display: block; padding: 5px; color: #ffffff; transition: 0.5s; } .sub-menu a:hover { background-color: #ffffff; color: #000000; } .sub-back { background-color: #000000; width: 1200px; height: 140px; position: absolute; left: 0; top: 100%; z-index: -1; }배경색이 왼쪽으로 이동이 안됩니다.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항, 갤러리 tab 부분
.tab-inner .tab, .gallery-inner .tab { border: 1px solid black; padding: 0 10px; height: 145px; } 부분에 갤러리도 같이 묶었는데 갤러리 부분만 반영되지 않습니다.실제 문제를 보니 공지사항과 tab 부분에 border값을 넣지 않던데 큰 상관이 없는 건가요?<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>레이아웃 가로고정형-공지사항, 갤러리 별도구성</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo">로고</div> <div class="navi">네비게이션</div> </header> <div class="slide"> <div>이미지 슬라이드</div> </div> <!--아이템--> <div class="items"> <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> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> </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="gallery1"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery1"></a> </div> </div> <div class="banner">배너</div> </div> <footer> <div class="footer-logo">로고</div> <div class="copyright">copyright</div> <div class="sns">sns</div> </footer> </div> </body> </html> .container { border: 2px solid gray; width: 1200px; margin: auto; } header { height: 100px; } header > div { background-color: rgb(185, 185, 185); height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 660px; float: right; } /* Content */ .slide {} .slide > div { border: 1px solid gray; height: 300px; } .items { overflow: hidden; } .items > div { height: 200px; float: left; box-sizing: border-box; /*border: 1px solid gray;*/ } .news { width: 500px; } .gallery { width: 350px; } .banner { border: 1px solid black; width: 350px; } /*Footer*/ footer { overflow: hidden; } footer > div { border: 1px solid gray; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* Tab Content */ .tab-inner, .gallery-inner { width: 95%; margin: auto; } .tab-inner .btn {} .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid black; display:inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: white; } .tab-inner .tab, .gallery-inner .tab { border: 1px solid black; padding: 0 10px; height: 145px; } .tab-inner .tab a { display: block; padding: 3px; border-bottom: 1px solid black; text-decoration: none; color: black; } .tab-inner .tab a:last-child { border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } /* gallery Content */ .gallery .tab img { width: 100px; } .gallery .tab { text-align: center; padding-top: 30px; box-sizing: border-box; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항, 갤러리 배경색이 변화지 않습니다.
아무리 봐도 똑같이 입력하였는데 전, 공지사항 갤러리 배경색이 변하지 않습니다. 무엇이 잘못 입력 되었는지 확인해 주십시오. 그리고, 강의에 나오는 A타입, B타입, C타입만 반복해서 연습 후 할 수 있으면 다른 내용의 문제가 출제 되어도 합격 가능하겠습니까? 처음 보는 유형의 문제가 출제 되어 작업을 하지 못할까 봐 걱정이 됩니다.index.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-header.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <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> </header> <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> <div class="items"> <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"> <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/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> <div class="banner"> <a href="#none"> <img src="images/banner-01.jpg" alt="banner"> </a> </div> <div class="shortcut"> <a href="#none"> <img src="images/banner-02.jpg" alt="shortcut"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"> <img src="images/logo-footer.png" alt="footer-logo"> </a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>style.css@charset 'utf-8'; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; margin: auto; } header{ height: 100px; position: relative; z-index: 10; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{} .slide>div{ height: 300px; } .items{ overflow: hidden; } .items>div{ 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; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } .header-logo,.footer-logo{ line-height: 130px; } .copyright{ padding-top: 30px; text-align: center; } .sns{ line-height: 130px; text-align: center; } .slide{ position: relative; width: 1200px; height: 300px; overflow: hidden; margin-bottom: 10px; } .slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; } @keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 100%{top: 0;} } /* 네비게이션 */ .menu{ list-style: none; padding: 0; padding-top: 20px; } .menu li{ float: left; width: 25%; box-sizing: border-box; border: 1px solid black; text-align: center; } .menu li>a{ display: block; border: 1px solid black; padding: 5px; transition: 0.5s; } .menu li:hover>a{ background-color: #000; color: #fff; } .sub-menu{ background-color: #fff; border: 1px solid black; display: none; } .sub-menu a{ display: block; padding: 5px; } .sub-menu a:hover{ background-color: #000; columns: #fff; } /* tab menu */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ border: 1px solid black; display:inline-block; width: 100px; padding: 5px; text-align: center; margin-right: -8px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .btn a.active{ background-color: #fff; } .tabs{} .tab1{ border: 1px solid black; /* display: none; */ } .tab1 a{ display: block; padding: 5px; border-bottom: 1px solid black; padding: 0 15px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; border: 1px solid #000; height: 170px; text-align: center; padding-top: 20px; box-sizing: border-box; } .tab2 img{ width: 130px; }custom.js$('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) /*tab menu */ $('.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') })
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
폴더구조 제작관련
이미지와 같이 경로로 폴더를 오픈하라고 하는데 블라켓으로 바로 연결이 되더라구요.비주얼스튜디오코드로 작업을 할 예정인데 작업할 폴더만 생성하고(CSS, IMAGES, SCRIPT)이미지와 같은 과정을 생략한 채 비주얼스튜디오코드로 폴더열기하면 될까요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃 배치 관련
border로 배치하는 방법과 backgroud-color로 배치하는 방법 중 하나로 갈려고하는데추후 공지사항, 갤러리 탭, 슬라이드 등 작업하게 되었을 때둘 중 어느 게 작업하기 좋을까요?