월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="navi"></div> </header> <div class="slide"> <a href="#"><img src="images/img1.png" alt="img1"></a> <a href="#"><img src="images/img2.png" alt="img2"></a> <a href="#"><img src="images/img3.png" alt="img3"></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#"><img src="images/shortcut.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="copy"> <span>COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</span> </div> <div class="sns"> <a href="#"><img src="images/sns1.jpg" alt="sns1"></a> <a href="#"><img src="images/sns2.jpg" alt="sns2"></a> <a href="#"><img src="images/sns3.jpg" alt="sns3"></a> </div> </footer> </div> </body> </html>@charset "utf-8"; .container{ width: 1200px; margin: auto; border: 1px solid red; } header{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ height: 300px; position: relative; overflow: hidden; } .slide>div{ font-size: 0; position: absolute; 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;} 100% {top: 0;} } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; width: 400px; box-sizing: border-box; } .news{} .banner{} .shortcut{} footer{ overflow: hidden; } footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copy{ width: 800px; line-height: 100px; text-align: center; } .sns{ width: 200px; line-height: 140px; text-align: center; }그리고 푸터 부분에텍스트는 line-height할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드
슬라이드가 되지 않습니다 ㅠ 어디부분이 잘못되었는지 확인부탁드립니다!<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="nav"></div></header><div class="slide"><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div><div class="items"><div class="news"></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy">서울특별시 동대문구 장안벚꽃로 279 한국산업인력공단 서울지역본부<br> 전화번호: 1644-8000 동대문구 휘경동 전동중학교 건너편. </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js "></script> <script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; border: 1px solid red;}header{ height: 100px;}header>div{ height: 100px; }.header-logo{ width: 200px; line-height: 130px; float: left;}.nav{ width: 800px; border: 1px solid wheat; float: right;}.slide{ position: relative; width: 1200px; height: 300px;}.slide>div{ position: absolute; 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; } 100% { top: 0; }}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; border: 1px solid darkmagenta; box-sizing: border-box;}.news{ width: 400px; border: 1px solid darkorange;}.banner{ width: 400px; }.shortcut{ width: 400px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.footer-logo{ width: 200px; padding-top: 28px;}.copy{ width: 800px; text-align: center; padding-top: 29px;}.sns{ width: 200px; line-height: 140px; padding-left: 11px;}
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.sub-menu를 ABC형의 위치에 놓고 CSS를 작성했습니다.
잘 실행되는데요.이렇게 작성해도 될까요?<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <title>최종본 - D3</title> <link rel="stylesheet" href="css/style.css"></head><body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header logo"></a> </div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUBMENU-1-1</a> <a href="#none">SUBMENU-1-2</a> <a href="#none">SUBMENU-1-3</a> <a href="#none">SUBMENU-1-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUBMENU-2-1</a> <a href="#none">SUBMENU-2-2</a> <a href="#none">SUBMENU-2-3</a> <a href="#none">SUBMENU-2-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUBMENU-3-1</a> <a href="#none">SUBMENU-3-2</a> <a href="#none">SUBMENU-3-3</a> <a href="#none">SUBMENU-3-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUBMENU-4-1</a> <a href="#none">SUBMENU-4-2</a> <a href="#none">SUBMENU-4-3</a> <a href="#none">SUBMENU-4-4</a> </div> </li> <div class="sub-back"></div> </ul> <!-- Navigation --> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none1"><img src="images/slide-d-01.jpg" alt="slide1"></a> <a href="#none2"><img src="images/slide-d-02.jpg" alt="slide2"></a> <a href="#none3"><img src="images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut thumnail"> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 한일외국어학원이 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut icon"></a> </div> <div class="news-gallery"> <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 class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인 <b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법 <b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우 <b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.png" alt="gallery1"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-02.png" alt="gallery2"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-03.png" alt="gallery3"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-04.png" alt="gallery4"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-05.png" alt="gallery5"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-06.png" alt="gallery6"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-07.png" alt="gallery7"> <span>Gallery title Text</span> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개</a> <a href="#none">제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <!-- Modal --> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <!-- Modal --> <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: #fff; color: #333;}a { text-decoration: none; color: inherit;}/* Entire Layout */.container {}.main-content { display: flex;}.main-content > div {}.left { width: 200px;}.right { flex: 1;}/* Header */header {}header > div {}.header-logo { height: 100px; padding-top: 10px; box-sizing: border-box;}.navi { height: 150px;}/* Navigation */.menu{ width: 90%; margin: 0 auto; margin-top: 10px; padding: 0; position: relative; } .menu li{ text-align: center; box-sizing: border-box; position: relative; } .menu li> a{ display: block; border: 1px solid black; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.5); color: #fff; } .sub-menu{ width: 1000px; height: 35px; position: absolute; top:0; left: 100%; display: none; z-index: 100; } .sub-menu a{ float: left; width: 150px; color: #fff; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } .sub-back{ width: calc(100vw - 190px); height: 135px; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 100%; top: 0; z-index: 90 ; display: none; }/* spot-menu */.spot-menu { text-align: center;}.spot-menu a:after { content: '|'; margin-left: 5px;}.spot-menu a:last-child:after { display: none;}.spot-menu a:hover { text-decoration: underline;} /* Slide */.slide { height: 400px; position: relative;}.slide > div {}.slide-image { height: 400px;}.slide-image-inner { height: inherit;}.slide-image-inner a { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; height: inherit; width: 100%;}.slide-image-inner a:nth-child(1) { animation-delay: 0s;}.slide-image-inner a:nth-child(2) { animation-delay: 3.5s;}.slide-image-inner a:nth-child(3) { animation-delay: 7s;}.slide-image-inner a img { width: inherit; height: inherit; object-fit: cover;}@keyframes slide { 0% { opacity: 0; } 5% { visibility: visible; /* 0% 구간에 visibility: hidden 상태를 보이는 상태로 전환 */ opacity: 1; } 35% { opacity: 1; } 40% { visibility: hidden; /* 보이는 구간이 끝났으니까 투명도 0과 함께 실제로도 보이지 않는 상태로 전환 */ opacity: 0; } 100% { opacity: 0; }}.slide-banner { position: absolute; top: 0; right: 0;}.slide-banner img { width: 150px; display: block;}/* Shortcut */.shortcut { height: 200px; display: flex; align-items: center; margin: 0 15px; gap: 25px; }/* News & Gallery */.items {}.items > div {}/* News & Gallery */.news-gallery { /* border: 1px solid green; */ height: 250px;}.tab-inner { width: 95%; margin: auto; margin-top: 25px;}.btn {}.btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd;}.btn a.active { background-color: #fff;}.tabs {}.tab1 { border: 1px solid #000; padding: 0 15px;}.tab1 a { display: block; padding: 5px; border-bottom: 1px dashed #bbb;}.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;}/* ▼ D유형과 E유형 공개도면에 따라 약간의 수정 */.tab2 a { display: inline-block; text-align: center; margin: 0 15px;}.tab2 a img { height: 120px; border-radius: 5px;}.tab2 a span { display: block;}/* Footer */footer { display: flex;}footer > div { height: 120px;}.footer-logo { width: 200px; padding-top: 20px; box-sizing: border-box; /* display: flex; align-items: center; */}.footer-content { flex: 1;}.footer-content div { height: 60px; box-sizing: border-box; /* display: flex; align-items: center; */}.footer-link { padding-top: 30px;}.copyright { padding-top: 10px;}.footer-link a { color: royalblue;}.footer-link a:after { content: '|'; color: #ccc; margin: 0 5px;}.footer-link a:last-child:after { display: none;}.footer-link a:hover { text-decoration: underline;}/* Modal */.modal { background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none;}.modal-content { width: 450px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);}.close-modal { float: right; border: 1px solid #000; padding: 5px 10px;}/* 이건 하면 좋고 안해도 괜찮습니다. */.modal-content h2 { text-align: center; background-color: yellowgreen; color: #fff; padding: 7px;}.modal-content ol { padding-left: 18px; font-size: 14px; font-weight: 500;}/* Navigation */// $('.menu li').mouseenter(function(){// $('.sub-menu, .sub-back').stop().slideDown()// })// $('.menu').mouseleave(function(){// $('.sub-menu, .sub-back').stop().slideUp()// })$('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().fadeIn()})$('.menu').mouseleave(function(){ $('.sub-menu, .sub-back').stop().fadeOut()})/* 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')})/* Modal */$('.open-modal').click(function(){ $('.modal').fadeIn()})$('.close-modal').click(function(){ $('.modal').fadeOut()})
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
style.css 작성시 문의사항이 있습니다.
이번 강의에서도 그렇고 앞 강의에서도 style.css 작성시.left{}.right{}header{}.header-logo{}.navi{} .slide{}.slide>div{} .items{}.intems>div{}이런식으로 하셨는데 전,header{}.header-logo{}.navi{}부분이 .left{} 안에 있어 .left{} 바로 아래에 작성하고 right에 들어 가는 부분은 .right{} 바로 아래에 작성하고 싶은데 그렇게 해도 상관은 없지 않습니까?
- 미해결[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 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.