2024. 11. 15. 09:58ㆍ웹개발
HTML과 CSS를 사용해 `div` 태그로 좌우를 반으로 나누는 방법을 소개하는 블로그 글을 작성해 보겠습니다. 화면을 좌우로 나누는 디자인은 웹 페이지의 배경을 나누거나 좌우 콘텐츠를 배치할 때 유용하게 사용할 수 있습니다. 이 글에서는 `flexbox`, `grid`, 그리고 단순한 `float`를 활용한 몇 가지 방법을 다루겠습니다.
---
# HTML/CSS로 `div` 태그 좌우 반으로 나누기
웹 페이지에서 화면을 좌우로 나누는 레이아웃은 콘텐츠의 시각적 분리를 강조하거나 배경을 다양하게 표현할 수 있는 유용한 방법입니다. 이번 포스팅에서는 `flexbox`, `grid`, `float`를 활용하여 `div` 태그를 좌우로 나누는 방법을 설명하겠습니다.
## 1. `flexbox`로 좌우 나누기
`flexbox`는 요소를 수평 또는 수직 방향으로 정렬하기 매우 유용한 방법입니다. 다음 예제에서는 `display: flex` 속성을 사용하여 화면을 좌우로 50%씩 나누겠습니다.
### HTML 코드
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 좌우 나누기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">Left Side</div>
<div class="right">Right Side</div>
</div>
</body>
</html>
```
### CSS 코드
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.container {
display: flex;
height: 100vh; /* 화면 전체 높이 */
}
.left, .right {
flex: 1; /* 좌우 비율 1:1 */
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: white;
}
.left {
background-color: #4CAF50; /* 초록색 배경 */
}
.right {
background-color: #2196F3; /* 파란색 배경 */
}
```
### 설명
- `display: flex`를 사용하여 `.container` 내부의 요소를 수평으로 정렬합니다.
- 각 `div`의 `flex: 1` 속성을 통해 좌우가 50%씩 차지하게 설정했습니다.
- `height: 100vh`로 화면 전체 높이를 차지하도록 하였고, `align-items: center`와 `justify-content: center`로 가운데 정렬했습니다.
---
## 2. `grid`로 좌우 나누기
CSS Grid는 화면을 쉽게 나눌 수 있는 기능을 제공합니다. 여기서는 `grid-template-columns` 속성을 사용하여 화면을 50%씩 분할하는 방법을 설명합니다.
### HTML 코드
```html
<div class="grid-container">
<div class="grid-left">Left Side</div>
<div class="grid-right">Right Side</div>
</div>
```
### CSS 코드
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 1:1 비율로 좌우 나누기 */
height: 100vh;
}
.grid-left, .grid-right {
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: white;
}
.grid-left {
background-color: #FF5722; /* 주황색 배경 */
}
.grid-right {
background-color: #03A9F4; /* 파란색 배경 */
}
```
### 설명
- `display: grid`와 `grid-template-columns: 1fr 1fr`을 사용하여 `.grid-container`를 1:1 비율로 좌우 분할합니다.
- `1fr`은 남은 공간을 각각의 열이 동일하게 나누어 가지도록 하는 단위입니다.
- `height: 100vh`로 화면 높이를 100% 차지하게 만들었습니다.
---
## 3. `float` 속성으로 좌우 나누기
과거에 주로 사용하던 `float` 속성을 활용해 좌우로 나누는 방법입니다. 이 방법은 반응형 디자인에서 제한적일 수 있지만, 간단한 레이아웃에서는 유용합니다.
### HTML 코드
```html
<div class="float-container">
<div class="float-left">Left Side</div>
<div class="float-right">Right Side</div>
</div>
```
### CSS 코드
```css
.float-container {
overflow: hidden;
height: 100vh;
}
.float-left, .float-right {
width: 50%;
height: 100vh;
float: left;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: white;
}
.float-left {
background-color: #9C27B0; /* 보라색 배경 */
}
.float-right {
background-color: #E91E63; /* 핑크색 배경 */
}
```
### 설명
- `.float-container`에 `overflow: hidden`을 적용하여 `float`로 인한 레이아웃 문제를 해결했습니다.
- `float: left`로 `.float-left`와 `.float-right` 요소를 각각 왼쪽에 배치하여 좌우로 나눕니다.
- `width: 50%`를 통해 각각의 너비를 50%로 설정했습니다.
---
## 마무리
이 포스팅에서는 `flexbox`, `grid`, `float`을 사용하여 `div` 태그를 좌우 반으로 나누는 방법을 알아보았습니다. 각각의 방법은 구현 목적에 따라 선택할 수 있으며, 최신 레이아웃을 구현할 때는 `flexbox`나 `grid`를 사용하는 것이 권장됩니다.
이번 튜토리얼이 다양한 레이아웃을 구성하는 데 도움이 되었길 바랍니다!
'웹개발' 카테고리의 다른 글
| tailwind로 만드는 키오스크 (1) | 2024.11.12 |
|---|---|
| 스프링 부트 jwt mybatis 연동 설정 (5) | 2024.11.11 |
| 무료 클라우드 서비스 (1) | 2024.06.11 |
| MSSQL 대용량 데이터 삭제 (0) | 2023.10.16 |
| 자바 쿠키 설정 JAVA COOKIE (0) | 2023.09.13 |