[웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS

안녕하세요 PNcoding입니다 :)

이번 포스팅에서는 A-2 타입인 그린 복지재단 html, css 구현을 해보도록 하겠습니다. :)

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

https://pncoding.tistory.com/15

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

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

pncoding.tistory.com

항상 문제를 풀기 전엔

문제 전체를 한번 슥 읽고, 체크할 것을 체크한 다음에 작업을 시작하시는 것을 추천드립니다.

마음이 급해서, 주변사람들이 타자를 치기 시작해서, 긴장해서 등등등

실제 시험장에 가면 연습했던 대로 잘 되지 않고, 글을 제대로 읽지 않고 시험을 쳐서 평소에 실수하지 않던 부분까지도 감점받을 수 있습니다.

그렇기에!! 항상 문제를 받고 나서는 먼저 볼펜을 들고 한번 체크하고 문제 풀기를 시작하도록 합시다.

그러면 이제 A-2 타입을 분석해 보도록 하겠습니다.

A-2 분석

1. 요구사항 체크

주제 : [Green 복지재단 ]
HTML, CSS 의 charset 은 utf-8
주조색, 보조색 자유롭게
배경색 #ffffff
기본 텍스트 색 #333333

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

사이트맵은 와이어프레임 안의 메뉴내용이므로, 코딩진행 시 메뉴는 사이트맵을 참고하여 적어주시면 됩니다.

와이어 프레임을 보고 아래의 내용을 체크하시면 됩니다.

와이어 프레임의 전체크기는 얼마인지
레이아웃의 정렬은 가운데인지, 왼쪽인지
메뉴형태는 어떻게 되는지
공지사항과 갤러리는 탭으로 구현되는지
레이어 팝업은 만들어야 하는지
푸터안의 내용은 어떻게 되는지

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

A 영역)

로고의 크기
직접 만드는지, 제공된 것을 사용하는지
심벌 추가하는지 추가하지 않고 워드타입으로 제작하는지
제공된 것을 사용할 시 색상을 변경해야 하는지
메인메뉴 및 서브메뉴 하이라이트 해야 하는지
메인메뉴에 마우스가 올라갔을 때 내려갔을 때 둘 다 부드럽게 메뉴가 움직여야 하는지

B 영역)

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

C 영역)

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

D 영역)

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

여기까지 체크하셨으면 디자인을 바로 시작하셔도 되고 코딩을 바로 시작하셔도 무관합니다.

본인의 스타일에 맞게 진행하시면 됩니다. :)

각 영역의 html , css 영역을 한번 만들어 보도록 하겠습니다.

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

시험 진행 시 절대 영문법 색상으로 사용하지 않도록 하셔야 합니다.

웹디자인기능사 실기 공부를 진행하시면서 잘 풀리지 않을 시 이런 방법으로도 풀 수 있다는 것을 참고하시며, 시험에 도움이 되었으면 좋겠습니다. :)

A-2 HTML, CSS 작성하기

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green복지재단</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

</body>
</html>

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

header {
    width: 100%;
    height: 100px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #fff;
    transition-duration: 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

header:hover {
    height: 190px;
}

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

.gnb {
    width: 800px;
    height: 40px;
    background-color: aliceblue;
    display: flex;
    margin-top: 59px;
}

.top_nav {
    width: 25%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    transition-duration: 0.3s;
}

.top_nav:hover {
    background-color: rgb(0, 85, 0);
}

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

.sub_nav {
    width: 100%;
    line-height: 30px;
    font-size: 15px;
}

.sub_nav>li:hover {
    background-color: rgb(224, 255, 224);
}

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: 100%;
    height: 300px;
    background-color: tan;
    margin-top: 100px;
    position: relative;
}

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

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

C 영역

HTML

<section class="section_2">
    <div class="con">
        <div class="title"><b>공지사항</b></div>
        <ul class="list">
            <li class="pop_click"><a href="#">첫번째 공지사항 내용입니다. <span>0000-00-00</span></a></li>
            <li><a href="#">두번째 공지사항 내용입니다. <span>0000-00-00</span></a></li>
            <li><a href="#">세번째 공지사항 내용입니다. <span>0000-00-00</span></a></li>
            <li><a href="#">네번째 공지사항 내용입니다. <span>0000-00-00</span></a></li>
        </ul>
    </div>
    <div class="con">
       <div class="title"><b>갤러리</b></div>
       <ul class="list">
        <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">
    <h2>팝업 타이틀 영역</h2>
    <p>
        팝업 내용 영역 입니다. <br/>
        팝업 내용 영역 입니다. <br/>
        팝업 내용 영역 입니다. <br/>
    </p>
    <div class="close_btn">닫기</div>
</div>

CSS

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

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

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

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

.con:nth-child(1)>.list>li:hover {
    text-decoration: underline;
}

.con:nth-child(1)>.list a {
    line-height: 26px;
    display: flex;
    justify-content: space-between;
}

.con:nth-child(1) span {
    font-size: 14px;
    color: #808080;
}

.con:nth-child(2)>.list {
    display: flex;
    height: 70%;
    justify-content: space-between;
}

.con:nth-child(2)>.list>li {
    width: 30%;
    height: 100%;
    background-color: rgb(0, 85, 0);
}

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

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

.pop_up>h2 {
    margin-bottom: 10px;
}

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

.close_btn {
    width: 80px;
    height: 30px;
    background-color: rgb(0, 85, 0);
    color: #fff;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    cursor: pointer;
}

D 영역

HTML

<footer>
    <div class="footer_logo">
        <a href="#"><img src="#" alt="그린복지재단 푸터로고" /></a>
    </div>
    <p class="copyright">대표자:피엔코딩 &nbsp;&nbsp; 개인정보관리책임자:피엔코딩 &nbsp;&nbsp; <a href="https://pncoding.tistory.com/">피엔코딩 블로그</a></p>
    <div class="family_site">
        <select>
            <option>피엔코딩</option>
            <option>피엔코딩</option>
            <option>피엔코딩</option>
        </select>
    </div>
</footer>

CSS

footer {
    width: 100%;
    height: 100px;
    border-top: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 26px;
    align-items: center;
    padding: 0 20px;
}

.copyright a {
    display: inline;
}


select {
    width: 140px;
    height: 30px;
    outline: none;
    border: 1px solid #dbdbdb;
}

여기까지 해서 그린문화재단의 HTML과 CSS구현을 마무리해 보도록 하겠습니다.

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

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

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

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

PNcoding 피엔코딩

[웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS

A-2 분석

1. 요구사항 체크

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

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

A 영역)

B 영역)

C 영역)

D 영역)

A-2 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

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

티스토리툴바

[웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS

A-2 분석

1. 요구사항 체크

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

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

A 영역)

B 영역)

C 영역)

D 영역)

A-2 HTML, CSS 작성하기

A 영역

HTML

CSS

B 영역

HTML

CSS

C 영역

HTML

CSS

D 영역

HTML

CSS

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

관련글

티스토리툴바