HTML5 & CSS3 : 웹디자인기능사 실기 기출문제 풀이

ㆍStudy/HTML5 & CSS3

2022.11.09.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 39



Review


오늘 처음으로 웹디자인기능사 실기문제를 풀이했다.
교보문고에 가서 책으로는 본 적이 있지만 실제로 파일을 다운받아 풀이해보진 않았는데,

선생님께서 웹디자인기능사 실기 시험을 볼 때 어떻게 해야하는지 알려주셨다.

총 4시간이 주어지는 시험이고 결코 만만치 않은 시험이라는 것을 알게되었다.

코드를 달달 외우기보다는 전체 구조를 이해하고 조금씩 풀어나가는 것이 멀리 봤을 때

더 현명할 것 같다는 생각이 든다.

 

내년 1월부터 필기 원서접수가 시작되고 3월에 실기시험이 있어서 아직 준비 시간은 조금

있으니 차근차근 준비해봐야겠다.

 

파이팅 - !

 


 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 39


<웹디자인기능사 시험 기출문제 풀이 : A-1>

 

 

 

http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204 

 

공개문제 자료실 상세 | Q-net

BODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } LI { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } 소프트웨어 목록 소프트웨어 규격 비고

www.q-net.or.kr

 

[22년_공개]웹디자인기능사.zip
2.46MB

 

우선 문제 파일은 위의 링크로 접속하면 다운 받을 수 있다.

혹시 다운이 안되는 분이 계살지 몰라 파일을 공유한다 -

 

압축을 풀어보면 문제 파일이 들어있다.

 

 

 

여기서 맨 처음 문제인 A-1 부터 열어 확인했다. 

 

 



- HTML

<!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">
    <link rel="stylesheet" href="../1109/01style.css">
    <title>웹디자인기능사A-1</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo">
                <img src="../1109/웹디자인 공개문제자료/01A-1/images/logo.jpg" alt="logo">
            </div>
            <div class="gnb">
                <ul>
                    <li><a href="#">탑</a>
                        <ul class="subs">
                            <li><a href="#">블라우스</a></li>
                            <li><a href="#">티셔츠</a></li>
                            <li><a href="#">셔츠</a></li>
                            <li><a href="#">니트</a></li>
                        </ul>
                    </li>
                    <li><a href="#">아우터</a>
                        <ul class="subs">
                            <li><a href="#">자켓</a></li>
                            <li><a href="#">코트</a></li>
                            <li><a href="#">가디건</a></li>
                            <li><a href="#">머플러</a></li>
                        </ul>
                    </li>
                    <li><a href="#">팬츠</a>
                        <ul class="subs">
                            <li><a href="#">청바지</a></li>
                            <li><a href="#">짧은바지</a></li>
                            <li><a href="#">긴바지</a></li>
                            <li><a href="#">레깅스</a></li>
                        </ul>
                    </li>
                    <li><a href="#">악세서리</a>
                        <ul class="subs">
                            <li><a href="#">귀걸이</a></li>
                            <li><a href="#">목걸이</a></li>
                            <li><a href="#">반지</a></li>
                            <li><a href="#">팔찌</a></li>
                        </ul>
                    </li>
                </ul>
            </div>    
        </header> 
        <section>
            <div class="slide">
                <img src="../1109/웹디자인 공개문제자료/01A-1/Slide/매장전경.jpg" alt="">
            </div>
            <div class="contents">
                <div class="left">
                    <input type="radio" name="board" id="notice" checked>
                    <input type="radio" name="board" id="gallery">
                    <ul class="btntitle">
                        <li><label for="notice">공지사항</label></li>
                        <li><label for="gallery">갤러리</label></li>
                    </ul>
                    <ul class="con">
                        <li class="first">
                            <table>
                                <tr>
                                    <td><a href="#popup">애스크로 서비스 변경 약관을 확인하세요</a></td>
                                    <td>2019-10-10</td>
                                </tr>
                                <tr>
                                    <td><a href="#">배송 택배사 변경 및 배송방식 변경에 따른 공지</a></td>
                                    <td>2019-09-27</td>
                                </tr>
                                <tr>
                                    <td><a href="#">여름 이월상품 정리 세일 안내</a></td>
                                    <td>2019-09-07</td>
                                </tr>
                                <tr>
                                    <td><a href="#">여름 바캉스 상품 정리 세일 안내</a></td>
                                    <td>2019-08-24</td>
                                </tr>
                                <tr>
                                    <td><a href="#">반품 및 교환 조건 변경 공지</a></td>
                                    <td>2019-07-27</td>
                                </tr>
                                <tr>
                                    <td><a href="#">상품별 사이즈표 보는 방법과 치수 공지</a></td>
                                    <td>2019-05-25</td>
                                </tr>
                            </table>
                        </li>
                        <li class="second">
                            <ul>
                                <li><img src="../1109/웹디자인 공개문제자료/01A-1/Contents/갤러리/gallery01.gif" alt=""></li>
                                <li><img src="../1109/웹디자인 공개문제자료/01A-1/Contents/갤러리/gallery02.gif" alt=""></li>
                                <li><img src="../1109/웹디자인 공개문제자료/01A-1/Contents/갤러리/gallery03.gif" alt=""></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="center">
                    <img src="../1109/웹디자인 공개문제자료/01A-1/Contents/배너/credit-card.png" alt="">
                </div>
                <div class="right">
                    <img src="../1109/웹디자인 공개문제자료/01A-1/Contents/바로가기/credit-card02.png" alt="">
                    <img src="../1109/웹디자인 공개문제자료/01A-1/Contents/바로가기/store.png" alt="">
                    <img src="../1109/웹디자인 공개문제자료/01A-1/Contents/바로가기/cart.png" alt="">
                </div>
                <div id="popup">
                    <div class="pop">
                        <p>
                            <b>제목 : 애스크로 서비스 변경 약관을 확인하세요. <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;안녕하십니까? 고객님.</b>
                            <br><br>
                            저희 저스트 쇼핑몰을 이용해 주셔서 언제나 감사합니다.<br><br>
                            본사에서 계약을 맺고 있는 하나은행 애스크로 서비스의 이용약관에 <br>변경이 있어서 공지하여 드립니다. <br><br> 
                            변경사항이 광고수신 및 개인정보 수집에 관한 변경사항이라 본사와<br>는 관련이 없으나 결제시 고객님의 정보가 수집되는 부분이라하니
                            <br>약관 변경에 관한 사항을 확인하시기 바랍니다.
                            <br><br>
                            언제나 특색있고 멋진 상품으로 찾아뵙겠습니다.
                            <br><br>
                            감사합니다. </p><br><br>
                            <a href="#">닫기</a>
                    </div>
                </div>
            </div>
        </section>      
    </div> 
