CSS div 영역 나누기 예제
CSS를 사용하여 웹 페이지에서 `div` 요소를 사용하여 영역을 나누는 방법을 설명해 드리겠습니다. `div`는 웹 페이지의 구조를 정의하는 데 사용되는 블록 수준 요소입니다. 다음은 간단한 예시를 통해 설명하겠습니다.
예를 들어, 웹 페이지에 헤더(header), 내용(content), 사이드바(sidebar) 및 푸터(footer)를 포함한 기본적인 레이아웃이 있다고 가정해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Layout</title>
<style>
/* 스타일을 통해 레이아웃을 조정 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 헤더 스타일 */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 내용 스타일 */
.content {
padding: 20px;
float: left; /* 왼쪽으로 부유시킴 */
width: 70%; /* 전체 너비의 70% */
}
/* 사이드바 스타일 */
.sidebar {
background-color: #f4f4f4;
padding: 20px;
float: left; /* 왼쪽으로 부유시킴 */
width: 30%; /* 전체 너비의 30% */
}
/* 푸터 스타일 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
clear: both; /* float 무시 */
text-align: center;
}
</style>
</head>
<body>
<!-- 헤더 -->
<header>
<h1>Header</h1>
</header>
<!-- 내용 -->
<div class="content">
<h2>Content</h2>
<p>This is the main content of the page.</p>
</div>
<!-- 사이드바 -->
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar content.</p>
</div>
<!-- 푸터 -->
<footer>
<p>Footer</p>
</footer>
</body>
</html>
위 코드에서는 다음을 수행합니다:
1. `header`, `content`, `sidebar`, `footer`에 해당하는 각각의 영역을 `div` 요소로 정의합니다.
2. CSS를 사용하여 각 요소에 스타일을 적용하여 원하는 디자인을 구현합니다.
3. `float` 속성을 사용하여 `content`와 `sidebar`를 옆으로 부유시킵니다. 이렇게 함으로써 내용과 사이드바를 옆으로 나란히 배치할 수 있습니다.
4. `clear: both;`를 사용하여 푸터를 float 속성을 무시하고 페이지의 하단에 배치합니다.
이렇게하면 헤더, 내용, 사이드바 및 푸터를 포함하는 기본 레이아웃이 생성됩니다. 이러한 기본 레이아웃을 사용하여 복잡한 웹 페이지를 만들 수 있습니다. 필요에 따라 레이아웃을 수정하고 스타일을 조정하여 원하는 디자인을 만들 수 있습니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| 인터넷 속도 빠르게 하려면? (1) | 2024.03.22 |
|---|---|
| Jsp 게시판 만들기(코드 포함) (0) | 2024.03.20 |
| React로 어플리케이션 개발해서 배포하는 방법 (0) | 2024.03.18 |
| Jsp JavaBean이란? (feat. 액션태그 jsp:useBean ) (0) | 2024.03.14 |
| JQuery dialog()란? (0) | 2024.03.13 |