안녕하세요! 웹스토리보이입니다 😊
이번에는 C-2 유형 레이아웃, 벌써 10번째 레이아웃을 만들어보겠습니다. 10번 정도 따라하다 보면 점점 감이 잡히는 느낌, 오시죠? 😄 처음에는 모든 걸 다 이해하려고 하기보다는, 흐름을 따라가며 반복하는 것이 더 중요합니다. 기초적인 부분을 설명할 때 모든 걸 세세히 다루진 못했지만, 계속 따라 하다 보면 자연스럽게 익숙해질 거예요.
그래도 이해가 잘 안 될 땐? 👉 검색하거나, 아니면 GTP에게 물어보면 거의 다 해결됩니다! HTML이나 CSS 속성은 방법만 알고 있으면 언제든지 필요한 정보는 검색해서 찾을 수 있어요. 그러니 모른다고 속상해하지 마세요. 중요한 건 흐름과 구조를 이해하는 거예요 💡 자, 그럼 오늘도 힘내서 만들어볼까요? 렛츠 기릿! 😣😫😔🥳
VSCODE를 실행하고 webdesign폴더 안에 layoutC-2.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 C-2으로 변경해주겠습니다.
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-2</title>
7</head>
8<body>
9
10</body>
11</html>
전체적인 구조는 왼쪽 메뉴와 콘텐츠로 구성되어 있습니다. aside와 main 영역으로 설정하겠습니다. 전체 크기는 1000px로 설정하겠습니다.
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></h1>
3 <nav></nav>
4</aside>
5<!-- //aside -->
1#aside {
2 width: 20%;
3}
4#aside h1 {
5 width: 100%;
6 height: 100px;
7 background-color: #d9d9d9;
8}
9#aside nav {
10 width: 100%;
11 height: 550px;
12 background-color: #d1d1d1;
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: 80%;
7 background-color: #838383;
8}
9#footer .footer2 {
10 width: 20%;
11}
12#footer .footer2 .footer2-1 {
13 width: 100%;
14 height: 50px;
15 background-color: #9d9d9d;
16}
17#footer .footer2 .footer2-2 {
18 width: 100%;
19 height: 50px;
20 background-color: #929292;
21}
<aside>
: 좌측 고정 메뉴 또는 보조 콘텐츠 영역.<main>
: 주요 콘텐츠 영역을 감싸는 태그.<article>
: 독립적인 콘텐츠(슬라이더, 박스 등)에 사용.<section>
: 콘텐츠 묶음이나 주제 구분 영역.<footer>
: 사이트 하단 영역. 저작권, 링크 등을 포함.display: flex
→ 수평 정렬을 위해 #wrap
, #contents
, #footer
등에 사용.width
, height
→ 각 영역의 크기를 설정. 비율 또는 고정값 사용 가능.background-color
→ 각 영역의 배경을 설정하여 시각적으로 구분.h1
, nav
) → 동일 태그 전체에 스타일 적용..footer2
, .content1
) → 반복 가능. 여러 요소에 동일 스타일 부여.#main
, #wrap
) → 유일한 요소 식별에 사용. 문서 내 한 번만 사용.aside + main
구성을 통해 과거 고정형 레이아웃을 연습했습니다.display: flex
를 통해 가로 정렬 패턴을 반복 숙달했습니다.여기까지 C-2 유형 레이아웃을 완성해보았습니다! 구조 자체는 어렵지 않지만, 선택자 사용법과 레이아웃 흐름을 복습하기에 딱 좋은 예제였죠.
반복되는 레이아웃 구성 속에서 점점 더 flex 구조와 선택자 사용이 자연스러워졌을 거예요. 이런 기초를 몸에 익히는 게 실력을 키우는 가장 빠른 길입니다!
그럼 여기서 마무리하고, 다음 C-3 유형도 바로 이어서 연습해보겠습니다. 수고하셨습니다 😊 화이팅입니다! 💪