</body>
</html>






- CSS

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Arial, 돋움, Doctum, sans-serif;
}
#wrapper {
    width: 1200px;
    margin: 30px auto;
}
header {
    display: flex;
    justify-content: space-between;
    height: 100px;
}
.gnb {
    position: relative;
    width: 800px;
}
.gnb > ul {
    display: flex;
    justify-content: end;
}
.gnb > ul > li {
    position: relative;
    width: 25%;
}
.gnb > ul > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    box-sizing: border-box;
}
.gnb > ul > li:last-child > a {
    border-right: 1px solid #333;
}
.gnb li ul {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 1s;
    box-sizing: border-box;
}
.gnb li ul li a {
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.gnb ul > li:hover > a {
    background: #333;
    color: #fff;
}
.gnb ul:hover ul {
    height: 120px;
    border-bottom: 1px solid #333;
}
.gnb > ul > li:first-child ul {
    border-left: 1px solid #333;
}
.gnb > ul > li:last-child ul {
    border-right: 1px solid #333;
}
.slide {
    width: 100%;
    height: 300px;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
.contents {
    display: flex;
    width: 1200px;
    margin: 30px auto;
}
.contents > div {
    width: 33.333%;
}
.contents .left input[type="radio"] {
    display: none;
}
.contents .left .btntitle {
    position: absolute;
    display: flex;
    z-index: 1;
}
.contents .left .btntitle li {
    width: 100px;
    border: 1px solid #333;
    text-align: center;
    line-height: 40px;
}
.contents .left .btntitle li:first-child {
    margin-left: 10px;
}
.contents .left .btntitle li label {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#notice:checked ~ .btntitle li:first-child {
    background: #fff;
    border-bottom: none;
    border-right: none;
}
#notice:checked ~ .con .second {
    display: none;
}
#gallery:checked ~ .con .first {
    display: none;
}
#notice:checked ~ .btntitle li:last-child {
    background: #ccc;
}
#gallery:checked ~ .btntitle li:first-child {
    background: #ccc;
}
#gallery:checked ~ .btntitle li:last-child {
    background: #fff;
    border-bottom: none;
    border-left: none;
}
.contents .con {
    position: relative;
    top: 41px;
    border: 1px solid #000;
}
.contents .con .first td {
    padding: 5px;
}
.contents .con .first td a {
    display: block;
    width: 250px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}
.contents .con .first td a:hover {
    text-decoration: underline;
}
.con .second ul {
    display: flex;
    justify-content: space-around;
}
.con .second ul img {
    width: 120px;
}
.contents .center img {
    width: 350px;
    height: 265px;
    margin-left: 30px; 
}
.contents .right {
    display: flex;
    align-items: center;
}
.contents .right img {
    width: 120px;
    margin:10px;
    height: 90px;
}
#popup {
    position: fixed;
    left: 35%;
    top: 30%;
    display: none;
}
#popup:target {
    display: block;
}
.pop {
    position: relative;
    width: 500px;
    height: 300px;
    background: #ccc;
    border: 1px solid #333;
    padding: 30px;
}
.pop a {
    position: absolute;
    left: 515px;
    top: 330px;
}

 

