본문 바로가기
Tutorial/WebD

2023년 웹디자인 기능사 레이아웃 : E-4

by @webstoryboy 2023. 5. 7.
Tutorial/webd

2023년 웹디자인 기능사 레이아웃 : E-4

by @webs 2023. 05. 01.
20
웹디자인 기능사 레이아웃 유형 : E-4
난이도 중간

소개

안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다.


1. 기본 구조 만들기

웹 문서 만들기 : VSCODE를 실행하고 E-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-4으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!

<!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">
    <title>웹디자인기능사 레이아웃 E-4</title>
</head>
<body>
    
</body>
</html>

mainfooter로 이루어진 2단구조로 먼저 작업을 하겠습니다. 화면 높이 값에 맞게 height 값을 설정해야 함으로 main의 높이 값은 height: calc(100vh - 120px);로 설정하겠습니다.

<body>
    <div id="wrap">
        <main id="main"></main>
        <footer id="footer"></footer>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 100%;           
    }
    #main {
        width: 100%;
        height: calc(100vh - 120px);
        background-color: #efefef;
    }
    #footer {
        width: 100%;
        height: 120px;
        background-color: #e3e3e3;
    }
</style>

메인 콘텐츠는 3개의 영역으로 이루어져 있으며, header, contents, slider로 구성하였습니다. 여기서 헤더와 콘텐츠는 고정값이고, 슬라이드는 유동적이기 때문에 width: calc(100% - 600px); 이렇게 설정해야 반응형이 가능합니다. 이렇게 하면 화면의 크기를 변경해도 화면에 맞게 변하는 모습을 볼 수 있습니다.

<div id="wrap">
    <main id="main">
        <header id="header"></header>
        <section id="contents"></section>
        <article id="slider"></article>
    </main>
    <footer id="footer"></footer>
</div>
* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 100%;           
}
#main {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
}
#header {
    width: 200px;
    height: 100%;
    background-color: #efefef;
}
#contents {
    width: 400px;
    height: 100%;
    background-color: #e3e3e3;
}
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #d9d9d9;
}
#footer {
    width: 100%;
    height: 120px;
    background-color: #d1d1d1;
}

2. 각 섹션 작업하기

메인 박스 안에 헤더 영역을 작업하겠습니다. 헤더 영역은 로고와 메뉴 영역으로 나누어져 있습니다.

<header id="header">
    <h1 class="h1"></h1>
    <nav class="nav"></nav>
</header>
<!-- //header -->
#header {
    width: 200px;
    height: 100%;
}
#header h1 {
    width: 100%;
    height: 10%;
    background-color: #efefef;
}
#header nav {
    width: 100%;
    height: 90%;
    background-color: #e3e3e3;
}

컨텐츠 영역은 4개의 영역으로 이루어져 있습니다. 배너, 공지사항, 갤러리, 링크 영역으로 이루어져 있으며, 높이 값은 화면 비율에 맞추어야 하기 때문에 %로 작업하였습니다.

<section id="contents">
    <article class="banner"></article>
    <article class="notice"></article>
    <article class="gallery"></article>
    <article class="link"></article>
</section>
<!-- //contents -->
#contents {
    width: 400px;
    height: 100%;
}
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #d9d9d9;
}
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #d1d1d1;
}
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #c7c7c7;
}
#contents .link {
    width: 100%;
    height: 15%;
    background-color: #bcbcbc;
}

슬라이드 영역은 특별한 것이 없으니 영역만 잡고 넘어가겠습니다. 대신 width 값은 유동적으로 변해야 하기 때문에 width: calc(100% - 600px) 이렇게 설정했습니다.

<article id="slider"></article>
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #b1b1b1;
}

푸터 영역은 3개의 영역으로 나누고, 두번재 영역은 다시 두개의 영역으로 작업하겠습니다.

<footer id="footer">
    <div class="footer1"></div>
    <div class="footer2">
        <div class="footer2-1"></div>
        <div class="footer2-2"></div>
    </div>
    <div class="footer3"></div>
</footer>
<!-- //footer -->
#footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #a3a3a3;
}
#footer .footer2 {
    width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #929292;
}
#footer .footer3 {
    width: 200px;
    height: 120px;
    background-color: #838383;
}

3. 마무리

수고하셨습니다. 2023년 버전 웹디자인 기능사 레이아웃 예제의 마지막 E-4 유형을 완료했습니다. 이제 레이아웃을 마스터 했으니, 웹디자인 기능사의 하이라이트 스크립트를 마무리 해보겠습니다. 아마도 스크립트가 제일 어려울 수 있으나, 이것 역시 하나씩 천천히 해보면 재밌다는 것을 느낄 수 있습니다. 궁금한 사항이나 틀린 부분이 있다면 언제든지 댓글 남겨주세요! 수고하셨습니다. 🫡


PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글