본문 바로가기
Tutorial/WebD

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

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

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

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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 D-3 유형을 작업해보겠습니다. D-3 유형은 D-1 유형과 비슷합니다. 푸터를 제외하고는 비슷합니다. 복습하는 개념으로 한번 해보겠습니다.


1. 기본 구조 만들기

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

<!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-3</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: 850px;
        background-color: #efefef;
    }
    #main {
        width: calc(100% - 200px);
        height: 850px;
        background-color: #e3e3e3;
    }
    #footer {
        width: 100%;
        height: 100px;
        background-color: #d9d9d9;
    }
</style>

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

<div id="wrap">
    <aside id="aside"></aside>
    <main id="main">
        <article id="slider"></article>
        <article id="banner"></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;
}
#banner {
    width: 100%;
    height: 200px;
    background-color: #d1d1d1;
}
#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: 750px;
    background-color: #e3e3e3;
}

슬라이드 영역에는 링크 영역이 있습니다. 슬라이드 영역 위에 위치하기 때문에 position: absolute로 설정하겠습니다. 절대값을 설정하면 항상 기준점이 되는 relative를 설정해야 합니다.

<article id="slider">
    <div class="link"></div>
</article>
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
    position: relative;
}
#slider .link {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 300px;
    background-color: #9d9d9d;
}

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

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

콘텐츠 공지사항 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.

<section id="contents"></section>
#contents {
    width: 100%;
    height: 250px;
    background-color: #c7c7c7;
}

푸터 영역은 2개의 영역으로 나뉘고, 두번째 영역은 또 다시 두개의 영역으로 설정합니다.

<footer id="footer">
    <div class="footer1"></div>
    <div class="footer2">
        <div class="footer2-1"></div>
        <div class="footer2-2"></div>
    </div>
</footer>
<!-- //footer -->
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #bcbcbc;
}
#footer .footer2 {
    width: 80%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #b1b1b1;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}

3. 마무리

D-3 유형도 완성하였습니다. 잘 따라하셨나요? 유형별로 특징들이 있으니 외우기 보다는 시험지를 보면서 하나씩 생각하면서 작업하면 절로 구현되지 않을까 싶네요! 그럴려면 연습을 조금 많이 하셔야 겠죠^^ 꼭 혼자서 한번 해보세요!😅 막상 시험장가서 사소한 것으로 막히면 시간이 많이 지나기 때문에. 틀리는 연습도 하셔야 합니다.


PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글