웹 페이지 요소들을 쉽고 유연하게 배치할 수 있도록 도와주는 CSS 레이아웃 방식이다. Flexbox를 사용하면 화면 크기나 요소의 크기가 변해도 각 요소를 정렬하고 배치하는 것이 아주 간단하다.
주요 특징
1. 유연한 배치 : 요소의 크기나 순서를 유연하게 조절할 수 있다.
2. 간단한 정렬 : 복잡한 계산 없이 요소를 수평 및 수직으로 쉽게 정렬할 수 있다.
3. 반응형 디자인 : 화면 크기가 변해도 레이아웃이 자동으로 조정된다.
주요 개념
Flex 컨테이너 : Flexbox를 적용할 부모 요소
Flex 아이템 : Flex 컨테이너 안에 있는 자식 요소들
FlexBox의 두 개의 축
flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 한다. 주축(main axis)의 방향과 교차축(cross axis)의 방향을 결정하는 flex-direction 이라는 속성이 있다. flex-direction의 기본값은 row이다.
1. 주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향이다. flex-direction:row인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 된다.
2. 교차축 방향(cross axis) : Flex container의 주축에 직각을 이루는 축으로 주축이 수평이며 교차축은 수직 방향이 된다.
flex-direction 속성
주 축의 방향을 설정한다.
| row | 아이템들을 수평으로 배치한다.(기본값) |
| row-reverse | 아이템들을 수평으로 배치하되, 반대 방향으로 배치한다. |
| column | 아이템들을 수직으로 배치한다. |
| column-reverse | 아이템들을 수직으로 배치하되, 반대 방향으로 배치한다. |
시나리오 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>인라인 블록 요소 예시</title>
<style type="text/css">
.container {
display: flex;
border: 1px solid black;
flex-direction: row;
}
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- http://localhost:8080/demo1/demo_03.html -->
<h1>여기는 demo_03.html 파일입니다.</h1>
<br>
<h3>flex-direction : row(기본값)</h3>
<div class="container">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
</div>
<h3>flex-direction : row-reverse</h3>
<div class="container" style="flex-direction: row-reverse;">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
</div>
<h3>flex-direction : column</h3>
<div class="container" style="flex-direction: column;">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
</div>
<h3>flex-direction : column-reverse</h3>
<div class="container" style="flex-direction: column-reverse;">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
<style type="text/css">
.navbar {
display: flex;
border: 1px solid black;
background-color: #f8f9fa;
padding: 10px;
}
.nav-item {
margin: 5px;
padding: 10px;
background-color: lightblue;
color: white;
text-align: center;
text-decoration: none;
border-radius: 6px;
}
.navbar2 {
border: 1px solid black;
background-color: #f8f9fa;
padding: 10px;
}
.nav-item2 {
display: block;
margin: 5px;
padding: 10px;
background-color: lightblue;
color: white;
text-align: center;
text-decoration: none;
border-radius: 6px;
}
.section {
border: 1px solid #333;
padding: 20px 10px;
height: 300px;
margin: 10px 0;
}
</style>
</head>
<body>
<!-- http://localhost:8080/demo1/demo_04.html -->
<h1>여기는 demo_04.html 파일입니다.</h1>
<br>
<h2>flex-direction:row(기본값)</h2>
<div class="navbar">
<a href="#home" class="nav-item">홈</a> <a href="#about"
class="nav-item">소개</a> <a href="#services" class="nav-item">서비스</a>
<a href="#contact" class="nav-item">연락처</a>
</div>
<h2>flex-direction:column</h2>
<div class="navbar2">
<a href="#home" class="nav-item2">홈</a> <a href="#about"
class="nav-item2">소개</a> <a href="#services" class="nav-item2">서비스</a>
<a href="#contact" class="nav-item2">연락처</a>
</div>
<div id="home" class="section">
<h2>홈 섹션</h2>
<p>여기는 홈 섹션입니다.</p>
</div>
<div id="about" class="section">
<h2>소개 섹션</h2>
<p>여기는 소개 섹션입니다.</p>
</div>
<div id="services" class="section">
<h2>서비스 섹션</h2>
<p>여기는 서비스 섹션입니다.</p>
</div>
<div id="contact" class="section">
<h2>연락처 섹션</h2>
<p>여기는 연락처 섹션입니다.</p>
</div>
</body>
</html>
'HTML CSS' 카테고리의 다른 글
| HTML 파일명 규칙 (0) | 2024.07.01 |
|---|---|
| HTML5 (0) | 2024.04.13 |