본문 바로가기
Tutorial/WebD

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

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

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

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

소개

안녕하세요! 웹스토리보이입니다. C-2유형을 작업해보겠습니다. 벌써 11번째 레이아웃입니다. 10번 정도 따라하니까 감이 잡히죠^^ 설명할 때 기초적인 부분을 세세하게 하지 못해도, 반복적으로 따라하시면 느낌이 오실거라 생각이 듭니다. 그래도 잘 모르겠다면, 검색을 하거나, GTP한테 물어보면 거의 해결될 것입니다. 중요한건 흐름이나 방법을 아는게 중요합니다. CSS 속성이나 HTML 태그는 방법을 알고나면, 검색하면 다 나오니까, 그런 부분을 잘 모른다고, 속상해 할 필요 없습니다. 그럼 또 가볼까요!😣😫😔🥳


1. 기본 구조 만들기

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

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

전체적인 구조는 왼쪽 메뉴와 콘텐츠로 구성되어 있습니다. asidemain 영역으로 설정하겠습니다. 전체 크기는 1000px로 설정하겠습니다.

<body>
    <div id="wrap">
        <aside id="aside"></aside>
        <main id="main"></main>
    </div>
    <!-- //wrap -->
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 1000px;
        display: flex;
    }
    #aside {
        width: 20%;
        height: 650px;
        background-color: #efefef;
    }
    #main {
        width: 80%;
        height: 650px;
        background-color: #e3e3e3;
    }
</style>

콘텐츠 구조에는 3개의 섹션이 들어가기 때문에 이 부분도 구조화 하겠습니다. 이렇게 하면 전체적인 구조가 완성된것 같습니다. 세부적으로 하나씩 작업을 들어가겠습니다.

<div id="wrap">
    <aside id="aside"></aside>
    <main id="main">
        <article id="slider"></article>
        <section id="contents"></section>
        <footer id="footer"></footer>
    </main>
</div>
<!-- //wrap -->
#slider {
    width: 100%;
    height: 350px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    height: 200px;
    background-color: #d1d1d1;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #c7c7c7;
}

2. 각 섹션 작업하기

왼쪽 사이드 영역에는 두개의 영역이 들어갑니다. width, height, background-color를 넣어주고, 영역을 확인하겠습니다.

<aside id="aside">
    <h1></h1>
    <nav></nav>
</aside>
<!-- //aside -->
#aside {
    width: 20%;
}
#aside h1 {
    width: 100%;
    height: 100px;
    background-color: #d9d9d9;
}
#aside nav {
    width: 100%;
    height: 550px;
    background-color: #d1d1d1;
}

슬라이드 영역은 별개 없으니 영역만 확인하고 넘어가겠습니다.

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

컨텐츠 영역에는 3개의 섹션으로 구성되어 있습니다. 독립적인 주제 영역이라면, article 태그를 사용해도 괜찮습니다.

<section id="contents">
    <article class="content1"></article>
    <article class="content2"></article>
    <article class="content3"></article>
</section>
<!-- //contents -->
#contents {
    width: 100%;
    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 id="footer">
    <div class="footer1"></div>
    <div class="footer2">
        <div class="footer2-1"></div>
        <div class="footer2-2"></div>
    </div>
</footer>
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 80%;
    background-color: #838383;
}
#footer .footer2 {
    width: 20%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 50px;
    background-color: #9d9d9d;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 50px;
    background-color: #929292;
}

3. 마무리

C-1유형과 C-2유형은 크게 다른것이 없어서 설명할 것이 없네요! C-3유형과 C-4유형도 비슷하니 바로 D유형으로 가셔도 될거 같습니다. 하지만 혼자서 아직 만들기 힘든분은 저랑 같이 다시 한번 해보는게 좋을 것 같네요! 수고하셨습니다.😇


PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글