300x250
CSS Flexbox는 복잡한 레이아웃을 간단하고 직관적으로 구성할 수 있는 강력한 도구입니다.
이번 글에서는 Flexbox의 기본 개념과 실제 적용 사례를 다루며, 다양한 레이아웃을 직접 만들어 보겠습니다.
준비물
- HTML 및 CSS 기본 지식
- 텍스트 편집기(예: VS Code)
- 브라우저(예: Chrome, Edge)
Flexbox의 주요 개념
- 컨테이너와 아이템
Flexbox는 부모 요소를 컨테이너로 설정하고, 자식 요소를 아이템으로 취급합니다.
Flexbox를 사용할려면 display: flex; 스타일 속성을 추가해주어야 합니다. - 주요 속성
- justify-content: 주 축 방향 정렬
- align-items: 교차 축 방향 정렬
- flex-wrap: 아이템 줄바꿈 설정
크롬의 개발자도구를 통해 주요 속성을 변경하며 실습해 보세요.
소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 레이아웃</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
text-align: center;
padding: 20px;
background: #0078d7;
color: white;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 20px;
background: #f4f4f4;
}
.box {
background: #0078d7;
color: white;
padding: 20px;
margin: 10px;
width: 100px;
text-align: center;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<h1>CSS Flexbox 레이아웃</h1>
</header>
<main class="container">
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
<div class="box" style="height: 50px;">1</div>
<div class="box" style="height: 100px;">2</div>
<div class="box" style="height: 75px;">3</div>
</main>
</body>
</html>300x250
'IT > IT 인터넷' 카테고리의 다른 글
| [자바스크립트] 태그 안 문자를 버튼 클릭으로 바꾸기 (1) | 2025.02.14 |
|---|---|
| 오라클 DB에서 첫 번째 조회는 되나 두 번째 조회는 되지 않는 문제 (0) | 2025.01.22 |
| HTML과 CSS로 개인 프로필 페이지 만들기 (0) | 2025.01.17 |
| 웹 페이지 언어설정과 툴팁 [lang속성, title속성] (0) | 2021.09.22 |
| 기본태그 [h태그, p태그, a태그, img태그] (0) | 2021.09.22 |