Flexbox
CSS를 공부하면서 제일 헷갈렸던 게 바로 Flexbox였다.
처음에는 무슨 말인지 잘 이해가 안 됐는데, “언젠가는 알겠지”라는 마음으로 강의를 계속 들었다.
그리고 여러 예시를 접하다 보니 조금씩 감이 잡히기 시작했다. 그래서 헷갈렸던 부분을 정리해보려고 한다.
먼저, css 파트에 대해 작성하기 앞서 To-Do List 컨테이너를 만들기 위한 html 내용은 아래와 같다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
</style>
<body>
<div class="container">
<h1>📌 To-Do List</h1>
<div class="input-group">
<input type="text" placeholder="할 일을 입력하세요..." />
<button class="input-btn">추가</button>
</div>
<ul id="todo-list">
<li class="completed">
공부
<button class="delete">❌</button>
</li>
<li>
운동
<button class="delete">❌</button>
</li>
<li>
청소
<button class="delete">❌</button>
</li>
</ul>
</div>
</body>
</html>이렇게 1단계로 대충 필요한 코드를 작성하면 화면에는 다음과 같이 나온다.
여기서 해결해야 할 부분이 container 파트를 수평과 수직 방향으로 가운데 정렬을 시켜야 한다는 점이다!
이 때, flexbox를 이용해서 구현을 해보자.
1. flexbox는 어디에 선언을 해야 하는가
내가 헷갈렸던 부분
처음 flexbox를 공부할 때, display: flex를 어디에 선언해야 하는지 헷갈렸었다.
처음에는 정렬 대상 요소에 직접 선언해야 한다고 착각했다.
하지만 flexbox는 정렬하려는 대상이 있다면 그 대상의 부모에 display: flex를 선언해야 한다.
2. 어떤 방식으로 정렬을 시킬 수 있는가
Flexbox에서 정렬은 기본값으로 행(수평,row)방향으로 정렬한다.
즉, 별다른 설정이 없다면 자식 요소들은 왼쪽에서 오른쪽으로 배치된다.
flex-direction : row 처럼 정의한다.
하지만, 수직 방향으로 정렬하기 위해서는 flex-direction : column; 와 같이 선언한다.
쉽게 표현하면 아래의 도식과 같다.
2-1. justify-content
flex-direction row로 기본값일 때, justify-content는 수평 방향으로 정렬을 조정하는 방식으로 다양한 옵션이 있다.
- flex-start : 시작점 정렬(기본값)
- flex-end : 끝점 정렬
- center : 가운데 정렬
- space-between : 양끝 정렬 + 사이 간격 동일
- space-around : 모든 요소에 동일한 외부 간격
- space-evenly : 요소 간, 양끝 모두 동일 간격
수평 방향 기준 가운데 정렬을 하기 위해서는 우리는
justify-content : center;처럼 body 부분의 css 파트에 추가로 선언하면 된다.
그러면, 아래처럼 구조가 바뀌게 된다.
2-2. align-items
align-items는 수직 방향 기준 정렬을 맞추는 방식이다.
- stretch : 기본값 : 높이 늘리기
- flex-start : 시작점 정렬(위쪽)
- flex-end : 끝점 정렬(아래쪽)
- center : 가운데 정렬
- baseline : 텍스트 기준선 맞춤
이제 우리는 수직 방향으로 정렬을 맞추기 위해
align-items : center;를 body 부분의 style에 코드를 추가한다.
아래는 지금까지의 코드를 나타낸 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="container">
<h1>📌 To-Do List</h1>
<div class="input-group">
<input type="text" placeholder="할 일을 입력하세요..." />
<button class="input-btn">추가</button>
</div>
<ul id="todo-list">
<li class="completed">
공부
<button class="delete">❌</button>
</li>
<li>
청소
<button class="delete">❌</button>
</li>
<li>
빨래
<button class="delete">❌</button>
</li>
</ul>
</div>
</body>
</html>‼️ 그런데 위의 html을 실행하면, 우리가 기대한 것과 같이 화면 기준 가운데 정렬이 되지 않는다.
아래와 같은 결과가 나오게 된다.
height: 100vh 이슈
처음에는 이 내용이 잘 이해가 되지 않았다.
그러다가 방법을 찾아보니 body의 height를 수정해야 하고, CSS의 body 부분에
height: 100vh;
를 선언해야 한다는 것을 알게 되었다.
구글링해 보니 그 이유는 다음과 같았다:
height는width와 달리 내용만큼만 크기가 잡힘body의 기본height값은auto- 내용물이 적으면
body높이는 내용만큼만 차지 - 이 상태에서
align-items: center;를 줘도 세로 중앙 정렬이 되지 않음
∴ 세로 방향에 남는 공간을 만들어줘야 함!
→ height: 100vh;를 설정해 body의 높이를 확장하는 방식으로 해결한다.
이제, 위의 붉은 색으로 박스 친 list 부분에 대해 공부,청소,빨래와 같은 항목과 ❌ 양끝으로 떨어뜨리기 위해서는 Flexbox 의 성질을 잘 이용해보자.
- li 항목을 display : flex로 설정.
- 수직 방향으로 항목들을 정렬할 것이므로, flex-direction은 column으로 설정
- to-do 항목과 ❌ 양끝으로 두기 위해(수평 방향 정렬) justify-contents는 space-between으로 설정한다.
그러면 아래의 사진과 같이 결과가 나오게 된다.
지금까지 Flexbox와 관련된 예시를 바탕으로 이와 관련된 개념을 익히는 과정 속 시행 착오들을 바탕으로 글을 작성하게 되었다.
추후, 또다른 문제를 맞닥뜨리게 된다면 그 때에도 관련 개념을 정리해보도록 다짐하며 글을 마친다.