[웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS

안녕하세요 PNcoding입니다 :)

이번 포스팅에서는 C-1 타입인 해운대 빛축제 html, css 구현을 해보도록 하겠습니다 :)

항상 문제를 풀기 전,

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

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

https://pncoding.tistory.com/16

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

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

pncoding.tistory.com

공개문제를 받지 못하신 분들은 아래 포스팅을 참고해 주세요!

https://pncoding.tistory.com/46

[웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함)

안녕하세요 PNcoding입니다 :) 2024년도 공개문제를 분석을 한번 해보도록 하겠습니다. 2024년도 문제에서는 F타입이 추가가 되었네요. 각 타입별로 4개씩 해서 총 공개문제는 24개가 제공이 되어 있

pncoding.tistory.com

C-1 분석

1. 요구사항 체크

주제 : [ 해운대 빛축제 ]
HTML, CSS의 charset 은 utf-8
주조색, 보조색 자유롭게
배경색 #ffffff
기본 텍스트 색 #333333

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

와이어 프레임은 1000px 왼쪽정렬
메인메뉴에 마우스 올렸을 시 서브메뉴 아래로 내려오는 형태
공지사항과 갤러리는 탭으로 구현
레이어 팝업 만들기
푸터안의 내용은 로고, 하단메뉴, copyright로 구성

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

A 영역)

로고의 크기 가로 200px 세로 40px
심벌 없이 로고명을 포함한 워드타입으로 직접 디자인
메인메뉴 및 서브메뉴 하이라이트
메인메뉴에 마우스가 올라갔을 때 내려갔을 때 둘 다 부드럽게 메뉴가 움직여야 하는지

B 영역)

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

C 영역)

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

D 영역)

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

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

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

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

C-1 HTML, CSS 작성하기

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

A영역을 제외한 B, C 영역을 main으로 묶은 다음 코드작성을 시작하였습니다.

<!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">
    	<header></header>
        <div class="main"></div>
        <div class="pop_up"></div>
    </div>
    
</body>

CSS는 외부로 작성하였으며, 스타일 잡기 전 초기값을 작성해 주었습니다.

@charset "utf-8";

*{ margin: 0; padding: 0; box-sizing: border-box;}
ul{ list-style: none;}
a{ text-decoration: none; color: #333; display: block;}
img{ display: block; border: 0;}

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

A 영역

HTML

<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>
            </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>
            </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>
            </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>
            </ul>
        </li>
    </ul>
</header>

CSS

.wrap {
    width: 1000px;
    height: 650px;
    border: 1px solid #dbdbdb;
    display: flex;
}

header {
    width: 200px;
    height: 100%;
}

.logo {
    width: 100%;
    height: 40px;
    background-color: crimson;
    margin: 40px 0;
}

.gnb {
    width: 80%;
    border: 1px solid #dbdbdb;
    margin: 0 auto;
}

.top_nav {
    width: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 40px;
}

.top_nav:hover>a {
    background-color: rgb(0, 102, 255);
    color: #fff;
}

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

.sub_nav {
    width: 100%;
    line-height: 30px;
    font-weight: 14px;
    height: 0;
    overflow: hidden;
    transition-duration: 0.3s;
}

.sub_nav>li:hover>a {
    color: rgb(0, 102, 255);
    background-color: #dbdbdb;
}

B 영역

HTML

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

CSS

.main {
    width: 800px;
    height: 100%;
}

.section_1 {
    width: 100%;
    height: 350px;
    background-color: lightgoldenrodyellow;
    position: relative;
}

.section_1>a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: sandybrown;
    display: none;
}

.section_1>a:nth-child(1) {
    display: block;
}

C 영역

HTML

