[웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS

안녕하세요 PNcoding입니다 :)

이번 포스팅에서는 B-3 타입인 세계의 미술작품 html, css 구현을 해보도록 하겠습니다. :)

항상 문제를 풀기 전,

받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지 않도록!!) 체크한 다음 진행하도록 합시다 :)

실격요인도 항상 체크를 해야겠죠?

https://pncoding.tistory.com/16

[웹디자인기능사 실기] 유의사항 및 실격요인

웹디자인기능사 실기를 치실 때 반드시 체크해야 할 사항들이 몇 가지가 있습니다. 반드시 체크하신 다음 시험준비를 하도록 합시다~! 전체적인 중요 체크포인트 주어진 자료(수험자 제공파일)

pncoding.tistory.com

공개문제를 받지 못하신 분들은 여기에서 받아주시면 되겠습니다.

https://pncoding.tistory.com/15

[웹디자인기능사 실기] 공개문제 다운로드

안녕하세요 PNcoding입니다 :) 오늘은 웹디자인기능사 실기 시험에 대하여 알려드리도록 하겠습니다. 실기 시험 일정 반드시 필기를 합격하신 다음 실기시험을 치실 수 있습니다. 시험 신청은 큐

pncoding.tistory.com

B-3 분석

1. 요구사항 체크

주제 : [세계의 미술작품 ]
HTML, CSS 의 charset 은 utf-8
주조색, 보조색 자유롭게
배경색 #ffffff
기본 텍스트 색 #333333

2. 사이트 맵 및 와이어프레임 체크

와이어 프레임의 전체크기 100%
레이아웃의 정렬은 그대로(와이어프레임의 크기가 100% 이기에 신경 쓰지 않아도 됨)
기본메뉴형태
공지사항과 갤러리는 탭으로 구현되지 않음
레이어 팝업 만들기
푸터안의 내용은 로고, copyright, sns로 구성

3. 세부영역별 지시사항 체크

A 영역)

로고의 크기 변경 가능, 변경 시 가로세로비율(종횡비) 유지
제공된 것을 사용
색상 변경
메인메뉴 및 서브메뉴 하이라이트
메인메뉴에 마우스가 올라갔을 때 내려갔을 때 둘 다 부드럽게 메뉴가 움직여야 하는지

B 영역)

3개의 이미지를 사용하여 만들기
[Slide] 영역에 제공된 3개의 이미지 및 텍스트를 각 이미지에 적용하되 가독성 있게 만들기
슬라이드의 움직임 위아래
3초 이내로 전환되며 반복적으로 슬라이드 움직이도록 만들기

C 영역)

공지사항의 타이틀은 콘텐츠 내용과 구분이 되도록(위계질서 신경 쓰기)
제공된 텍스트를 이용하여 만들기(오타 및 탈자가 있을 시 수정가능)
공지사항의 첫 번째 콘텐츠를 클릭했을 때 팝업창이 나오게
제공된 갤러리 이미지를 이용하여 가로로 배치
갤러리의 이미지에 마우스오버(hover 이벤트 적용) 시 투명도 변화
위의 내용은 반드시 HTML 코딩으로 작성해야 하며, 이미지로 삽입해서는 안됨

D 영역)

푸터에 로고 무채색으로 변경
제공된 텍스트를 사용하여 내용 제작

여기까지 체크 하셨다면 이제 각 영역의 html , css 영역을 만들어 보도록 하겠습니다.

이미지는 삽입하지 않았으며, 임의의 색상을 넣고 작업하였습니다.

시험 진행 시 절대 영문법 색상으로 사용하지 않고 주제에 맞는 색상을 rgb나 16진수로 표현하셔야 합니다.

B-3 HTML, CSS 작성하기

전체 영역을 작성하기 전 코드는 이렇게 하고 진행하도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>세계의 미술작품</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

	<div class="wrap"></div>

</body>
</html>

CSS는 외부로 작성하였으며, 스타일 적용하기 전 초기값을 잡고 진행하였습니다.

