로딩 중...
웹스토리보이1인 개발자를 위한 풀스택 빌더웹스토리보이1인 개발자를 위한 풀스택 빌더안녕하세요! 웹스토리보이입니다 😊
이번에는 C-4 유형 레이아웃을 함께 만들어보겠습니다. 기존에 작업했던 C유형들과 구조는 거의 동일하고, 푸터 구조만 약간 다르게 구성된 레이아웃이에요. 이미 익숙한 구조이기 때문에, 이번에도 빠르게 실습하면서 마무리하는 느낌으로 진행해보겠습니다. 그럼 바로 시작해볼까요? 렛츠 기릿! 💪
VSCODE를 실행하고 webdesign폴더 안에 layoutC-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 C-4으로 변경해주겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인개발기능사 레이아웃 C-4</title>
</head>
<body>
</body>
</html>
전체적인 구조는 왼쪽 메뉴와 콘텐츠로 구성되어 있습니다. aside와 main 영역으로 설정하겠습니다. 전체 크기는 1000px로 설정하겠습니다.
<body>
<div id="wrap">
<aside id="aside"></aside>
<main id="main"></main>
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
display: flex;
}
#aside {
width: 20%;
height: 650px;
background-color: #efefef;
}
#main {
width: 80%;
height: 650px;
background-color: #e3e3e3;
}
콘텐츠 구조에는 3개의 섹션이 들어가기 때문에 이 부분도 구조화 하겠습니다. 이렇게 하면 전체적인 구조가 완성된것 같습니다. 세부적으로 하나씩 작업을 들어가겠습니다.
<div id="wrap">
<aside id="aside"></aside>
<main id="main">
<article id="slider"></article>
<section id="contents"></section>
<footer id="footer"></footer>
</main>
</div>
<!-- //wrap -->
#slider {
width: 100%;
height: 350px;
background-color: #d9d9d9;
}
#contents {
width: 100%;
height: 200px;
background-color: #d1d1d1;
}
#footer {
width: 100%;
height: 100px;
background-color: #c7c7c7;
}
왼쪽 사이드 영역에는 두개의 영역이 들어갑니다. width, height, background-color를 넣어주고, 영역을 확인하겠습니다.
<aside id="aside">
<h1></h1>
<nav></nav>
</aside>
<!-- //aside -->
#aside {
width: 20%;
}
#aside h1 {
width: 100%;
height: 100px;
background-color: #d9d9d9;
}
#aside nav {
width: 100%;
height: 550px;
background-color: #d1d1d1;
}
슬라이드 영역은 별개 없으니 영역만 확인하고 넘어가겠습니다.
<article id="slider"></article>
<!-- //slider -->
#slider {
width: 100%;
height: 350px;
background-color: #c7c7c7;
}
컨텐츠 영역에는 3개의 섹션으로 구성되어 있습니다. 독립적인 주제 영역이라면, article 태그를 사용해도 괜찮습니다.
<section id="contents">
<article class="content1"></article>
<article class="content2"></article>
<article class="content3"></article>
</section>
<!-- //contents -->
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #b1b1b1;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #a3a3a3;
}
푸터 영역은 3개의 영역으로 작업하겠습니다.
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #929292;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #838383;
}
<aside> : 좌측 고정 사이드 영역으로 메뉴나 로고 배치에 사용됩니다.<main> : 주요 콘텐츠를 포함하는 메인 레이아웃 영역입니다.<article> : 독립적인 콘텐츠 블록, 예: 슬라이더 영역에 사용됩니다.<section> : 관련 콘텐츠 묶음을 표현합니다. 콘텐츠 영역에서 사용되었습니다.<footer> : 사이트 하단의 정보나 추가 콘텐츠를 배치하는 영역입니다.display: flex → 수평 정렬을 위해 #wrap, #contents, #footer에 적용되었습니다.width, height → 각 박스의 크기를 정확히 설정하여 레이아웃 분할을 구현했습니다.background-color → 각 영역의 시각적 구분을 위해 컬러를 설정해 레이아웃 구조를 쉽게 파악하도록 했습니다.20% / 60% / 20%로 나뉜 푸터 구조를 통해 비율 조절과 Flex 정렬 방식을 실습했습니다.여기까지 C-4 유형 레이아웃을 완성해보았습니다! C유형은 전체적으로 비슷한 구조를 갖고 있어 반복 학습을 통해 기본기를 다지기에 가장 좋은 유형입니다.
이번 C-4까지 완료했다면, 이제 D유형으로 넘어갈 준비가 되셨습니다! 다음 단계로 더 다양한 레이아웃을 배워보며 실력을 쌓아가볼게요 💪
수고 많으셨습니다! 다음 유형에서 또 만나요 😊