안녕하세요! 웹스토리보이입니다 😊
이번 유형도 전체 영역과 가운데 영역이 혼합된 레이아웃으로 구성되어 있습니다.
앞서 만들었던 B-1, B-2 유형에서는 각 섹션마다 개별적으로 container 스타일을 만들어 적용했었죠. 하지만 이번에는 공통된 container 클래스를 재활용해서 작업해보겠습니다. 여기서 "재활용"이란? CSS에서 클래스를 여러 번 사용할 수 있다는 의미입니다. id는 문서 내에서 한 번만 사용 가능하지만, class는 여러 요소에 반복해서 적용할 수 있어요.
그래서 웹사이트를 만들 때는 보통 큰 틀(전체 구조)은 id를 사용하고, 세부 구조나 반복되는 스타일은 class를 사용하는 것이 일반적입니다. 이번에도 함께 만들어보면서 자연스럽게 익혀볼게요! 렛츠 기릿! 😇
VSCODE를 실행하고 webdesign폴더 안에 layoutB-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 B-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>웹디자인개발기능사 레이아웃 B-3</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 레이아웃을 먼저 만들겠습니다.
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를 설정하였습니다. width값을 100%를 설정하고, height값과 background-color을 넣어서 영역을 확인하겠습니다.
1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#header {
9 width: 100%;
10 height: 100px;
11 background-color: #efefef;
12}
13#slider {
14 width: 100%;
15 height: 300px;
16 background-color: #e3e3e3;
17}
18#contents {
19 width: 100%;
20 height: 200px;
21 background-color: #d9d9d9;
22}
23#footer {
24 width: 100%;
25 height: 100px;
26 background-color: #d1d1d1;
27}각 섹션의 전체영역과 가운데 영역을 만들겠습니다. 재활용이 가능한 클래스를 사용하여 가운데 영역을 만들겠습니다.
1<body>
2 <div id="wrap">
3 <header id="header">
4 <div class="container"></div>
5 </header>
6 <!-- //header -->
7
8 <article id="slider">
9 <div class="container"></div>
10 </article>
11 <!-- //slider -->
12
13 <main id="contents">
14 <div class="container"></div>
15 </main>
16 <!-- //contents -->
17
18 <footer id="footer">
19 <div class="container"></div>
20 </footer>
21 <!-- //footer -->
22 </div>
23 <!-- //wrap -->
24</body>container영역은 재활용 되는 부분이기 때문에 height 값은 부모 박스한테 상속을 받고 가운데 정렬을 위하여 margin: 0 auto;를 사용합니다. 영역 확인을 위해 백그라운드는 rgba를 이용하여 작업하면 투명도 설정이 가능합니다. 컨테이너 박스 자식들은 가로 정렬이 필요하기 때문에 flex도 미리 넣어주겠습니다.
1.container {
2 width: 1200px;
3 height: inherit;
4 margin: 0 auto;
5 background-color: rgba(0,0,0,0.2);
6 display: flex;
7}헤더 영역은 전체 영역과 가운데 영역을 설정해야 합니다. container속성은 재사용이 가능하니 한번만 쓰면 됩니다. 헤더 영역에는 로고 영역과 메뉴 영역을 설정합니다.
1<header id="header">
2 <div class="container">
3 <h1 class="logo"></h1>
4 <nav class="nav"></nav>
5 </div>
6</header>
7<!-- //header -->1#header {
2 width: 100%;
3 height: 100px;
4 background-color: #efefef;
5}
6#header .container .logo {
7 width: 20%;
8 height: 100px;
9 background-color: #c7c7c7;
10}
11#header .container .nav {
12 width: 80%;
13 height: 100px;
14 background-color: #bcbcbc;
15}슬라이드 영역은 width값과 height을 설정하면 됩니다.
1<article id="slider">
2 <div class="container"></div>
3</article>
4<!-- //slider -->1#slider {
2 width: 100%;
3 height: 300px;
4}컨텐츠 영역도 전체 색만 빼주고 작업하겠습니다. 처음에는 전체 영역과 가운데 영역을 나누어서 작업을 했지만, 여기서 색만 빼서 티 안나게 하겠습니다. 컨텐츠 영역에는 자식 요소 3개를 만들고 영역을 만들겠습니다.
1<main id="contents">
2 <div class="container">
3 <section class="content1"></section>
4 <section class="content2"></section>
5 <section class="content3"></section>
6 </div>
7</main>
8<!-- //contents -->1#contents {
2 width: 100%;
3}
4#contents .container .content1 {
5 width: 33.3333%;
6 height: 200px;
7 background-color: #bcbcbc;
8}
9#contents .container .content2 {
10 width: 33.3333%;
11 height: 200px;
12 background-color: #b1b1b1;
13}
14#contents .container .content3 {
15 width: 33.3333%;
16 height: 200px;
17 background-color: #a3a3a3;
18}푸터 영역도 전체 영역과 가운데 영역으로 나누어서 작업하겠습니다. container를 설정하고 자식으로 3개의 박스를 넣겠습니다. 이미 flex가 설정되어 있으니 width와 height만 설정하면 영역이 잡힐것입니다.
1<footer id="footer">
2 <div class="container">
3 <div class="footer1"></div>
4 <div class="footer2"></div>
5 <div class="footer3"></div>
6 </div>
7</footer>
8<!-- //footer -->1#footer {
2 width: 100%;
3 background-color: #d1d1d1;
4}
5#footer .container .footer1 {
6 width: 20%;
7 height: 100px;
8 background-color: #9d9d9d;
9}
10#footer .container .footer2 {
11 width: 60%;
12 height: 100px;
13 background-color: #929292;
14}
15#footer .container .footer3 {
16 width: 20%;
17 height: 100px;
18 background-color: #838383;
19}<header> : 페이지의 상단 구조. 로고와 내비게이션을 포함.<article> : 독립된 콘텐츠 단위. 슬라이드 등 의미 있는 콘텐츠에 사용.<main> : 문서의 중심 콘텐츠. 페이지당 한 번만 사용.<section> : 논리적으로 묶인 콘텐츠 블록.<footer> : 페이지 하단 정보, 링크, 저작권 등의 영역.width: 100% → 브라우저 전체 너비를 채우는 기본 구조 설정.margin: 0 auto → 고정 너비 요소를 수평 가운데 정렬.height: inherit → 부모 요소의 높이를 자식에게 그대로 적용.background-color: rgba() → 배경색에 투명도를 적용하여 구조를 시각적으로 구분.display: flex → 자식 요소를 가로 방향으로 정렬할 때 사용.이름표기법 : red, blue, green 등 기본 색상 이름16진수 : #ff0000 (빨강), #0000ff (파랑) 등RGB : rgb(255, 0, 0) (빨강), rgb(0, 0, 255) (파랑)RGBA : rgba(0, 0, 0, 0.2)처럼 투명도까지 설정 가능HSL / HSLA : 색상, 채도, 밝기로 표현. 예: hsl(120, 100%, 50%).container 클래스는 가운데 정렬, 고정 폭, flex 정렬 등의 공통 속성을 포함합니다..container 클래스를 통해 재사용 가능한 CSS 설계를 경험했습니다.수고하셨습니다! 이번 B-3 유형을 통해효율적인 CSS 클래스 활용법과반복되는 레이아웃 구조의 설계 방식을 연습해보았습니다.
container 클래스를 한 번 정의해 여러 곳에서 사용하는 방법은 앞으로 프로젝트를 할 때도 매우 유용하게 쓰일 거예요. 직접 코드로 작성해보며 익숙해지는 것이 가장 중요합니다. 여러 번 반복해서 연습해보세요 💪
다음 유형도 더욱 알차게 준비했으니 기대해 주세요! 고생 많으셨습니다 😊