본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/WebD

2023년 웹디자인 기능사 레이아웃 : A-1

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

2023년 웹디자인 기능사 레이아웃 : A-1

by @webs 2023. 05. 01.
01
웹디자인 기능사 레이아웃 유형 : A-1
난이도 쉬움
소스 다운로드
완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기

소개

안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사 실기시험에 가장 중요한 레이아웃 연습을 시작하겠습니다.
레이아웃은 2023버전부터 두개의 레이아웃이 추가되었습니다. 새로운 레이아웃이 조금 어려울 수 있지만, 실제 사이트 제작에 있어 많이 활용되는 부분이기 때문에 알아두면 도움이 될 것이라고 생각이 듭니다.
레이아웃은 실제 사이트 제작시 가장 중요한 부분입니다. 레이아웃이 가장 기본이기 때문에 기본을 완벽하게 익히면 어떤 유형이 나와도 코딩하는데 문제가 없을겁니다.

2023 웹디자인 기능사에서는 크게 5가지 유형의 레이아웃을 제공하고, 유형별로 4가지 레이아웃을 제공하고 있지만, 비슷비슷하기 때문에 총 5가지 유형이라고 생각하면 됩니다. 만약 내가 코딩을 조금 해봤고, 첫번째 레이아웃이 쉽다면 유형별로 하나씩 공부하시면 되고, 모르는 부분은 1~2개 더 보시면 됩니다. 만약 처음으로 코딩을 한다면, 반복적인 연습이 필요하기 때문에 20가지 유형을 다 보시는 것을 추천합니다. 코딩이라는 걸 처음 해보시는 분들은 익숙하지 않아서 어려운 부분이 많을텐데, 그냥 무심코 20개를 따라하시면, 시험장에 스스로 코딩하는 자신을 발견할 수 있을 겁니다.

그럼 시작해보겠습니다. 코딩을 하면서 정말 기초적인 부분이나 검색해서 알 수 있는 부분들은 아래 링크를 걸어두겠습니다. 주의할 점이 있다면, 이해가 안가도 그냥 하시면 됩니다. 마지막 강의를 볼 때쯤이면 다 이해가 갈거예요. 그래도 이해가 안가면 댓글 달아주세요!

1. 기본 구조 만들기

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

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

구조 만들기 : 전체적인 레이아웃을 확인하고 전체적인 구조를 만들어 보겠습니다. 이 유형은 크게 header, slider, contents, footer로 구성되어 있으며, 전체적인 영역을 감싸는 wrap으로 구성되어 있습니다. 이 부분은 body 영역에 아래와 같이 표현하겠습니다. 웹 문서에서 영역을 잡을 때는 블록구조1 태그를 이용하여 작업합니다. 

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

구조 영역 표시하기 : 전체적인 구조를 작업했으니 CSS를 통해 구조가 잘 잡혔는지 확인해보겠습니다. margin: 0 auto;는 블록구조를 가운데 정렬하기 위한 속성입니다. 마진은 박스의 바깥쪽 여백을 설정하기 위함이고, 0은 위아래, auto는 왼쪽, 오른쪽 값을 자동으로 맞추기 위함입니다. 이렇게 하면 width값이 설정된 박스는 가운데 정렬이 됩니다. 각각의 박스의 width, height, background-color을 설정해주면, 브라우저 화면에 표현이 됩니다. 

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #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. 각 섹션 작업하기

헤더 영역 작업하기 : 헤더 영역은 크게 로고와 네비게이션으로 이루어져 있습니다. logo박스와 nav박스를 만들고 width, height을 설정하고, background-color를 넣어서 영역을 확인해보겠습니다. 부모 박스인 header 속성에는 display: flex를 넣어주면, 가로로 정렬되는 것을 확인할 수 있습니다. 자식 박스에 높이 값이 있으니, 부모 박스에 높이 값과 백그라운드 색은 지워주겠습니다. 

<div id="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<!-- //header -->

#header {
    width: 100%;
    display: flex;
}
#header .logo {
    width: 20%;
    height: 100px;
    background-color: #efefef;
}
#header .nav {
    width: 80%;
    height: 100px;
    background-color: #e3e3e3;
}

슬라이드 영역 작업하기 : 슬라이드 영역은 구조상 특이 사항이 없으니, 주석 표시만하고 지나가겠습니다. 

<div id="slider"></div>
<!-- //slider -->

#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}

컨텐츠 영역 작업하기 : 컨텐츠 영역은 3개의 박스로 구성되어 있습니다. 각각의 박스에 클래스 이름2을 붙여주고, width, height, background-color를 설정하겠습니다. 

<div id="contents">
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
</div>
<!-- //contents -->

#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}

푸터 영역 작업하기 : 마지막으로 푸터 영역을 작업하겠습니다. 푸터 영역 역시 각각의 박스에 클래스 이름2을 붙여주고, width, height, background-color를 설정하겠습니다. 상위 박스 footer에 display:flex를 해주면, 가로로 정렬되는 것을 확인할 수 있습니다. 

<div id="footer">
    <div class="footer1"></div>
    <div class="footer2"></div>
    <div class="footer3"></div>
</div>
<!-- //footer -->

#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 100px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
    height: 100px;
    background-color: #a3a3a3;
}
#footer .footer3 {
    width: 20%;
    height: 100px;
    background-color: #9d9d9d;
}

3. 마무리

이렇게 하면 첫번째 레이아웃이 완성되었습니다. 첫 번째 목표는 똑같이 따라해서 똑같은 결과만 나오면 성공입니다. 무슨 말인지 잘 몰라도 따라하시기만 하면 점점 익숙해지고 이해가 될 것입니다.
기존에는 레이아웃을 float방식을 사용하였지만, 현재는 flex를 많이 사용합니다. 웹디자인 기능사 역시 크롬, 엣지로만 검사를 하기 때문에 옛날 방식 보다는 최신 방식으로 사용하여 작업하였고, 더 편합니다.

이런 기초적인 레이아웃은 이해가 되고, 알고 있다면 B유형으로 넘어가셔도 되구요. 어렵게 느끼거나 아직 전혀 모르겠다 싶으면, 순서대로 A-2유형으로 넘어가시면 됩니다. 그럼 다음 유형에서 뵙겠습니다. 수고하셨습니다. 🥰

완성 화면 완성 코드 미리보기 소스 다운로드

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바