본문 바로가기
Tutorial/WebD

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

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

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

by @webs 2023. 05. 01.
16
웹디자인 기능사 레이아웃 유형 : D-4
난이도 쉬움

소개

안녕하세요! 웹스토리보이입니다. 이번에는 D유형의 마지막 레이아웃을 연습해보겠습니다. 전체적인 유형은 동일하나 세부적인 부분이 조금 틀린 구조입니다. 기본에 충실하다면 어떻게 변형하여도 여러분은 코딩할 수 있을거예요! 🫢 그럼 시작해볼까요!


1. 기본 구조 만들기

웹 문서 만들기 : VSCODE를 실행하고 D-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-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>웹디자인기능사 레이아웃 D-4</title>
</head>
<body>
    
</body>
</html>

전체적인 구조는 asdie, main, footer로 나누어 작업하였습니다. 왼쪽 사이드는 고정값이기 때문에 width: 200px를 설정하고, 컨텐츠 영역은 width: 100%를 설정했습니다. 이렇게 하면 가로 정렬이 안되기 때문에 고정값 200px을 빼주고 width 값을 설정해야 합니다. main의 가로 값은 width: calc(100% - 200px)로 설정해야 구조가 깨지지 않겠죠!

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

메인 콘텐츠는 3개의 영역으로 이루어져 있으며, slider, link, contents로 구성하였습니다.

<div id="wrap">
    <aside id="aside"></aside>
    <main id="main">
        <article id="slider"></article>
        <article id="link"></article>
        <section id="contents"></section>
    </main>
    <footer id="footer"></footer>
</div>
* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 200px;
    height: 850px;
    background-color: #efefef;
}
#main {
    width: calc(100% - 200px);
    height: 850px;
    background-color: #e3e3e3;
}
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}
#link {
    width: 100%;
    height: 150px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    height: 250px;
    background-color: #c7c7c7;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #bcbcbc;
}

2. 각 섹션 작업하기

사이드 영역의 로고와 메뉴를 설정하겠습니다. 따로 크기에 대한 정의가 없으므로, 임의로 설정하겠습니다.

<aside id="aside">
    <h1 class="logo"></h1>
    <nav class="nav"></nav>
</aside>
#aside {
    width: 200px;
}
#aside .logo {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside .nav {
    width: 100%;
    height: 700px;
    background-color: #e3e3e3;
}

이번 유형 슬라이드에는 아무것도 없네요!. 영역만 잡고 넘어가겠습니다.

<article id="slider">
</article>
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}

링크 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.

<article id="link"></article>
#link {
    width: 100%;
    height: 150px;
    background-color: #d1d1d1;
}

콘텐츠 공지사항 영역은 두개의 영역으로 나누어서 작업하겠습니다.

<section id="contents">
    <div class="content1"></div>
    <div class="content2"></div>
</section>
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .content2 {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}

푸터 영역은 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;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer3 {
    width: 20%;
    height: 120px;
    background-color: #929292;
}

3. 마무리

드디어 D유형도 끝이 났습니다. 전체화면을 기준으로 width 값을 설정하는 부분이 이번 유형에 가장 중요한 특징같습니다. 혹시 작업하다가 이상하거나 궁금한 점들은 댓글로 남겨주세요! 최대한 빨리 답변을 달아드리겠습니다.


PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글