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

폰트 패밀리 지정 안하는게 맞는거죠? 구글이랑 익스플로러의 폰트가 다르게 표시되서 맑은 고딕으로 지정하려다가 강의에 없던 내용이라  body {margin:0;             font-size:15px;             background-color:#fff;            color:#333333;  } 이렇게 배운대로만 코딩했어요. 준수사항에서 <제작된 사이트 메인페이지의 레이아웃, 구성요소의 크기 및 위치  등은 최신버전의 익스플로러와 구글 크롬에서 동일하게 표시되어야 한다> 라고 되어 있어서 폰트 패밀리는 지정 안했습니다..이게 신경쓰여요 ㅎ 빠른 답변 부탁드려요~^^

선생님 안녕하세요 강의에서  box 클래스안에 <div><div> <div><div> <div><div> 여기다가  box-sizing:border-box; 를 넣어주면 div의 border:width부분이 서로 겹치게 되는건가요? 그렇게 이해하면 될까요?

안녕하세요. 오늘 시험을 보고 왔습니다. 세로 슬라이드 2번째 유형(서브메뉴가 옆에 나타나는 유형)과 좌우 슬라이드가 나왔는데, 시험  전에 주의사항 설명하면서 "슬라이드가 좌 또는 우 방향 중 한 방향으로만 움직여야 한다"라고 하시더라고요. 이미지가 끝까지 넘어가고 다음 이미지가 보이는 형식?을 말하신 것 같아요. 저는 시험 도중 제이쿼리 방식으로 슬라이드를 구현했는데, 감독관님께서 그거 보시더니 "슬라이드가 한쪽방향으로만 움직여야 한다"고 말씀하셨어요 ㅜㅜ CSS애니메이션을 이용한 방식도 그렇고, 제이쿼리 방식도 그렇고 강의에서 설명한 방법들은 다 양쪽으로 움직이던데.. 한쪽으로 움직이게 하려면 어떻게 해야하나요.. ---------------------- 추가 질문) 서브메뉴에 마우스 올리면(hover) 나타나는 효과 중에 배경색, 글자색 변경과 함께 글자 굵게 처리를 해줬는데 font-weight:bold; 만 적용되고, 서브메뉴의 배경색이랑 글자색은 안바뀌더라고요. 이건 또 어떤부분인지 아시나요?

안녕하세요.  위의 다른 강의로 html과 css로 만든걸로 하니까 좀 다른것 같아서요.  해당 강의 부분의 html과 css 파일을 올려주시면 감사하겠습니다.

페이드인/아웃 슬라이드 효과가 동작하지 않는데 틀린부분을 모르겠습니다.

안녕하세요. 다른 건 다 해결됐는데, 갤러리 버튼 부분이 사진처럼 가운데 정렬 되어있어요.. 코드 확인해주실 수 있을까요? (+ .btn span 에 속성을 주는 것이 아닌 .btn에다 display를 제외한 css 속성을 똑같이 주면 정렬은 잘 맞춰지는 대신 margin-bottom:-1px과 background-color를 줘도 공지사항/갤러리 버튼 밑에 선이 가려지지 않고 나타나는데 이건 또 왜그런가요?)

