안녕하세요! 웹스토리보이입니다 😊
이번에는 C유형 레이아웃을 함께 만들어보겠습니다. C유형은 2000년대 초반에 많이 사용되던 구조로, 가운데 정렬이 아닌 왼쪽 정렬 방식으로 구성된 것이 특징입니다. 사이트 전체가 왼쪽에 고정되고, 그 안에 콘텐츠들이 배치되는 구조죠. 이 레이아웃은 2023년 버전 개정 전에 사용되던 방식이라 최근 레이아웃들에 비해 비교적 단순하고 쉬운 편이에요.
그럼 빠르게 정리하고, 다음 D유형으로 넘어가볼게요! 렛츠 기릿! 💨
VSCODE를 실행하고 webdesign폴더 안에 layoutC-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 C-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>웹디자인개발기능사 레이아웃 C-1</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 구조는 왼쪽 메뉴와 콘텐츠로 구성되어 있습니다. aside와 main 영역으로 설정하겠습니다.
1<body>
2 <div id="wrap">
3 <aside id="aside"></aside>
4 <main id="main"></main>
5 </div>
6 <!-- //wrap -->
7</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 1000px;
7 display: flex;
8}
9#aside {
10 width: 20%;
11 height: 650px;
12 background-color: #efefef;
13}
14#main {
15 width: 80%;
16 height: 650px;
17 background-color: #e3e3e3;
18}콘텐츠 구조에는 3개의 섹션이 들어가기 때문에 이 부분도 구조화 하겠습니다. 이렇게 하면 전체적인 구조가 완성된것 같습니다. 세부적으로 하나씩 작업을 들어가겠습니다.
1<div id="wrap">
2 <aside id="aside"></aside>
3 <main id="main">
4 <article id="slider"></article>
5 <section id="contents"></section>
6 <footer id="footer"></footer>
7 </main>
8</div>
9<!-- //wrap -->1#slider {
2 width: 100%;
3 height: 350px;
4 background-color: #d9d9d9;
5}
6#contents {
7 width: 100%;
8 height: 200px;
9 background-color: #d1d1d1;
10}
11#footer {
12 width: 100%;
13 height: 100px;
14 background-color: #c7c7c7;
15}왼쪽 사이드 영역에는 두개의 영역이 들어갑니다. width, height, background-color를 넣어주고, 영역을 확인하겠습니다.
1<aside id="aside">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
4</aside>
5<!-- //aside -->1#aside {
2 width: 20%;
3}
4#aside .logo {
5 width: 100%;
6 height: 100px;
7 background-color: #efefef;
8}
9#aside .nav {
10 width: 100%;
11 height: 550px;
12 background-color: #d9d9d9;
13}슬라이드 영역은 별개 없으니 영역만 확인하고 넘어가겠습니다.
1<article id="slider">
2</article>
3<!-- //slider -->1#slider {
2 width: 100%;
3 height: 350px;
4 background-color: #c7c7c7;
5}컨텐츠 영역에는 3개의 섹션으로 구성되어 있습니다. 독립적인 주제 영역이라면, article 태그를 사용해도 괜찮습니다.
1<section id="contents">
2 <article class="content1"></article>
3 <article class="content2"></article>
4 <article class="content3"></article>
5</section>
6<!-- //contents -->1#contents {
2 width: 100%;
3 display: flex;
4}
5#contents .content1 {
6 width: 33.3333%;
7 height: 200px;
8 background-color: #bcbcbc;
9}
10#contents .content2 {
11 width: 33.3333%;
12 height: 200px;
13 background-color: #b1b1b1;
14}
15#contents .content3 {
16 width: 33.3333%;
17 height: 200px;
18 background-color: #a3a3a3;
19}푸터 영역은 두개의 영역으로 나누고, 두번째 영역에 두개의 영역으로 만들겠습니다.
1<footer id="footer">
2 <div class="footer1"></div>
3 <div class="footer2">
4 <div class="footer2-1"></div>
5 <div class="footer2-2"></div>
6 </div>
7</footer>1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 100px;
8 background-color: #9d9d9d;
9}
10#footer .footer2 {
11 width: 80%;
12}
13#footer .footer2 .footer2-1 {
14 width: 100%;
15 height: 50px;
16 background-color: #929292;
17}
18#footer .footer2 .footer2-2 {
19 width: 100%;
20 height: 50px;
21 background-color: #838383;
22}<aside> : 사이드바 역할을 하며, 보통 좌측 고정 메뉴에 사용됩니다.<main> : 문서의 주요 콘텐츠 영역을 감싸는 태그로, 한 문서에 한 번만 사용합니다.<article> : 독립적인 콘텐츠 단위(예: 슬라이더 등)에 사용됩니다.<section> : 주제별로 묶이는 콘텐츠 그룹을 나타냅니다.<footer> : 페이지의 하단 정보를 구성하는 영역입니다.display: flex → 요소들을 가로로 정렬할 때 사용. #wrap과 #contents, #footer에 적용됨.width → 전체 또는 일부 영역의 너비를 지정. 퍼센트(%)로 비율 조절 가능.height → 각 섹션의 높이를 설정해 전체 구조를 시각적으로 구분.background-color → 각 영역의 배경색을 지정해 구조 확인을 쉽게 함.aside + main을 사용해 양옆 배치를 구성하고, display: flex를 통해 수평 정렬을 구현했습니다.수고하셨습니다! 🎉 이번 C유형은 최근 레이아웃과는 다르게 왼쪽 정렬이라는 고정형 스타일을 사용했지만, 레이아웃의 기본 구조를 이해하고 정리하는 데 아주 좋은 예제였습니다.
이제 D유형으로 넘어가면 조금 더 다양한 구조와 응용이 나올 예정이에요. 다양한 형태의 실전 레이아웃을 익히는 과정이니 기대하셔도 좋습니다!
여기까지 따라오신 여러분 정말 고생 많으셨고, 다음 단계도 저와 함께 차근차근 만들어보아요! 😄