전체 페이지 캡처

 

0
메뉴 부분 :hover 상태 - transition 속성 적용

 

0
공지사항 부분 :hover 상태, 팝업창 완성

 

수업 시간이 부족해 contents div까지만 완성하는 걸로 했다. 

 

 

 

 

 

 

<웹디자인기능사 시험 기출문제 풀이 : A-2>

 

 

 

- HTML

 

<!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">
    <link rel="stylesheet" href="../1109/02style.css">
    <title>웹디자인기능사A-2</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo"><b>Green<br>복지재단</></div>
            <div class="gnb">
                <div class="bg"></div>
                <ul>
                    <li><a href="#">재단소개</a>
                        <ul class="subs">
                            <li><a href="#">설립취지</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">찾아오시는길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">후원하기</a>
                        <ul class="subs">
                            <li><a href="#">국내후원</a></li>
                            <li><a href="#">국외후원</a></li>
                            <li><a href="#">맞춤후원</a></li>
                        </ul>
                    </li>
                    <li><a href="#">자료실</a>
                        <ul class="subs">
                            <li><a href="#">서식자료실</a></li>
                            <li><a href="#">사진자료실</a></li>
                            <li><a href="#">후원양식</a></li>
                        </ul>
                    </li>
                    <li><a href="#">스토리</a>
                        <ul class="subs">
                            <li><a href="#">웹진</a></li>
                            <li><a href="#">보고서</a></li>
                            <li><a href="#">나의 후원</a></li>
                        </ul>
                    </li>
                </ul>
            </div>    
        </header> 
        <div class="slide">
            <img src="../1109/웹디자인 공개문제자료/02A-2/Slide/슬라이드이미지01.jpg" alt="">
        </div>
        <div class="content">
            <div class="left"></div>
            <div class="banner"></div>
            <div class="right"></div>
        </div>
        <div class="foot">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>          
    </div>
</body>
</html>

 

 

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Arial, 돋움, Doctum, sans-serif;
}
#wrapper {
    width: 1200px;
    margin: 30px auto;
}
header {
    display: flex;
    justify-content: space-between;
    height: 100px;
}
header .logo {
    width: 200px;
    height: 40px;
    font-size: 35px;
    color: green;
    text-align: center;
}
header .bg {
    position: absolute;
    width: 1200px;
    height: 0;
    background: #333;
    left: -400px;
    top: 42px;
    transition: all 1s;
}
.gnb {
    position: relative;
    width: 800px;
    margin-top: 40px;
}
.gnb > ul {
    display: flex;
    justify-content: end;
}
.gnb > ul > li {
    position: relative;
    width: 25%;
}
.gnb > ul > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
.gnb > ul > li:last-child > a {
    border-right: 1px solid #333;
}
.gnb li ul {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 1s;
    box-sizing: border-box;
}
.gnb li ul li a {
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.gnb ul > li:hover > a {
    background: #333;
    color: #fff;
}
.gnb ul:hover ul {
    height: 90px;
    border-bottom: 1px solid #333;
}
.gnb:hover .bg {
    height: 90px;
}
.gnb > ul > li:first-child ul {
    border-left: 1px solid #333;
}
.gnb > ul > li:last-child ul {
    border-right: 1px solid #333;
}
.slide {
    width: 100%;
    height: 300px;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    margin-top: 30px;
}

 

 

0
메뉴 부분 :hover 상태 - transition 속성 적용 / sub 메뉴 뒤 bg 설정

 

 

 

 

 

<웹디자인기능사 시험 기출문제 풀이 : 10C-2>

 

여기서부터는 메뉴만 만들어보았다.

 

 

 

- HTML

 

<!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">
    <link rel="stylesheet" href="../1109/03style.css">
    <title>웹디자인기능사10C-2</title>
</head>
<body>
    <div id="wrap">
        <header>
            <div class="logo"></div>
            <div class="gnb">
                <ul>
                    <li><a href="#">축제소개</a>
                        <ul>
                            <li><a href="#">초대의 글</a></li>
                            <li><a href="#">축제개요</a></li>
                            <li><a href="#">축제연혁</a></li>
                            <li><a href="#">오시는길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">행사안내</a>
                        <ul>
                            <li><a href="#">셔틀버스안내</a></li>
                            <li><a href="#">행사안내</a></li>
                            <li><a href="#">행사일정</a></li>
                            <li><a href="#">소공연장</a></li>
                        </ul>
                    </li>
                    <li><a href="#">홍보마당</a>
                        <ul>
                            <li><a href="#">축제소식</a></li>
                            <li><a href="#">보도자료</a></li>
                            <li><a href="#">음식레시피</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여마당</a>
                        <ul>
                            <li><a href="#">참가후기</a></li>
                            <li><a href="#">연꽃갤러리</a></li>
                            <li><a href="#">포토갤러리</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>
    </div>
</body>
</html>

 

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Arial, 돋움, Doctum, sans-serif;
}
#wrap {
    width: 1000px;
    display: flex;
}
header {
    width: 20%;
}
header .logo {
    width: 100%;
    height: 100px;
}
header .gnb {
    width: 90%;
    border: 1px solid #333;
    margin: 0 auto;
}
header .gnb > ul > li > a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #333;
    border-bottom: none;
    box-sizing: border-box;
}
header .gnb > ul > li:last-child > a {
    border-bottom: 1px solid #333;
}
header .gnb li ul {
    height: 0;
    overflow: hidden;
    transition: height 1s;
}
header .gnb li ul li a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    box-sizing: border-box;
}
header .gnb ul > li:hover > a {
    background: #333;
    color: #fff;
}
header .gnb > ul > li:hover ul {
    height: 120px;
}
header .gnb > ul > li:nth-child(3):hover ul,
header .gnb > ul > li:last-child:hover ul {
    height: 90px;
}

 

 

