안녕하세요! 웹스토리보이입니다. 오늘은 A유형의 마지막, A-4 유형 레이아웃을 만들어보겠습니다.
이번 A-4 유형도 A-3 유형과 구조는 거의 같습니다. 단지 푸터 영역의 배치 방식만 약간 다를 뿐, 전체적인 틀은 동일하다고 생각하시면 됩니다. 이제까지 여러 유형을 함께 만들어봤으니, 이번에는 스스로 먼저 도전해보고 완성한 뒤에 저와 함께 코드를 비교하며 확인하는 방식을 추천드립니다. ✨ 직접 해보면서 어떤 부분이 달랐는지, 어떤 부분은 잘 따라갔는지 체크해보는 과정이 실력을 확 끌어올리는 데 큰 도움이 될 거예요.
자, 준비되셨나요? 그럼 바로 시작해봅시다! 고고! 😗
VSCODE를 실행하고 webdesign폴더 안에 layoutA-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 A-3으로 변경해주겠습니다.
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-4</title>
7</head>
8<body>
9
10</body>
11</html>이제 전체적인 레이아웃 구조를 만들어보겠습니다. 우선, 페이지 전체를 감싸는 wrap 요소를 만들고, 그 안에 header, slider, contents, footer 영역을 차례대로 배치하겠습니다.
참고로, 슬라이드 영역에는 저는 이번에 article 태그를 사용했습니다. 하지만 꼭 article이어야 하는 것은 아닙니다. section 태그를 사용해도 전혀 문제없어요!
중요한 것은 "이 영역이 어떤 의미를 갖는지“를 기준으로 태그를 선택하는 것입니다. 즉, 사용자가 생각하기에 의미가 적절하다면 어떤 시멘틱 태그를 사용해도 괜찮습니다.
태그 선택에 너무 정답을 강박처럼 느끼지 마세요. 의미를 고려해서 자연스럽게 태그를 골라주시면 됩니다. 😉
1<body>
2 <div id="wrap">
3 <header id="header"></header>
4 <article id="slider"></article>
5 <main id="contents"></main>
6 <footer id="footer"></footer>
7 </div>
8</body>각 섹션별로 영역이 제대로 잡혔는지 표시하기 위해 width, height, background-color를 설정하였습니다. 블록 구조를 가운데 정렬하기 위해 margin: 0 auto를 사용하였습니다
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}헤더 영역도 두개의 영역으로 구성되어 있습니다. 간단하게 다음과 같이 설정하겠습니다. 참고는 flex는 부모와 자식관계에서만 적용됩니다. 부모의 부모한테는 적용이 안되요!
1<div id="header">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
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개의 섹션으로 구성되어 있어 섹션 태그를 사용하여 작업하였습니다. 이름은 편의를 위해 content로 통일하여 작업하였습니다. 실제 서비스되는 사이트라면 그 해당 섹션 이름에 맞게 작성해주는게 좋습니다.
1<main id="contents">
2 <section class="content1"></section>
3 <section class="content2"></section>
4 <section class="content3"></section>
5</main>
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개의 영역으로 먼저 만들겠습니다. footer1과 footer2를 먼저 만들고, 영역이 완성되었다면, footer1-1와 footer1-2를 만들면 됩니다. 하나씩 작업하면 어렵지 않습니다.
1<footer id="footer">
2 <div class="footer1">
3 <div class="footer1-1"></div>
4 <div class="footer1-2"></div>
5 </div>
6 <div class="footer2"></div>
7</footer>
8<!-- //footer -->1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 80%;
7}
8#footer .footer1 .footer1-1 {
9 width: 100%;
10 height: 50px;
11 background-color: #b1b1b1;
12}
13#footer .footer1 .footer1-2 {
14 width: 100%;
15 height: 50px;
16 background-color: #a3a3a3;
17}
18#footer .footer2 {
19 width: 20%;
20 height: 100px;
21 background-color: #d9d9d9;
22}display: flex → 가로 배치를 위한 핵심 속성. header, contents, footer 등 레이아웃에 적용.margin: 0 auto → 전체 페이지 중앙 정렬. wrap에 적용.width, height → 각 영역의 크기 지정. 시각적 구조 확인에 필수.background-color → 영역 구분 확인용 색상 설정. 연습 시 가시성 확보.#wrap : 전체 레이아웃을 감싸는 메인 컨테이너 역할.#header, #slider, #contents, #footer : 시멘틱 구조별 주요 영역.div와 flex 조합으로 충분히 구현 가능함을 체험.A-4 유형까지 완성하신 여러분, 정말 잘 해주셨습니다! 🥳
처음에는 생소하고 복잡하게 느껴졌을지라도, 지금쯤은 어느 정도 패턴이 보이고, 손에 익기 시작했을 것이라고 확신합니다.
이제부터는 A유형에서 익힌 패턴을 응용해서 B유형, C유형, D유형으로 확장해 나갈 차례입니다. 복습을 게을리하지 말고, 작은 차이점도 눈여겨보면서 조금씩 자신만의 속도로 성장해나가 봅시다. 포기하지 않고 계속 따라오는 것만으로도 이미 반 이상 성공한 것입니다. 이제 우리는 다음 레벨로 넘어갈 준비가 되어있습니다.
그럼 B유형에서 다시 만나요! 렛츠기릿! 🚀