질문 & 답변 - 인프런 | 커뮤니티

질문 게시판

고민있어요

스터디

팀 프로젝트

멘토링

멘토링 후기

수강평

With us

인프런 피드

블로그

인프런 소개

공지사항

대시보드

강의

홈

로드맵

더보기

묻고 답해요

141만명의 커뮤니티!! 함께 토론해봐요.

인프런 TOP Writers

미해결
웹디자인기능사 [2024년 합격 99%] 실기전체 A - F

궁금한 부분들 질문 드립니다.

선생님. 궁금한 점이 있어 글을 남기게 되었습니다.f유형 강의 업로드 시기가 어떻게 되는지 궁금합니다. 각 유형별 디자인 영상이 있던데 시험 합격과는 무관한 것이 맞나요~?그리고 이건 요청 사항인데요. 실습 자료로 실습을 하면 되긴 하겠지만, 유형별 문제 답안이 없어 공부하기 조금 불편한 부분이 있습니다. 답안도 같이 업로드 해주시면 감사 하겠습니다.니

sy4562 · 6개월 전 · 웹디자인기능사 [2024년 합격 99%] 실기전체 A - F

투표점수

0

조회수

187

답변

4
해결됨

웹디자인 기능사 필기 이미지 사이즈 용량

이게 왜 2번이 답인건지 찾아봐도 잘 안나와서요이미지 파일의 용량 = 총 화소수 x 픽셀당 비트화소수 = 가로 x 세로해서 1번이 맞지 않나요 ?

lba0507 · 2023.06.09

투표점수

0

조회수

413

답변

1
미해결
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

합격했습니다

오늘 드디어 3회차 실기 합격자 발표가 났어요! 결과는 합격입니다~ 다른거 신경쓰다 용량확인 안하고 제출하는 바람에 찜찜했는데... 열흘 전에는 혹시 용량초과로 실격일까 걱정했는데 합격 통지를 받고나니 점수가 왜 85점일까, 어디서 15점이나 깎였을까하는 생각이 드네요.. 사람 마음이 참...ㅎㅎ 그래도 선생님 덕분에 합격했습니다. 감사합니다. 다른 분들도 좋은 강의가 많겠지만 작년 가을에 이 시험 준비하면서 좋다는 강의 꽤 들어봤었는데 뭔가 복잡하고 기본 개념이나 그런건 알려주지 않으면서 시험은 그냥 외워서 보면 된다는 주입식 강의가 맘에 들지 않아 시간을 갖고 제대로 공부해보려고 올해로 미뤘거든요 그러다 인프런에 선생님 강의가 있는 것을 보고 작년에 유튜브에서 선생님 영상을 접하고 '이건 좀 다르네 찮은데~' 했던 기억이 나서 이 강의로 공부하고 합격까지 하게 됐습니다. 이제 다음 순서는 어떤 강의를 들으면 좋을까요?

mmsm미니 · 2021.09.17 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

2

조회수

545

답변

1
미해결
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

웹디자인기능사시험

선생님 안녕하세요!! 9/5일에 웹디자인기능사 실기시험에 프로그램은 Visual studio code 을 사용하려하는데 만약 라이브서버 기능이 안된다고 하면 작업하고 있는 화면을 어떻게 확인하면 되는지 알려주세요ㅜㅜ

rch0606 · 2021.09.01 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

564

답변

2
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

선생님 웹디자인 기능사 시험치고 왔는데요.....