0
세로 메뉴 :hover 상태 - transition 속성 적용

 

 

 

 

<웹디자인기능사 시험 기출문제 풀이 : 10C-3>

 

 

- HTML

 

<!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">
    <link rel="stylesheet" href="../1109/04style.css">
    <title>웹디자인기능사11C-3</title>
</head>
<body>
    <div id="wrap">
        <header>
            <div class="logo"></div>
            <div class="gnb">
                <ul>
                    <li><a href="#">축제소개</a>
                        <ul>
                            <li><a href="#">초대의 글</a></li>
                            <li><a href="#">축제개요</a></li>
                            <li><a href="#">축제연혁</a></li>
                            <li><a href="#">오시는길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">행사안내</a>
                        <ul>
                            <li><a href="#">셔틀버스안내</a></li>
                            <li><a href="#">행사안내</a></li>
                            <li><a href="#">행사일정</a></li>
                            <li><a href="#">소공연장</a></li>
                        </ul>
                    </li>
                    <li><a href="#">홍보마당</a>
                        <ul>
                            <li><a href="#">축제소식</a></li>
                            <li><a href="#">보도자료</a></li>
                            <li><a href="#">음식레시피</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여마당</a>
                        <ul>
                            <li><a href="#">참가후기</a></li>
                            <li><a href="#">연꽃갤러리</a></li>
                            <li><a href="#">포토갤러리</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>
    </div>
</body>
</html>

 

 

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Arial, 돋움, Doctum, sans-serif;
}
#wrap {
    width: 1000px;
    display: flex;
}
header {
    width: 20%;
}
header .logo {
    width: 100%;
    height: 100px;
}
header .gnb {
    width: 90%;
    border: 1px solid #333;
    margin: 0 auto;
}
header .gnb > ul > li {
    position: relative;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
}
header .gnb > ul > li:last-child {
    border-bottom: 1px solid #333;
}
header .gnb > ul > li > a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
header .gnb li ul {
    position: absolute;
    left: 178px;
    top: -30px;
    width: 100%;
    height: 240px;
    background: #333;
    display: none;
    border: 1px solid #333;
}
header .gnb li ul li a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
header .gnb > ul > li:hover ul {
    display: block;
}
header .gnb > ul > li:hover > a {
    background: #333;
    color: #fff;
}
header .gnb li ul li a:hover {
    background: #fff;
    color: #333;
}

 

0
세로 메뉴 :hover 상태 - background, color 설정 / sub 메뉴 position: absolute로 위치 지정

 

 

 

 

 

 

* 내용 참고 출처

: [웹디자인기능사] 실기 독학 / 비전공자 합격.. : 네이버블로그 (naver.com)

 

[웹디자인기능사] 실기 독학 / 비전공자 합격후기

[웹디자인기능사] 실기 독학 / 비전공자 합격후기 (긴 글 주의) *저는 비전공자이지만 웹디자인과정 국비지...

blog.naver.com

반응형

'Study > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 : grid / 코로나 비대면 수업  (0) 2022.11.16
HTML5 & CSS3 : svg 태그  (0) 2022.11.10
HTML5 & CSS3 : animation 속성 응용  (0) 2022.11.08
HTML5 & CSS3 : animation 속성  (1) 2022.11.07
HTML5 & CSS3 : Google 메인 페이지 만들기  (0) 2022.11.04

관련글

댓글 0

티스토리툴바