본문 바로가기
Tutorial/WebD

2023년 웹디자인 기능사 레이아웃 : B-2

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

2023년 웹디자인 기능사 레이아웃 : B-2

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

소개

안녕하세요! 웹스토리보이입니다. B유형의 두번째 레이아웃을 만들어보겠습니다. B-1유형의 원리를 이해했다면 B-2유형도 쉽게 만들 수 있습니다. 한번 더 연습해보고 빨리 감 잡을께요!


1. 기본 구조 만들기

웹 문서 만들기 : VSCODE를 실행하고 B-2.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-2으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요! 웹 사이트 제작시 언어 설정을 해주는데요! charset부분이 콘텐츠의 언어를 의미하고요, lang의 언어는 브라우저가 어떤 언어를 사용하고 있는지 알려주는 부분이라고 생각하면 됩니다. X-UA-Compatible는 브라우저의 렌더링을 최선 소스를 작업하라는 뜻이고, viewport는 반응형 작업시 화면 비율을 설정해주는 부분입니다. 이런 부분은 이런게 있구나 하고 넘어가셔도 상관은 없습니다. 다음에 기회가 되면 좀 더 깊이 살펴보도록 하겠습니다.

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

B유형의 구조도 A유형과 다른건 없지만 전체 영역이라는 부분이 조금 다릅니다. 전체 영역이라 함은 width값이 100%라는 것을 의미하고, 100%는 브라우저 화면의 전체 크기를 의미합니다.

<body>
    <div id="wrap">
        <header id="header"></header>
        <article id="slider"></article>
        <main id="contents"></main>
        <footer id="footer"></footer>
    </div>
</body>

해당 영역을 확인하기 위해 width, height, background-color를 설정하였습니다. width값을 100%를 설정하고, height값과 background-color을 넣어서 영역을 확인하겠습니다. 이상이 없으면 각 섹션을 작업하겠습니다.

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 100%;
    }
    #header {
        width: 100%;
        height: 100px;
        background-color: #efefef;
    }
    #slider {
        width: 100%;
        height: 300px;
        background-color: #e3e3e3;
    }
    #contents {
        width: 100%;
        height: 200px;
        background-color: #d9d9d9;
    }
    #footer {
        width: 100%;
        height: 100px;
        background-color: #d1d1d1;
    }
</style>

2. 각 섹션 작업하기

헤더 영역은 전체 영역과 가운데 영역으로 구성되어 있고, 가운데 영역은 로고 영역과 네비 영역으로 구성되어 있습니다. 전체 영역을 나타내는 header 영역에는 width: 100%를 설정하고 header_container 영역에는 width 값을 1200px로 설정합니다. header_container 영역은 가운데로 오기 위해서 margin: 0 auto를 설정하겠습니다.

<div id="header">
    <div class="header_container">
        <h1 class="logo"></h1>
        <div class="nav"></div>
    </div>
</div>
<!-- //header -->
#header {
    width: 100%;
    background-color: #efefef;
}
#header .header_container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
}
#header .header_container .logo {
    width: 20%;
    height: 100px;
    background-color: #d9d9d9;
}
#header .header_container .nav {
    width: 80%;
    height: 100px;
    background-color: #d1d1d1;
}

슬라이드 영역은 전체 영역이 없고 가운데 영역만 있기 때문에 margin: 0 auto;를 설정하겠습니다.

<div id="slider"></div>
<!-- //slider -->
#slider {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background-color: #c7c7c7;
}

컨텐츠 영역도 전체 영역은 없고 가운데 영역만 있는 구조입니다. 가운데 영역 안에 3개의 자식 영역이 들어가는 형태입니다. 3개의 영역은 width값을 33.3333%로 설정하고, 상위 박스영역에는 flex를 설정하겠습니다.

<div id="contents">
    <section class="content1"></section>
    <section class="content2"></section>
    <section class="content3"></section>
</div>
<!-- //contents -->
#contents {
    width: 1200px;
    margin: 0 auto;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #b1b1b1;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #a3a3a3;
}

마지막으로 부터 영역은 전체 영역이 들어가기 때문에 footer 영역한테는 width를 100%로 설정하고, footer_container에게는 width값을 1200px로 설정하고 가운데 정렬를 위해 margin: 0 auto를 설정하겠습니다. 푸터 영역은 우선 2단계로 나누고 오른쪽 영역은 다시 2단계 영역으로 작업하겠습니다.

<footer id="footer">
    <div class="footer_container">
        <div class="footer1"></div>
        <div class="footer2">
            <div class="footer2-1"></div>
            <div class="footer2-2"></div>
        </div>
    </div>
</footer>
<!-- //footer -->
#footer {
    width: 100%;
    height: 100px;
    background-color: #d1d1d1;
}
#footer .footer_container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
}
#footer .footer_container .footer1 {
    width: 80%;
    height: 100px;
    background-color: #9d9d9d;
}
#footer .footer_container .footer2 {
    width: 20%;
}
#footer .footer_container .footer2 .footer2-1 {
    width: 100%;
    height: 50px;
    background-color: #929292;
}
#footer .footer_container .footer2 .footer2-2 {
    width: 100%;
    height: 50px;
    background-color: #838383;
}

3. 마무리

어는새 B-2유형도 마무리가 되었습니다. 전체 영역은 100%로 작업하고 가운데 영역은 기존대로 margin: 0 auto를 주시면 크게 문제 될 것이 없습니다. 나머지 두개도 작업해보면 쉽게 이해하고, 재밌을거예요! 😛 그럼 다음 유형에서 또 뵐께요! 벌써 포기한건 아니죠!!


PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

HTML 레퍼런스

CSS 레퍼런스

댓글