CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기
01. 서론
1) Flexbox란?
Flexbox(플렉서블 박스 레이아웃)는 CSS의 레이아웃 모델로, 요소들을 유연하게 배치하고 정렬하는 데 사용됩니다. Flexbox는 Flex 컨테이너와 Flex 항목으로 구성되며, 컨테이너 내의 자식 요소들을 하나의 차원에서 배치할 수 있게 해줍니다. 이를 통해 요소의 크기를 조절하고, 남은 공간을 채우거나 넘치지 않도록 할 수 있습니다.
.container {
display: flex;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox 예제</title>
<style>
.container {
display: flex;
}
.item {
flex: 1;
padding: 10px;
background-color: lightblue;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">항목 1</div>
<div class="item">항목 2</div>
<div class="item">항목 3</div>
</div>
</body>
</html>
2) Flexbox의 중요성
Flexbox는 다양한 화면 크기와 디바이스에 적응할 수 있는 유연한 레이아웃을 쉽게 만들 수 있게 해줍니다. 이는 특히 반응형 웹 디자인에서 중요한 역할을 합니다. Flexbox를 사용하면 요소 간의 간격을 조절하고, 정렬을 쉽게 할 수 있어 사용자 경험을 향상시킬 수 있습니다.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}위의 예제에서 justify-content: space-between을 사용하여 항목들을 주 축을 따라 균등하게 배치하고, align-items: center를 사용하여 교차 축을 따라 중앙에 정렬합니다. 이로써 레이아웃을 쉽게 조절할 수 있습니다.
Flexbox는 웹 페이지의 레이아웃을 효율적으로 관리하고, 일관된 디자인을 유지하며, 사용자 경험을 개선하는 데 매우 유용한 도구입니다.
02. Flexbox의 기본 개념
1) Flex 컨테이너와 Flex 항목
Flex 컨테이너는 Flexbox 레이아웃을 활성화하는 부모 요소입니다. display: flex 또는 display: inline-flex 속성을 설정하여 지정합니다. Flex 컨테이너 내의 모든 자식 요소는 Flex 항목이 됩니다.
.container {
display: flex;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox 컨테이너 예제</title>
<style>
.container {
display: flex;
background-color: #f4f4f4;
padding: 10px;
}
.item {
background-color: #ddd;
margin: 5px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">항목 1</div>
<div class="item">항목 2</div>
<div class="item>항목 3</div>
</div>
</body>
</html>
Flex 항목은 Flex 컨테이너 내의 자식 요소들입니다. 기본적으로 가로로 정렬되며, Flexbox 속성을 사용하여 크기와 정렬을 조정할 수 있습니다.
.container {
display: flex;
}
.item {
flex: 1;
padding: 10px;
background-color: lightblue;
margin: 5px;
}2) 주요 용어 설명
Main axis (주 축): Flex 컨테이너의 주 축은 Flex 항목들이 배치되는 기본 축입니다. 기본값은 수평 방향입니다.
Cross axis (교차 축): 교차 축은 주 축에 수직인 축입니다. 기본값은 수직 방향입니다.
.container {
display: flex;
flex-direction: column;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox 용어 예제</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 200px;
background-color: #f4f4f4;
}
.item {
flex: 1;
background-color: lightblue;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">항목 1</div>
<div class="item">항목 2</div>
<div class="item">항목 3</div>
</div>
</body>
</html>
위 예제에서는 flex-direction: column을 사용하여 항목들이 수직으로 배치됩니다. 이때, 주 축은 수직 방향, 교차 축은 수평 방향이 됩니다.
Flex 컨테이너와 Flex 항목의 개념을 이해하면 Flexbox의 기본 레이아웃을 설정할 수 있습니다. 주요 용어인 주 축과 교차 축을 이해하면 다양한 방향으로 요소를 배치하고 정렬할 수 있습니다. Flexbox는 이러한 유연성을 통해 다양한 화면 크기와 장치에 적응하는 레이아웃을 쉽게 구성할 수 있습니다.
03. Flexbox 속성
1) display: flex
display: flex는 Flex 컨테이너를 정의하는 속성입니다. 이를 사용하여 부모 요소를 Flex 컨테이너로 설정하면, 모든 자식 요소는 Flex 항목이 됩니다.
.container {
display: flex;
}2) flex-direction
flex-direction 속성은 주 축의 방향을 설정합니다. 기본값은 row로, 가로 방향입니다.
.container {
display: flex;
flex-direction: column;
}3) justify-content
justify-content 속성은 주 축을 따라 항목을 정렬합니다.
flex-start: 시작점 정렬 (기본값)flex-end: 끝점 정렬center: 중앙 정렬space-between: 항목 사이에 동일한 간격 배치space-around: 항목 양쪽에 동일한 간격 배치
.container {
display: flex;
justify-content: space-between;
}4) align-items
align-items 속성은 교차 축을 따라 항목을 정렬합니다.
stretch: 컨테이너 크기에 맞게 항목을 늘림 (기본값)flex-start: 시작점 정렬flex-end: 끝점 정렬center: 중앙 정렬baseline: 항목의 텍스트 기준선에 맞춤
.container {
display: flex;
align-items: center;
}5) flex-wrap
flex-wrap 속성은 항목이 여러 줄로 배치될지 여부를 설정합니다.
nowrap: 단일 행 (기본값)wrap: 여러 행으로 감쌈wrap-reverse: 역방향으로 여러 행으로 감쌈
.container {
display: flex;
flex-wrap: wrap;
}6) align-content
align-content 속성은 여러 행의 간격을 설정합니다. align-items가 단일 행에 적용되는 반면, align-content는 여러 행에 적용됩니다.
flex-start: 시작점 정렬flex-end: 끝점 정렬center: 중앙 정렬space-between: 행 사이에 동일한 간격 배치space-around: 행 양쪽에 동일한 간격 배치stretch: 컨테이너 크기에 맞게 행을 늘림
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}7) flex-grow, flex-shrink, flex-basis
이 세 속성은 Flex 항목의 크기를 제어합니다.
flex-grow
남은 공간을 차지할 항목의 비율을 설정합니다.
.item {
flex-grow: 2;
}flex-shrink
공간이 부족할 때 항목이 줄어드는 비율을 설정합니다.
.item {
flex-shrink: 1;
}flex-basis
항목의 기본 크기를 설정합니다.
.item {
flex-basis: 100px;
}종합 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox 속성 예제</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: space-around;
height: 300px;
}
.item {
flex: 1 1 100px;
background-color: lightblue;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">항목 1</div>
<div class="item">항목 2</div>
<div class="item">항목 3</div>
<div class="item">항목 4</div>
<div class="item">항목 5</div>
</div>
</body>
</html>
이 코드는 Flexbox 속성을 사용하여 다섯 개의 항목을 컨테이너 내에 균등하게 배치하고, 항목 간의 간격을 설정하며, 각 항목의 크기를 유연하게 조정합니다. 이를 통해 다양한 레이아웃을 쉽게 구현할 수 있습니다.
04. 실습
1) 간단한 Flexbox 레이아웃 작성
이번 실습에서는 Flexbox를 사용하여 간단한 레이아웃을 작성해보겠습니다. 이를 통해 Flexbox의 다양한 속성들이 실제로 어떻게 동작하는지 확인할 수 있습니다.
2) 예제 코드와 설명
목표: 세 개의 박스를 Flex 컨테이너 내에 배치하고, 각 박스가 동일한 크기를 가지며 주 축과 교차 축을 따라 정렬되도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox 레이아웃 실습</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.item {
background-color: lightcoral;
padding: 20px;
margin: 10px;
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">박스 1</div>
<div class="item">박스 2</div>
<div class="item">박스 3</div>
</div>
</body>
</html>
설명:
- HTML 구조:
.container클래스를 가진<div>요소는 Flex 컨테이너 역할을 합니다..item클래스를 가진 세 개의<div>요소는 Flex 항목입니다. - CSS 스타일링:
.container:display: flex: Flexbox 레이아웃을 활성화합니다.justify-content: center: 주 축을 따라 항목들을 중앙에 정렬합니다.align-items: center: 교차 축을 따라 항목들을 중앙에 정렬합니다.height: 100vh: 컨테이너의 높이를 뷰포트 높이의 100%로 설정합니다.background-color: #f0f0f0: 배경색을 연한 회색으로 설정합니다.
.item:background-color: lightcoral: 박스의 배경색을 연한 코랄색으로 설정합니다.padding: 20px: 박스의 내부 여백을 20px로 설정합니다.margin: 10px: 박스의 외부 여백을 10px로 설정합니다.flex: 1: 박스들이 컨테이너 내에서 동일한 비율로 공간을 차지하도록 설정합니다.text-align: center: 박스 내의 텍스트를 중앙 정렬합니다.
결과: 위 코드를 실행하면, 세 개의 박스가 화면 중앙에 동일한 크기로 배치됩니다. 각 박스는 동일한 공간을 차지하며, 주 축과 교차 축을 따라 중앙에 정렬됩니다. 이를 통해 Flexbox의 다양한 속성들이 어떻게 동작하는지 확인할 수 있습니다.
05. 결론
1) Flexbox의 이점과 활용 방법
Flexbox는 웹 디자인에서 매우 유용한 도구입니다. 주요 이점은 다음과 같습니다:
- 유연한 레이아웃: 다양한 화면 크기와 장치에 적응하는 유연한 레이아웃을 쉽게 구현할 수 있습니다.
- 간편한 정렬: 주 축과 교차 축을 따라 요소를 쉽게 정렬할 수 있습니다.
- 공간 분배: 항목 간의 공간을 효율적으로 분배하고 조정할 수 있습니다.
Flexbox를 활용하면 다음과 같은 작업이 가능합니다:
- 중앙 정렬: 수직 및 수평으로 요소를 중앙에 배치
- 공간 분배: 남은 공간을 채우거나 요소를 간격에 맞게 분배
- 반응형 레이아웃: 다양한 장치와 화면 크기에 맞는 레이아웃 생성
2) 추가 학습 자료와 참고 링크
Flexbox에 대해 더 깊이 학습하려면 다음 자료들을 참고하세요:
- MDN Web Docs - CSS Flexible Box Layout: Flexbox의 기본 개념과 속성을 자세히 설명합니다.
- W3Schools - CSS Flexbox: Flexbox의 다양한 예제와 실습을 제공합니다.
관련된 다른 글도 읽어보시길 추천합니다
2024.06.27 - [Study] - 01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초
01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초
01. 서론1) HTML이란?HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지는 텍스트, 이미지, 링크 등 다양한 요소로 구성되며, 이러한
guguuu.com
2024.06.28 - [Study] - 02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초
02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초
01. 서론1) HTML 폼의 중요성HTML 폼은 웹 페이지에서 사용자와 상호작용할 수 있는 중요한 요소입니다. 폼을 통해 사용자는 데이터를 입력하고 제출할 수 있으며, 이러한 데이터는 서버로 전송되어
guguuu.com
2024.06.30 - [Study] - 03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초
03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초
01. 서론1) HTML 시맨틱 태그란?HTML 시맨틱 태그는 웹 페이지의 구조와 내용을 명확하게 설명하기 위해 사용되는 태그입니다. 시맨틱 태그는 요소의 목적과 역할을 명확히 하여, 브라우저와 검색
guguuu.com
읽어주셔서 감사합니다
공감은 힘이 됩니다
:)
'Study' 카테고리의 다른 글
| 08. CSS Layout 종합 학습 | 웹 개발 기초 (0) | 2024.07.08 |
|---|---|
| 07. CSS Grid Layout 가이드 | 웹 개발 기초 (0) | 2024.07.07 |
| 05. CSS 박스 모델 학습 | 웹 개발 기초 (0) | 2024.07.05 |
| 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초 (0) | 2024.07.04 |
| 03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초 (0) | 2024.07.03 |
