3.1 Flexbox
Flexbox와 Grid를 사용하는 유연한 레이아웃 만들기는 현대 반응형 웹사이트 개발의 핵심 기술이야. 이 기술들은 페이지에서 요소들의 위치를 쉽게 관리할 수 있게 해주고, 다양한 화면 크기와 기기에 적응할 수 있도록 해줘.
Flexbox (Flexible Box Layout Module)는 요소를 한 줄 또는 한 열로 배치하는 일차원 레이아웃을 위해 만들어졌어. Flexbox는 유연하고 반응형인 레이아웃을 쉽게 만들어줘.
Flexbox의 주요 개념:
- Flex-container:
display: flex속성이 적용되는 요소 - Flex-item: flex-container의 자식 요소로, 그 안에 배치되는 요소
Flexbox 속성
Flex-container:
display: flex: 요소를 flex-container로 설정flex-direction: flex-item의 배치 방향 설정 (row,column,row-reverse,column-reverse)justify-content: 메인 축을 따라 flex-item 정렬 (flex-start,flex-end,center,space-between,space-around)align-items: 교차 축을 따라 flex-item 정렬 (stretch,flex-start,flex-end,center,baseline)
Flex-item:
flex-grow: 여유 공간이 있을 때 요소가 커질 수 있는 능력flex-shrink: 공간이 부족할 때 요소가 줄어들 수 있는 능력flex-basis: 여유 공간 분배 전에 요소의 초기 크기 설정align-self:align-items에 의해 지정된 교차 축 정렬을 덮어씌움
Flexbox 사용 예제
화면 크기에 따라 적응하는 세 개의 열을 가진 레이아웃을 만들어 보자:
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>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">열 1</div>
<div class="flex-item">열 2</div>
<div class="flex-item">열 3</div>
</div>
</body>
</html>
코드 설명:
-
.flex-container: 요소를 flex-container로 정의하고, 요소들 사이에 균등한 간격을 두며 공간이 부족할 때 다음 줄로 넘길 수 있게 해줘 -
.flex-item: flex-item은 동일한 공간을 차지하고, 최소 너비 200px을 가지고 있으며 container 내에서 균등하게 배치되어 있어
3.2 CSS Grid
CSS Grid Layout은 행과 열을 사용하여 복잡한 레이아웃을 만들 수 있는 2차원 레이아웃 시스템이야.
CSS Grid의 주요 개념:
- Grid-container:
display: grid속성이 적용되는 요소 - Grid-item: grid-container의 자식 요소로, 그리드에 배치되는 요소
CSS Grid 속성
Grid-container:
display: grid: 요소를 grid-container로 설정grid-template-columns: 그리드의 열 수와 크기를 설정grid-template-rows: 그리드의 행 수와 크기를 설정gap: 행과 열 사이의 간격을 관리justify-items: grid-item의 수평 정렬을 관리align-items: grid-item의 수직 정렬을 관리
grid-column: 요소가 확장 될 열의 수를 정의grid-row: 요소가 확장 될 행의 수를 정의justify-self: 요소의 수평 정렬을 덮어씌움align-self: 요소의 수직 정렬을 덮어씌움
Grid-item:
CSS Grid 사용 예제
화면 크기에 따라 적응하는 세 개의 열과 두 개의 행을 가진 레이아웃을 만들어 보자.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 예제</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">항목 1</div>
<div class="grid-item">항목 2</div>
<div class="grid-item">항목 3</div>
<div class="grid-item">항목 4</div>
<div class="grid-item">항목 5</div>
<div class="grid-item">항목 6</div>
</div>
</body>
</html>
코드 설명:
.grid-container: 요소를 grid-container로 정의하고, 세 개의 열과 두 개의 행을 가지고 있으며, 각 요소는 동일한 공간을 차지해.grid-item: 균등한 패딩과 배경색을 가진 grid-요소들
GO TO FULL VERSION