똑같이 따라했는데도 자꾸 안떠요ㅠ 어떻게 해야할까요  <div class="container">         <div class="header-inner">             <header>                 <div class="header-logo"></div>                 <div class="navi"></div>             </header>         </div>         <div class="content-inner">             <div class="slide">                 <div></div>             </div>             <div class="items">                 <div class="news"></div>                 <div class="gallery"></div>                 <div class="banner"></div>             </div>         </div>         <div class="footer-inner">             <footer>                 <div class="copyright">                     <div></div>                     <div></div>                 <div class="family-site"></div>                 </div>             </footer>         </div>     </div> @charset 'utf-8'; body {     margin: 0;     background-color: #fff;     color: #222328;     font-size: 15px; } a {     color: #222328;     text-decoration: none; } .container {} .header-inner {     border: 1px solid black;     background-color: #eee; } header {     height: 100px;     width: 1200px;     margin: auto; } header > div {     height: 100px; } .header-logo {     background-color: #333;     width: 200px;     float: left; } .navi {     background-color: #333;     width: 600px;     float: right; } .content-inner {} .slide {     width: 1200px;     margin: auto;     height: 300px;     background-color: #ccc; } .slide > div {} .items {     width: 1200px;     margin: auto; } .items > div {     height: 200px;     float: left; } .news {     width: 500px;     background-color: #bbb; } .gallery {     width: 350px;     background-color: #666; } .banner {     width: 350px;     background-color: #888; } .footer-inner {     background-color: #eee;     clear: both; } footer {     width: 1200px;     margin: auto;     overflow: hidden;      } footer > div {     height: 100px;     float: left; } .copyright {     width: 1000px;     background-color: #777; } .copyright div { /*    border: 1px solid #fff;*/     height: 50px; } .family-site {     width: 200px;     background-color: #000;   }

공개된 실기시험문제 종류중에 모달레이어팝업과 레이어팝업이 있는데PDF이미지도 명암이 달라서 질문합니다. 다른거 손댈필요없이 CSS .modal 에서 배경색만 빼주면 될까요?? 그리고 CSS link건 다음 type="text/css"  꼭 넣어줘야 하는지 궁금합니다.

블라켓츠에서 바탕화면 어둡게 변경은 어떻게 해야되나요?

다음과 같이 에러가 생기는데 괜찮은 건지 확인부탁드립니다. <style.css> 소스입니다. @charset 'utf-8'; body{     margin:0;     background-color: #fff;     color:#222328;     font-size:15px; } a{     color:#222328;     text-decoration: none; } .container{     width:1000px; } .container > div{     float:left;     box-sizing: border-box; } .left{     width:200px;      } header{     position:relative;     z-index:10; } header > div {      } .header-logo{     height:100px;     line-height: 130px;         } .navi{     height:450px;      } .right{     width:800px; } .right > div{      } .slide{    } .slide > div{       height:350px; } .items{     overflow:hidden; } .items > div{     border:1px solid pink;     height:200px;     float:left;     box-sizing: border-box;     } .content{     width:300px; } .gallery{     width: 300px; } .banner{     width: 200px; } footer{} footer > div{     float:left;      box-sizing: border-box;     height:100px;      } .copyright{     width:600px;     text-align: center;     padding-top:40px;      } .footer-inner{     width:200px;      } .footer-inner div {     height: 50px;     box-sizing: border-box;     text-align: center; } .footer-inner div:nth-child(1){     padding-top: 10px;      } .footer-inner div:nth-child(2){     padding-top: 5px; } /* Nabigation */ .menu{     padding:0;     list-style: none;     position:relative;     width:90%;     margin: auto;     text-align: center;     /*왼쪽여백 줘야하는데...margin:auto; */     /*메뉴 밑 부분에 여백이 없어야하는데 */ } .menu li{     box-sizing: border-box; } .menu li > a{     display:block;     padding:10px;         border:1px solid black; } .menu li:hover > a{     background-color: #000;     color:#fff; } .submenu{     border:1px solid black;     margin: auto;     display:none;     position:absolute;     top:0;     left:100%;     width:100%;     height:200px;     background-color: #fff; } /*넓어야되는데 padding:5px;*/ .submenu > a {     display:block;         background-color: #fff;     padding:5px; } .submenu > a:hover{     background-color: #000;     color:#fff; }  /* slide */     .slide{     position:relative; } .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;} } /* 공지사항 & gallery */ .tab-inner{     width:97%;     margin:auto; } .btn{} .btn span{     border:1px solid pink;     display:inline-block;     width:100px;     text-align: center;     border-radius:5px 5px 0 0;     border-bottom:none;     margin-bottom: -1px;     background-color: #fff; } .tab1{     border:1px solid black;     padding-bottom: 10px; } .tab2 {     border:1px solid black;     padding-bottom: 40px;        } .tab1 a{     display:block;     border-bottom: 1px solid black;      } .tab1 a:last-child{     border-bottom: none; } .tab1 a em {     font-style: normal; } .tab1 a b{     float:right;     font-weight:normal; } .tab2{} .tab2 a{     display:inline-block; } .tab2 a img{     width:90px;     padding-top:40px;     text-align: center;      } /* Modal */ .modal{     position:absolute;     width:100%;     height:100%;     left:0;     top:0;     background-color: rgba(0, 0, 0, 0.42);     display:none; } .modal-content{     position:absolute;     left:50%;     top:50%;     width:400px;     height:450px;     transform:translate(-50%,-50%);     background-color: #fff;     border-radius:10px;     padding:20px;      } .modal-content h2{     background-color: #000;     color:#fff;     text-align: center;     font-weight:normal;     padding:5px 10px; } .modal-content p{} .close-modal{     float:right;     border:1px solid black;     width:60px;     height:30px;     text-align: center;     padding:5px 10px;     font-size:13px; }

사진에 보이는것처럼 위쪽에 마진이 남아요ㅠ 왜 이런걸까요 <div class="container">     <header>         <div class="header-logo">             <a href="#none"><img src="images/logo-a1-header.png" alt="header logo"></a>         </div>         <div class="navi">             <div class="tab-inner"></div>         </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>         <div class="banner">             <a href="#none"><img src="images/banner-a1-01.jpg" alt="banner"></a>         </div>         <div class="shortcut">             <a href="#none"><img src="images/banne-a1-02.jpg" alt="shortcut"></a>         </div>     </div>     <footer>         <div class="footer-logo">             <a href="#none"><img src="images/logo-a1-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> @charset 'utf-8'; .container {     border: 1px solid #000;     width: 1200px;     margin: auto;  } header {     height: 100px; } header > div {     height: 100px; } .header-logo { /*    background-color: #bbb;*/     width: 200px;     float: left; } .navi {     background-color: #ccc;     width: 600px;     float: right; } .slide {     height: 300px; } .slide > div {     height: 300px; /*    background-color: #ccc;*/ } .items {} .items > div {     height: 200px;     float: left; } .news {     width: 500px;     background-color: gray; } .banner {     width: 350px;     background-color: #333; } .shortcut {     width: 350px;     background-color: gray; } footer {     height: 100px;     clear: both; } footer > div {     height: 100px;     float: left; } .footer-logo {     width: 200px; /*    background-color: #444;*/ } .copyright {     width: 750px; /*    background-color: #ccc;*/ } .sns {     width: 250px; /*    background-color: #555;*/ } /* 이미지랑 텍스트 */ .header-logo, .footer-logo {     margin-top: 30px;  } .copyright {     text-align: center;     margin-top: 30px; } .sns {     line-height: 130px;     text-align: center;; } /* 슬라이드 */ .slide {     position: relative;     width: 1200px;     height: 300px;     overflow: hidden;      } .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;     }     60% {         top: -300px;     }     70% {         top: -600px;     }     95% {         top: -600px;     }     100% {         top: 0;     } }

말줄임표 때문에 a를 em이랑 b로 나눴는데 갑자기 border-bottom이 이렇게 뭉쳐서 뜨네요ㅠㅠ

수험장에서는 크로스브라우징을 수험자 자리에서 못하고 감독관 자리에서 같이 확인해야 하죠~? 

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

안녕하세요 폰트사이즈 0 CSS 적용이 안되는 이유는 무엇인가요?? @charset 'utf-8'; body {     margin: 0;     font-size: 12px;     color: #222;     line-height: 1.6em;     background-color: #fff; } a {     text-decoration: none;     color: #222; } .container {     border: 1px solid red;     width: 1200px;     margin: auto; } header {     /*overflow: hidden;*/     height: 100px;     position: relative;     width: 1200px; } header > div {     border: 1px solid blue;     height: 100px; } .header-logo {     width: 200px;     float: left; } .navi {     width: 600px;     float: right; } .slide {} .slide > div {     border: 1px solid green; } .items {     overflow: hidden; } .items > div {     border: 1px solid pink;     height: 200px;     float: left;     box-sizing: border-box; } .news {     width: 400px; } .gallery {     width: 400px; } .shortcut {     width: 400px; } footer {     overflow: hidden; } footer > div {     border: 1px solid blue;     height: 100px;     float: left;     box-sizing: border-box; } .family-site {     width: 200px; } .copyright {     width: 1000px; } .copyright div {     border: 1px solid green;     height: 50px; } /*탭콘텐츠*/ .tab-inner, .gallery-inner{     width: 95%;     margin: auto; } .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;     background-color: #fff;     margin-bottom: -1px;    }   .tab-inner .tabs, .gallery-inner .tabs{     border: 1px solid #000;     padding: 0 5px;     height: 150px; } .tab-inner .tabs a{     display: block;     padding: 2px;     border-bottom: 1px solid #333;  } .tab-inner .tabs a:last-child{     border-bottom: none;           } .tab-inner .tabs a b{     float: right;     font-weight: normal; } .gallery .tabs {     text-align: center;     padding-top: 20px;     box-sizing: border-box; } .gallery .tabs img{     width: 110px; } /*네비*/ .menu{     list-style: none;     padding: 0;     margin-top: 50px;      } .menu li{     width: 25%;     float:left;     text-align: center;     box-sizing: border-box;     } .menu li > a  {     border: 1px solid #000;     display: block;     padding: 5px;     background-color: #fff;     transition: 0.5s;     color: #000;      } .menu li:hover > a{     background-color: #000;     color: #fff; } .sub-menu{     display: none; } .sub-menu a{     display: block;     padding: 5px;     transition: 0.5s;     color: #fff;     background-color: #000; } .sub-menu a:hover{     background-color: #fff;     color: #000; } .sub-back {     background-color: #000;     height: 150px;     width: 1200px;     position: absolute;     right: 0;     top: 100%;     z-index: -1;     display: none; } /*세로 슬라이드*/ .slide{     position: relative;     width: 1200px;     height: 300px;      } .slide div{     border: 5px solid red;     position: absolute;     font-size: 0;     top: 0;     left: 0; } @keyframes slide {     0%{}     30%{}     35%{}     65%{}     70%{}     95%{}     100%{} }

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

혹시 시험장에 인터넷이 안되는걸로 알고있는데 체크가 가능할까요??

이미지가 없어서 못하고있는데 이미지는 어디서 다운받을수 있을까요?ㅠ

유의사항을 보면 Javascript(jQuery), CSS 중 하나 이상의 방법을 이용하여 제작하라고 되어 있는데 제이쿼리 안 쓰고 이전 강의들에서 가르쳐주신 것처럼 CSS만 사용해서 만들어도 괜찮은 거 맞나용?? 둘 중 어느 방식이 더 좋은지 궁금합니다.

삭제된 글입니다