<section class="section_2">
    <div class="con">
        <input type="radio" id="tab_1" name="tab" checked />
        <input type="radio" id="tab_2" name="tab" />
        <div class="tab_title">
            <label for="tab_1">공지사항</label>
            <label for="tab_2">갤러리</label>
        </div>
        <ul class="tab_con_1 tab_con">
            <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>
        <ul class="tab_con_2 tab_con">
            <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>
    <div class="con">
        <a href="#"><img src="#" alt="바로가기이미지" /></a>
    </div>
</section>
<!-- section_2 end -->

main영역 아래에 팝업태그를 만들어 주었습니다.

전체영역 구조를 참고해 주시면 되겠습니다.

(본 포스팅 윗부분 C-1 내용 분석에 적혀있습니다)

<div class="pop_up">
    <h3 class="close_btn">닫기</h3>
</div>
<!-- pop_up end -->

CSS

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

.con {
    width: 30%;
    height: 100%;
    border-left: 1px solid #dbdbdb;
    padding: 20px;
}

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

input {
    display: none;
}

#tab_1:checked~.tab_con_1 {
    display: block;
}

#tab_1:checked~.tab_title>label:nth-child(1) {
    text-decoration: underline;
}

#tab_2:checked~.tab_con_2 {
    display: block;
}

#tab_2:checked~.tab_title>label:nth-child(2) {
    text-decoration: underline;
}

.tab_title {
    display: flex;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
}

label {
    margin-right: 10px;
    cursor: pointer;
}

.tab_con {
    width: 100%;
    height: 120px;
    display: none;
}

.tab_con_1>li {
    line-height: 24px;
    padding-bottom: 5px;
    font-size: 15px;
}

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

.tab_con_1 a {
    display: flex;
    justify-content: space-between;
}

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

.tab_con_2>li {
    width: 32%;
    height: 100%;
    background-color: lightcyan;
    float: left;
}

.tab_con_2>li:nth-child(2) {
    margin: 0 2%;
}

.con:nth-child(2)>a, .con:nth-child(3)>a {
    height: 100%;
    background-color: aliceblue;
}


/* section_2 end */

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

.close_btn {
    width: 90px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgb(0, 102, 255);
    color: #fff;
    cursor: pointer;
}

D 영역

HTML

<footer>
    <div class="footer_logo">
        <a href="#"><img src="#" alt="푸터로고" /></a>
    </div>
    <div class="footer_con">
        <ul class="footer_nav">
            <li><a href="#">푸터메뉴1</a></li>
            <li><a href="#">푸터메뉴2</a></li>
            <li><a href="#">푸터메뉴3</a></li>
        </ul>
        <p class="copyright">COPYRIGHT 2023 PNcoding 해운대 빛축제 CO. ALL RIGHT RESERVED.</p>
    </div>
</footer>
<!-- footer end -->

CSS

footer {
    width: 100%;
    height: 100px;
    border-top: 1px solid #dbdbdb;
    display: flex;
    align-items: center;
}

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

.footer_con {
    width: 70%;
    line-height: 30px;
    text-align: center;
}

.footer_nav {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.footer_nav>li {
    width: 25%
}

.copyright {
    font-size: 12px;
}

/* footer end */

여기까지 해서 해운대 빛축제의 HTML과 CSS구현을 마무리해 보도록 하겠습니다.

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

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

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

[웹디자인기능사 실기] C-1 해운대 빛축제 jQuery (33)	2024.03.03
[웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함) (15)	2024.03.03
[웹디자인기능사 실기] 2024 공개문제 다운로드 (14)	2024.03.03
[웹디자인기능사 실기] B-3 세계의 미술작품 jQuery (51)	2023.11.05
[웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS (1)	2023.11.05

PNcoding 피엔코딩

[웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS

C-1 분석

1. 요구사항 체크

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

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

A 영역)

B 영역)

C 영역)

D 영역)

C-1 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

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

티스토리툴바

[웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS

C-1 분석

1. 요구사항 체크

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

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

A 영역)

B 영역)

C 영역)

D 영역)

C-1 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

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

관련글

티스토리툴바