안녕하세요, 웹스토리보이입니다. 지금부터 레이아웃 연습을 시작하겠습니다. 레이아웃은 A유형부터 F유형까지 총 6가지가 있으며, 각 유형을 하나씩 연습해보겠습니다. 실제 사이트 제작 시 자주 활용되는 구조이기 때문에 기본기를 탄탄히 익혀두면 큰 도움이 됩니다. 특히 레이아웃은 웹 코딩의 핵심이자 기초이므로, 완벽히 이해하고 익혀두면 어떤 유형도 문제없이 구현할 수 있습니다.
웹디자인개발기능사 시험에서는 총 6가지 유형의 레이아웃이 제시되며, 각 유형마다 4가지 형태가 포함되어 있습니다. 실제로는 유사한 구성들이 많아 유형별로 1~2개씩만 연습해도 충분하지만, 처음 코딩을 접하는 분이라면 반복적인 학습이 중요합니다. 따라서 24개 전체 유형을 모두 따라해보는 것을 추천드립니다. 처음에는 어렵게 느껴질 수 있지만, 꾸준히 따라하다 보면 시험장에서 스스로 코딩을 완성하고 있는 자신을 발견하게 될 것입니다.
VSCODE를 실행하고 webdesign폴더를 만들고 layoutA-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 A-1으로 변경해주겠습니다.
1<!DOCTYPE html>
2<html lang="ko">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>웹디자인개발기능사 레이아웃 A-1</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 레이아웃을 확인하고 전체적인 구조를 만들어 보겠습니다.
이 유형은 크게 header, slider, contents, footer로 구성되어 있으며, 전체적인 영역을 감싸는 wrap으로 구성되어 있습니다. 이 부분은 body 영역에 아래와 같이 표현하겠습니다. 웹 문서에서 영역을 잡을 때는 블록구조 태그를 이용하여 작업합니다.
1<body>
2 <div id="wrap">
3 <div id="header"></div>
4 <div id="slider"></div>
5 <div id="contents"></div>
6 <div id="footer"></div>
7 </div>
8</body>전체적인 구조를 작업했으니 CSS를 통해 구조가 잘 잡혔는지 확인해보겠습니다.
margin: 0 auto;는 블록구조를 가운데 정렬하기 위한 속성입니다. 마진은 박스의 바깥쪽 여백을 설정하기 위함이고, 0은 위아래, auto는 왼쪽, 오른쪽 값을 자동으로 맞추기 위함입니다. 이렇게 하면 width값이 설정된 박스는 가운데 정렬이 됩니다. 각각의 박스의 width, height, background-color을 설정해주면, 브라우저 화면에 표현이 됩니다.
1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 1200px;
7 margin: 0 auto;
8}
9#header {
10 width: 100%;
11 height: 100px;
12 background-color: #efefef;
13}
14#slider {
15 width: 100%;
16 height: 300px;
17 background-color: #e3e3e3;
18}
19#contents {
20 width: 100%;
21 height: 200px;
22 background-color: #d9d9d9;
23}
24#footer {
25 width: 100%;
26 height: 100px;
27 background-color: #d1d1d1;
28}헤더 영역은 크게 로고와 네비게이션으로 이루어져 있습니다.
logo박스와 nav박스를 만들고 width, height을 설정하고, background-color를 넣어서 영역을 확인해보겠습니다. 부모 박스인 header 속성에는 display: flex를 넣어주면, 가로로 정렬되는 것을 확인할 수 있습니다. 자식 박스에 높이 값이 있으니, 부모 박스에 높이 값과 백그라운드 색은 지워주겠습니다.
1<div id="header">
2 <div class="logo"></div>
3 <div class="nav"></div>
4</div>
5<!-- //header -->1#header {
2 width: 100%;
3 display: flex;
4}
5#header .logo {
6 width: 20%;
7 height: 100px;
8 background-color: #efefef;
9}
10#header .nav {
11 width: 80%;
12 height: 100px;
13 background-color: #e3e3e3;
14}슬라이드 영역은 구조상 특이 사항이 없으니, 주석 표시만하고 지나가겠습니다.
1<div id="slider"></div>
2<!-- //slider -->1#slider {
2 width: 100%;
3 height: 300px;
4 background-color: #d9d9d9;
5}컨텐츠 영역 작업하기 : 컨텐츠 영역은 3개의 박스로 구성되어 있습니다.
각각의 박스에 클래스 이름2을 붙여주고, width, height, background-color를 설정하겠습니다.
1<div id="contents">
2 <div class="content1"></div>
3 <div class="content2"></div>
4 <div class="content3"></div>
5</div>
6<!-- //contents -->1#contents {
2 width: 100%;
3 display: flex;
4}
5#contents .content1 {
6 width: 33.3333%;
7 height: 200px;
8 background-color: #d1d1d1;
9}
10#contents .content2 {
11 width: 33.3333%;
12 height: 200px;
13 background-color: #c7c7c7;
14}
15#contents .content3 {
16 width: 33.3333%;
17 height: 200px;
18 background-color: #bcbcbc;
19}푸터 영역 작업하기 : 마지막으로 푸터 영역을 작업하겠습니다.
푸터 영역 역시 각각의 박스에 클래스 이름2을 붙여주고, width, height, background-color를 설정하겠습니다. 상위 박스 footer에 display:flex를 해주면, 가로로 정렬되는 것을 확인할 수 있습니다.
1<div id="footer">
2 <div class="footer1"></div>
3 <div class="footer2"></div>
4 <div class="footer3"></div>
5</div>
6<!-- //footer -->1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 100px;
8 background-color: #b1b1b1;
9}
10#footer .footer2 {
11 width: 60%;
12 height: 100px;
13 background-color: #a3a3a3;
14}
15#footer .footer3 {
16 width: 20%;
17 height: 100px;
18 background-color: #9d9d9d;
19}이렇게 첫 번째 레이아웃이 완성되었습니다. 처음 목표는 단순합니다. 무슨 말인지 완벽히 이해하지 못해도 괜찮습니다. 일단 똑같이 따라 해서 같은 결과만 만들어내면 성공입니다. 연습을 거듭하다 보면 자연스럽게 익숙해지고, 점점 이해가 깊어질 거예요.
예전에는 레이아웃을 만들 때 float 방식을 많이 사용했지만, 요즘은 flex 레이아웃을 주로 사용합니다. 웹디자인개발기능사 시험 역시 크롬과 엣지 브라우저에서만 검사하기 때문에, 최신 방식인 flex를 사용하는 것이 훨씬 편리하고 효율적입니다.
만약 이런 기본 레이아웃이 충분히 이해되고 자신 있다면 바로 B유형으로 넘어가셔도 좋습니다. 반대로 아직 어렵거나 조금 더 연습이 필요하다고 느껴진다면, 순서대로A-2 유형부터 차근차근 따라오시면 됩니다.
수고 많으셨습니다! 다음 유형에서 다시 만나요. 🥰