@charset "utf-8";

*{ margin: 0; padding: 0; box-sizing: border-box;}
ul{list-style: none;}
a{ text-decoration: none; color: #333333; display: block;}
img{ display: block; border: 0; width: 100%; height: 100%; object-fit: cover;}

body {
    font-family: '맑은 고딕', sans-serif;
    color: #333333;
}

A 영역

HTML

<header>
    <div class="in_header">
        <div class="logo">
            <a href="#"><img src="#" alt="세계의 미술작품 로고" /></a>
        </div>
        <ul class="gnb">
            <li class="top_nav">
                <a href="#">소장처별</a>
                <ul class="sub_nav">
                    <li><a href="#">한국</a></li>
                    <li><a href="#">프랑스</a></li>
                    <li><a href="#">이탈리아</a></li>
                    <li><a href="#">독일</a></li>
                </ul>
            </li>
            <li class="top_nav">
                <a href="#">장르별</a>
                <ul class="sub_nav">
                    <li><a href="#">회화</a></li>
                    <li><a href="#">판화</a></li>
                    <li><a href="#">공예/고대유물</a></li>
                    <li><a href="#">그 외</a></li>
                </ul>
            </li>
            <li class="top_nav">
                <a href="#">테마별</a>
                <ul class="sub_nav">
                    <li><a href="#">초상화/인물</a></li>
                    <li><a href="#">종교</a></li>
                    <li><a href="#">신화/문학</a></li>
                    <li><a href="#">일상/스포츠</a></li>
                </ul>
            </li>
            <li class="top_nav">
                <a href="#">시대별</a>
                <ul class="sub_nav">
                    <li><a href="#">1900년이전</a></li>
                    <li><a href="#">1900년대</a></li>
                    <li><a href="#">현대</a></li>
                    <li><a href="#">그 외</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>

CSS

.wrap {
    width: 100%;
    height: 700px;
    background-color: #ffffff;
    position: relative;
}


header {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 99;
}

.in_header {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.logo {
    width: 200px;
    height: 40px;
    background-color: crimson;
}

.gnb {
    width: 800px;
    height: 40px;
    display: flex;
}

.top_nav {
    width: 25%;
    height: 100%;
    line-height: 40px;
}

.top_nav:hover {
    background-color: #000;
}

.top_nav:hover>a {
    color: #fff;
}

.top_nav:hover>.sub_nav {
    height: 120px;
}

.sub_nav {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition-duration: 0.3s;
    line-height: 30px;
    font-size: 15px;
    background-color: #fff;
}

.sub_nav>li:hover {
    font-weight: 900;
    text-decoration: underline;
}

B 영역

HTML

<section class="section_1">
    <div class="img_box">
        <a href="#"><img src="#" alt="슬라이드1"/></a>
        <a href="#"><img src="#" alt="슬라이드2"/></a>
        <a href="#"><img src="#" alt="슬라이드3"/></a>
    </div>
</section>

CSS

.section_1 {
    width: 1200px;
    height: 300px;
    background-color: lightblue;
    margin: 0 auto;
    position: relative;
}

.img_box {
    width: 100%;
    height: 300%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgoldenrodyellow;
}

.img_box>a {
    width: 100%;
    height: 33.333%;
}

C 영역

HTML

<section class="section_2">
    <div class="con">
        <div class="title"><b>공지사항</b></div>
        <ul class="list_wrap">
            <li class="pop_click"><a href="#">공지사항1 내용입니다. <span>0000-00-00</span></a></li>
            <li><a href="#">공지사항2 내용입니다. <span>0000-00-00</span></a></li>
            <li><a href="#">공지사항3 내용입니다. <span>0000-00-00</span></a></li>
        </ul>
    </div>
    <div class="con">
        <div class="title"><b>갤러리</b></div>
        <ul class="img_wrap">
            <li><a href="#"><img src="#" alt="갤러리1" /></a></li>
            <li><a href="#"><img src="#" alt="갤러리2" /></a></li>
            <li><a href="#"><img src="#" alt="갤러리3" /></a></li>
        </ul>
    </div>
    <div class="con">
        <a href="#"><img src="#" alt="배너이미지" /></a>
    </div>
</section>

<div class="pop_up">
    <div class="pop_title">팝업 타이틀</div>
    <p>
        팝업 내용 영역 입니다.<br/>
        팝업 내용 영역 입니다.<br/>
        팝업 내용 영역 입니다.<br/>
        팝업 내용 영역 입니다.
    </p>
    <div class="close_btn">닫기</div>
</div>

CSS

.section_2 {
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
}

.con {
    width: 30%;
    height: 100%;
    padding: 15px;
}

.con:nth-child(1) {
    width: 40%
}

.title {
    font-size: 24px;
    margin-bottom: 10px;
}

.list_wrap>li {
    line-height: 26px;
    padding: 2px 0;
}

.list_wrap>li:hover {
    text-decoration: underline;
}

.list_wrap>li>a {
    display: flex;
    justify-content: space-between;
}

.list_wrap span {
    font-size: 14px;
    color: #808080;
}

.img_wrap {
    height: 70%;
    display: flex;
    justify-content: space-between;
}

.img_wrap>li {
    width: 30%;
    height: 100%;
    background-color: sandybrown;
}

.img_wrap>li:hover {
    opacity: 0.7;
}

.con:nth-child(3)>a {
    width: 100%;
    height: 100%;
    background-color: silver;
}

.pop_up {
    width: 450px;
    height: 250px;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -225px;
    padding: 40px 20px;
    display: none;
}

.pop_title {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
}

.pop_up>p {
    line-height: 25px;
}

.close_btn {
    width: 80px;
    height: 30px;
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

D 영역

HTML

<footer>
    <div class="in_footer">
        <div class="footer_logo"><img src="#" alt="푸터로고" /></div>
        <p class="copyright">Copyright 2023. 피엔코딩 Co. all rights reserved.</p>
        <ul class="sns">
            <li><a href="#"><img src="#" alt="sns1" /></a></li>
            <li><a href="#"><img src="#" alt="sns2" /></a></li>
            <li><a href="#"><img src="#" alt="sns3" /></a></li>
        </ul>
    </div>
</footer>

CSS

footer {
    width: 100%;
    height: 100px;
}

.in_footer {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_logo {
    width: 200px;
    height: 40px;
    background-color: crimson;
}

.sns {
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
}

.sns>li {
    width: 20%;
    height: 100%;
    background-color: sandybrown;
    margin-left: 10px;
}

여기까지 해서 세계의 미술작품의 HTML과 CSS구현을 마무리해 보도록 하겠습니다.

다음 포스팅에서는 jQuery를 이용한 슬라이드 및 팝업창을 구현하는 방법을 알려드리도록 하겠습니다. :)

저작자표시 비영리 변경금지

'웹디자인기능사 실기' 카테고리의 다른 글

[웹디자인기능사 실기] 2024 공개문제 다운로드 (14)	2024.03.03
[웹디자인기능사 실기] B-3 세계의 미술작품 jQuery (51)	2023.11.05
[웹디자인기능사 실기] A-2 그린복지재단 jQuery (53)	2023.11.04
[웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS (3)	2023.11.04
[웹디자인기능사 실기] 공개문제 분석 (37)	2023.11.02

PNcoding 피엔코딩

[웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS

B-3 분석

1. 요구사항 체크

2. 사이트 맵 및 와이어프레임 체크

3. 세부영역별 지시사항 체크

A 영역)

B 영역)

C 영역)

D 영역)

B-3 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

'웹디자인기능사 실기' 카테고리의 다른 글

티스토리툴바

[웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS

B-3 분석

1. 요구사항 체크

2. 사이트 맵 및 와이어프레임 체크

3. 세부영역별 지시사항 체크

A 영역)

B 영역)

C 영역)

D 영역)

B-3 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

'웹디자인기능사 실기' 카테고리의 다른 글

관련글

티스토리툴바