선생님 웹디자인 기능사 시험치고 왔는데요, 12번 Vally Festival이 시험으로 나왔어요.... 슬라이드가 이미지만 바뀌면 안되고, 이미지가 좌에서 우 또는 우에서 좌로 이동하게 하라고 해서.....이렇게 코드를 넣었고요... /*slide*/ .slide{ position: relative; width:800px; height: 350px; overflow: hidden; } .slide > div{ width:2400px; font-size: 0;/*font-size: 0;해야 width:3600px;이 되어 이미지가 가로로 배치된다*/ position: absolute; top:0; left:0; animation: slide 8s 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는 제가 말줄임표를 태그가 기억이 안나서,,, 제가 임의로 짤랏고요... 그리고.... .modal-content에 transform: translate(-50%, -50%); 넣는걸 깜빡했어요.... 나머지는 잘 했는데,,,, 합격할 수 있을까요? 네비게이션 작동도 잘됬었고, 슬라이드도 잘됬는데 합격 할수 있을까요?

My own life · 2021.09.01 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

258

답변

1
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

B1 대한은행 공지사항 문제는 해결했는데, 네비게이션은 어떻게 해야 할 지 질문입니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>대한 은행</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="images/logo-header.png" alt="header logo"> </a> </div> <div class="navi"> <ul class="menu"> <li><a href="#">개인</a> <div class="sub-menu"> <a href="#">조회</a> <a href="#">이체</a> <a href="#">공과금</a> <a href="#">예금/신탁</a> </div> </li> <li><a href="#">기업</a> <div class="sub-menu"> <a href="#">조회</a> <a href="#">이체</a> <a href="#">전자결재</a> <a href="#">수표/어음</a> </div> </li> <li><a href="#">금융상품</a> <div class="sub-menu"> <a href="#">저축상품</a> <a href="#">대출상품</a> <a href="#">투자상품</a> </div> </li> <li><a href="#">카드</a> <div class="sub-menu"> <a href="#">카드 정보</a> <a href="#">카드 신청</a> <a href="#">이용내역조회</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#"> <img src="images/slide-01.jpg" alt="image slide1"> </a> <a href="#"> <img src="images/slide-02.jpg" alt="image slide2"> </a> <a href="#"> <img src="images/slide-03.jpg" alt="image slide3"> </a> </div> </div> <div class="items"> <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"> <ul> <li><a href="#none" class="open-modal"><em>「2021년 하반기 경제통계지표 해설 강좌 실시</em><b>2021.08.21</b></a></li> <li><a href="#none"><em>2021년 화폐사랑 UCC 공모전</em><b>2021.08.14</b></a></li> <li><a href="#none"><em>「2021년 상반기 경제통계지표 해설 강좌」 실시</em><b>2021.08.02</b></a></li> <li><a href="#none"><em>「2020년 하반기 경제통계지표 해설 강좌」 실시</em><b>2021.07.21</b></a></li> <li><a href="#none"><em>「2020년 상반기 경제통계지표 해설 강좌」 실시</em><b>2021.06.21</b></a></li> </ul> </div> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery image1"> </a> <a href="#none"> <img src="images/gallery-02.jpg" alt="gallery image2"> </a> <a href="#none"> <img src="images/gallery-03.jpg" alt="gallery image3"> </a> </div> </div> </div> </div> <div class="banner"> <a href="#"> <img src="images/banner.jpg" alt="banner"> </a> </div> <div class="shortcut"> <a href="#"> <img src="images/shortcut.jpg" alt="short cut"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="images/logo-footer.png" alt="footer logo"> </a> </div> <div class="footer-wrap"> <div class="footer-menu"> <ul> <li><a href="#">저작권 보호방침</a></li> <li><a href="#">개인정보 처리방침</a></li> <li><a href="#">이메일 무단수집거부</a></li> <li><a href="#">홈페이지 이용안내</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">관련 사이트</a></li> </ul> </div> <div class="copywirte"> Copyright(c) Bank of Hankok. All rights reserved. </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>「2021년 하반기 경제통계지표 해설 강좌」 실시</h2> <p> 1. 목 적 : 국민의 경제통계지표에 대한 이해 및 활용도 제고<br> 2. 실시기간 : 2021. 10. 13.(수) ~ 12. 10.(금)(토요일, 공휴일 제외)<br> 3. 대상기관 : 전국 소재 교육기관(대학 이상) 및 공공·금융·기타 기관<br> 4. 수강방법 : 대면강의*, 실시간 온라인강의*(zoom 강의 등 포함), VOD를 활용한 강의중 선택<br> * 수강기관 내 대면이 필요한 강의는 코로나19와 관련한 정부의 방역관리지침을 준수하여야 함<br> 5. 수강장소 : 수강기관 내 희망 장소(화상강의는 별도 장소)<br> 6. 주 제 : 주요 경제통계지표* 중 희망 분야를 수강기관 별 강의주제로 선정<br> * 주요 경제통계지표 전반, 통화금융, 자금순환표, 물가, 국민소득, 산업연관표, 국민대차대조표,<br> 국제수지표, 국제투자대조표, 경제심리지수, 기업경영분석지표<br> 7. 수강비용 : 없음<br> 8. 강의 신청방법 및 수강기관 선정<br> □ (신청방법) 신청서*에 강의 희망일시 등을 기재한 후 e-mail(est@bok.or.kr)또는 fax(02-759-4430) 송부<br> * 신청서 및 「경제통계지표 해설 강좌」 안내문은 (붙임 1) 및 (붙임 2) 참조<br> ㅇ 강의 신청기간 : 2021. 8. 20.(금) 13:00 ~ 9. 10.(금) 17:00<br> □ (기관 선정기준) 교육기관을 우선 고려하되, 지역 및 신청순서 등도 감안하여 선정(40개 기관 내외)<br> □ (선정기관 통보) 선정된 기관을 「경제통계시스템 홈페이지」(ecos.bok.or.kr) ‘공지사항’에 게시*하고<br> 신청 시 기입한 e-mail로도 통보<br> * 게시일 : 2021. 9. 16.(목) 17:00<br> 9. 문의처 : (02)759-5672, 5692 </p> <a href="#none" class="close-modal">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body{ color:222323; list-style: none; } a{ text-decoration: none; } .container{ width:1200px; border: 1px solid red; margin:0 auto; } header{ position: relative; z-index:10; } header > div{ height:100px; } .header-logo{ width:20%; float: left; line-height: 130px; } .navi{ width:60%; float: right; } .menu{ list-style: none; } .menu li{ width:25%; float: left; text-align: center; } .menu li a{ display: block; padding:10px; background: #0a4594; color:#fff; } .menu>li:hover>a{ background: #ababab; } .sub-menu{ display: none; } .sub-menu a:hover{ background: #ababab; } .slide{ position: relative; width:100%; height:300px; overflow: hidden; } .slide > div{ width:3600px; height:300px; border: 1px solid orangered; animation: slide 10s linear infinite; font-size: 0; } .sldie > div > a{ position: absolute; top:0; left:0; } @keyframes slide{ 0%{ margin-left:0; } 30%{ margin-left:0; } 35%{ margin-left:-1200px; } 65%{ margin-left:-1200px; } 70%{ margin-left:-2400px; } 95%{ margin-left:-2400px; } 100%{ margin-left:0; } } .items{ } .items > div{ height:200px; border: 1px solid greenyellow; box-sizing: border-box; float: left; } .news{ width:500px; } /* tab-inner */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ border: 1px solid #0a4594; 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: #0a4594; color:#fff; } .btn a.active{ background-color: #ababab; } .tabs{list-style: none;} .tab1{ border: 1px solid #0a4594; padding: 0 2px; height:170px; box-sizing: border-box; } .tab1 a{ display: inline-block; padding:0 5px; border-bottom: 1px solid #0a4594; box-sizing: border-box; } .tab1 a:last-child{ border-bottom: none; } .tab1>ul{ list-style: none; margin: auto; } .tab1>ul>li{ display: block; } .tab1>ul>li>a>em{ float: left; font-style: normal; } .tab1>ul>li>a>b{ float: right; font-style: normal; } .tab2{ display: none; border: 1px solid #0a4594; height: 169px; text-align: center; padding-top: 20px; box-sizing: border-box; } .tab2 img{ width:130px; } .banner{ width:350px; } .shortcut{ width:350px; } footer{} footer > div{ height:100px; border: 1px solid skyblue; box-sizing: border-box; float: left; } .footer-logo{ width:20%; line-height: 130px; } .footer-wrap{ width:80%; } .footer-wrap > div{ height: 50%; border: 1px solid skyblue; box-sizing: border-box; line-height: 50%; text-align: center; } .footer-menu ul{ list-style: none; text-decoration: none; } .footer-menu ul li{ float:left; padding:5px; } .footer-menu ul li a{ color:#0a4594; font-weight: bold; } .copywirte{ padding-top:20px; box-sizing: border-box; } /* Modal */ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 100; display: none; } .modal-content{ width:750px; background-color: #fff; top:50%; left:50%; position: absolute; transform: translate(-50%, -50%); padding:20px; border-radius: 10px; } .close-modal{ float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.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(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });

My own life · 2021.08.29 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

398

답변

2
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

A3 강원천문대 코드리뷰 부탁드립니다

A3 강원천문대 코드리뷰 부탁드립니다 나름대로 하기는 했는데..... 선생님이 보시고 뭔가 아쉽거나 잘못된거 있으면 지적 부탁드립니다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>강원 천문대</title> <link href="css/style.css" rel="stylesheet"> </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> <a href="#none">예약취소</a> </div> </li> <li><a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">방문후기</a> <a href="#none">자유게시판</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide images1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide images2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide images3"> </a> </div> </div> <div class="items"> <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 href="#none" class="open-modal"><em>제1회 별사진 공모전 개회됩니다.</em><b>2020.01.09</b></a> <a href="#none"><em>하계기간 야간 연장운영합니다.</em><b>2020.01.07</b></a> <a href="#none"><em>청소년 대상 천문교실 안내</em><b>2019.12.31</b></a> <a href="#none"><em>올앳 시스템 작업 안내</em><b>2019.12.20</b></a> <a href="#none"><em>강원천문대에서 연구원을 모집합니다.</em><b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery image1"> <img src="images/gallery-02.jpg" alt="gallery image2"> <img src="images/gallery-03.jpg" alt="gallery image3"> </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="info"> <div class="footer-menu"> <a href="#none">개인정보 처리방침</a> <a href="#none">영상정보처리기기 운영방침</a> <a href="#none">저작권정책</a> <a href="#none">RSS</a> <a href="#none">고객헌장오시는길</a> </div> <div class="copyright"> Copyright (C) Gangwon Astronomy and Space Science Institute. All Rights Reserved. </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>하늘과 바람과 별과 詩 사생대회</h2> <p> 윤동주 시인의 시집 <하늘과 바람과 별과 詩> 출간 72주년을 맞이하여 천문대에서 개최하는 사생대회가 열립니다. 별 하나에 추억, 사랑, 쓸쓸함, 동경 그리고 시와, 어머니를 그렸던 시인처럼 별같은 마음을 가진 분들은 참여해주세요. </p> <a href="#none" class="close-modal">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/script.js"></script> </body> </html> @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{ position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{width:20%; float:left;line-height: 130px;} .navi{ width:60%; float:right; } .menu{ text-align: center; background-color: #fff; list-style: none; text-decoration: none; } .menu li{ width:25%; height: 40px; line-height: 40px; float: left; box-sizing: border-box; } .menu li > a{ display: block; background-color:#0066ad; color:#fff; } .menu li:hover > a{ background-color:#0066ad; color:#fff; transition: 0.5s; } .sub-menu{ background-color: #fff; border: 1px solid #0066ad; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color:#ababab; color:#fff; } .slide{ position: relative; width:1200px; height:300px; overflow: hidden; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ font-size: 0; } .slide > div a{ position: absolute; top:0; left: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; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } .items{ overflow: hidden; } .items > div{ height: 200px; box-sizing: border-box; float: left; } .news{ width:500px; } .news .tab-inner{ width:95%; margin: auto; } .news .tab-inner .btn{} .btn a{ border: 1px solid #0066ad; display: inline-block; width:100px; text-align: center; color:#fff; background:#0066ad; padding: 5px; border-radius: 5px 5px 0 0 ; margin-right:-6px; margin-bottom: -1px; } .btn a.active{ background-color:#ababab; color:#fff; border: 1px solid #ababab; } .news .tab-inner .tabs{} .news .tab-inner .tabs > a{} .news .tab-inner .tabs > div{} .tab1 { border: 1px solid #0066ad; padding:0 10px; } .tab1 a{ display: block; padding:5px; border-bottom: 1px solid #0066ad; } .tab1 a:last-child{ border-bottom: none; } .tab1 a em{ font-style: normal; } .tab1 a b{ float: right; font-style: normal; } .tab2{ border: 1px solid #0066ad; height: 165px; padding-top: 20px; box-sizing: border-box; text-align: center; display: none; } .tab2 img{ width:130px; } .banner{ width:350px; } .shortcut{ width:350px; } footer{ width:100%; } footer > div{ height:100px; box-sizing: border-box; float: left; } .footer-logo{ width:300px; line-height: 130px; } .footer-logo img{ } .info{ width:900px; } .info > div{ height:50%; box-sizing: border-box; } .footer-menu{ text-align: center; line-height: 50px; } .copyright{ line-height: 50px; text-align: center; } .modal{ width:100%; height:100%; top:0; left:0; background: rgba(0, 0, 0, 0.466); position: absolute; z-index: 100; display: none; } .modal-content{ width:350px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal{ float:right; border: 1px solid #000; padding:5px 10px; } /* Nevigation */ $('.navi li').mouseenter(function(){ $(this).find('.sub-menu').stop().slideDown(500);}); $('.navi li').mouseleave(function(){ $(this).find('.sub-menu').stop().slideUp(500); }); /* 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(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).addClass('active') $(this).siblings().removeClass('active') }); /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });

My own life · 2021.08.29 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

516

답변

1
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

선생님!.open-modal을 눌러도 모달이 안열려요 그리고, btn에 background-color: #fff;해도 선이 사라지지 않네요

선생님!.open-modal을 눌러도 모달이 안열려요 그리고, btn에 background-color: #fff;해도 선이 사라지지 않네요 ㅠㅠ 제가 뭘 잘못한걸까요 <!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="left"> <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> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none" class="open-modal"><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="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery images1"> </a> <a href="#none"> <img src="images/gallery-02.jpg" alt="gallery images2"> </a> <a href="#none"> <img src="images/gallery-03.jpg" alt="gallery images3"> </a> </div> </div> </div> <div class="shortcut"> <a href="#none"> <img src="images/shortcut.jpg" alt="shortcut"> </a> </div> </div> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div> </footer> </div> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다.<br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다.<br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <a href="#none" class="close-modal">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; a{ color:#222328; list-style: none; text-decoration: none; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ position: relative; z-index: 10; } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ height: 350px; } .items{ overflow: hidden; } .items > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left: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; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; position: relative; } .menu li{ text-align: center; list-style: none; text-decoration: none; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color:#fff; } .sub-menu{ border: 1px solid #000; position: absolute; background-color: #000; width:100%; top:0; left:100%; height: 200px; display: none; /* */ } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color:#fff; } .sub-menu a:hover{ background-color: #000; color:#fff; } /* Tab Content */ .tab-inner, .gallery-inner{ width:95%; margin:0; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width:100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; box-sizing: border-box; } .tab-inner .tab{ padding:5px; } .tab-inner .tab, .gallery .tab{ border: 1px solid #000; height: 150px; box-sizing: border-box; } .tab-inner .tab a{ display: block; padding: 3px; border-bottom: 1px solid #333; overflow: hidden; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a em{ width:60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float:left; font-style: normal; } .tab-inner .tab a b{ width:30%; float: right; font-weight: normal; } .gallery .tab img{ width:85px; } .gallery-inner .tab{ text-align: center; padding-top: 20px; } /* Modal */ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 100; display: none; } .modal-content{ width:350px; background-color: #fff; top:50%; left:50%; position: absolute; transform: translate(-50%, -50%); padding:20px; border-radius: 10px; } .close-modal{ float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }); $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }); /* modal */ $('.open-modal').click(function(){ $('modal').fadeIn() }); $('.close-modal').click(function(){ $('modal').fadeOut() });

My own life · 2021.08.25 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

1.14k

답변

3
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

.menu나 .sub-menu에 hover하면 검정색배경에 흰색글씨로 바뀌어야 하는데 안되네요 코드에 어떤 문제가 있나요?

.menu나 .sub-menu에 hover하면 검정색배경에 흰색글씨로 바뀌어야 하는데 안되네요 코드에 어떤 문제가 있나요? <!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="left"> <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> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset 'utf-8'; *{ padding: 0; list-style: none; text-decoration: none; } a{ color:#222328; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ border: 1px solid red; width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ border: 1px solid green; height: 350px; } .items{ overflow: hidden; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left: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; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; } .menu li{ text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #fff; color:#000; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color:#000; }

My own life · 2021.08.23 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

471

답변

1
해결됨
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

menu에 hover하면 배경색이 검은색되고 글씨가 흰색이 되야하는데 안되요....sub-menu도요

menu에 hover하면 배경색이 검은색되고 글씨가 흰색이 되야하는데 안되요....sub-menu도요 코드에 어떤 문제가 있는걸까요? <!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="left"> <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> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset 'utf-8'; *{ padding: 0; list-style: none; text-decoration: none; } a{ color:#222328; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ border: 1px solid red; width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ border: 1px solid green; height: 350px; } .items{ overflow: hidden; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left: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; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; } .menu li{ text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #fff; color:#000; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color:#000; }

My own life · 2021.08.23 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

1.28k

답변

2
미해결

웹디자인기능사에서 Flex 관련 속성은 쓰면 안되나요?

이번에 강의에서 Flex에 대한 것을 배웠는데요, 기존에 웹디자인기능사 공부를 하면서 flex를 적용해보니 더 수월하더라고요, 그런데 이 Flex가 웹디자인기능사에서 사용해도 되는지 안되는지 찾아보니 어느 곳에서는 써도 된다고 하고 다른 곳에서는 쓰면 안된다고 하여 확실치 않아 인프런에 이렇게 질문드립니다. 혹시 웹디자인기능사에서 Flex 관련 속성은 쓰면 안되나요? 아니면 Flex 외에도 웹디자인기능사에서 사용하면 안되는 css 속성 등이 있을까요? 시험지들을 봐도 css 금지 속성은 보이지 않긴 하지만 css에서 flex를 써도 되는지 모르겠습니다.

김밥솥 (탈퇴) · 2021.07.26

투표점수

1

조회수

735

답변

1
미해결
쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

답변 부탁드립니다!

강사님! 공부하던 중에 자꾸 안되는게 있어서 질문 남깁니다ㅠㅠ 주메뉴 밑에 서브메뉴를 위치 시키려고 하는데 이럴 때 주메뉴에 position: relative를 주고 서브메뉴에 absolute를 주고 top, left 값을 주면 주메뉴를 기준점으로 두고 서브메뉴가 top, left 값 만큼 움직여야 하는걸로 알고 있었는데, relative를 준 주메뉴를 기준점으로 두는게 아니라 윈도우 맨 왼쪽상단을 기준점으로 서브메뉴가 움직입니다ㅠㅠㅠ 어떻게 수정하는게 좋을까요?

kw_2685 · 2021.06.15 · 쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

투표점수

1

조회수

326

답변

1
미해결
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

웹디자인기능사 실기 요구사항 질문

요구사항중에 웹페이지를 제작 후 5mb 용량이 초과되면 실격처리가 된다고 하셨는데, 제작한 index.html의 용량을 뜻하는건가요? 아니면 index.html을 포함한 만든 이미지파일, 스크립트파일,css파일 전부 합쳐서 5mb를 넘으면 안되는건가요~?

ohl0226 · 2021.04.13 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

535

답변

1
미해결
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

웹디자인기능사 공개문제 질문

웹디자인기능사 실기 공개문제를 읽어보다가 궁금한 점이 생겨서 질문드립니다 폴더에 제공된 로고를 포토샵을 통해 컬러를 변경해서 넣어야 하는건 이해가 되는데요, 가로세로 비율을 유지해야한다는 내용이 이해가 잘 안가서요..! 200x40 크기로 만들면 안되는건가요..?

ohl0226 · 2021.04.12 · [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

투표점수

1

조회수

1.1k

답변

1

인기 태그

주간 인기글