HTML/CSS/JS 7장: 초보자도 OK! 레이아웃 마스터하는 꿀팁 대방출!

플렉스박스 레이아웃으로 1차원 레이어 설계하기

플렉스박스란?

플렉스박스는 웹사이트 레이아웃을 쉽게 만들 수 있게 도와주는 CSS 속성이야. 가로 또는 세로 방향으로 요소들을 배치할 때 아주 유용하지.

플렉스박스 사용법

1. 부모 요소에 display: flex; 적용:

   • 플렉스박스를 사용하려면 먼저 부모 요소에 display: flex;를 적용해야 해.
   • 이렇게 하면 부모 요소는 '플렉스 컨테이너'가 되고, 그 안에 있는 자식 요소들은 '플렉스 아이템'이 돼.
   • display: inline-flex;를 사용하면 display: flex;와 비슷하지만, 블록 요소 대신 인라인 요소처럼 동작하게 할 수 있어.

2. 플렉스 아이템 배치 방향 설정 (flex-direction):

   • flex-direction 속성으로 플렉스 아이템들이 어떤 방향으로 배치될지 정할 수 있어.
   • row: 왼쪽에서 오른쪽으로 (기본값)
   • row-reverse: 오른쪽에서 왼쪽으로
   • column: 위쪽에서 아래쪽으로
   • column-reverse: 아래쪽에서 위쪽으로

3. 플렉스 아이템 줄바꿈 설정 (flex-wrap):

   • 플렉스 아이템들이 부모 영역보다 커져서 넘치려고 할 때 어떻게 처리할지 정하는 속성이야.
   • nowrap: 아이템들이 줄바꿈 없이 한 줄에 배치돼. (기본값)
   • wrap: 아이템들이 부모 영역을 벗어나면 자동으로 줄바꿈돼.
   • wrap-reverse: 아이템들이 줄바꿈될 때 역순으로 배치돼.

4. 방향과 줄바꿈 한 번에 설정 (flex-flow):

   • flex-direction과 flex-wrap 속성을 한 번에 설정할 수 있어.
   • 예시: flex-flow: row wrap;

5. 가로 방향 정렬 (justify-content):

   • 플렉스 아이템들을 가로 방향(주축)으로 어떻게 정렬할지 설정해.
   • flex-start: 시작 방향으로 정렬 (기본값)
   • flex-end: 끝 방향으로 정렬
   • center: 가운데로 정렬
   • space-between: 아이템들 사이에 균일한 간격을 둬서 배치
   • space-around: 아이템들 좌우에 균일한 간격을 둬서 배치
   • space-evenly: 모든 아이템 사이의 간격을 균일하게 맞춰서 배치

6. 세로 방향 정렬 (align-items):

   • 플렉스 아이템들을 세로 방향(교차축)으로 어떻게 정렬할지 설정해.
   • stretch: 부모 영역 높이를 꽉 채우도록 늘려 (기본값)
   • flex-start: 시작 방향으로 정렬
   • flex-end: 끝 방향으로 정렬
   • center: 가운데로 정렬
   • baseline: 텍스트의 기준선에 맞춰 정렬

7. 줄바꿈된 아이템 덩어리 정렬 (align-content):

   • flex-wrap: wrap;으로 아이템들이 여러 줄로 나뉘었을 때, 이 덩어리들을 세로 방향으로 어떻게 정렬할지 설정해.
   • flex-start: 시작 방향으로 정렬
   • flex-end: 끝 방향으로 정렬
   • center: 가운데로 정렬
   • stretch: 부모 영역 높이를 꽉 채우도록 늘려 (기본값)
   • space-between: 덩어리들 사이에 균일한 간격을 둬서 배치
   • space-around: 덩어리들 좌우에 균일한 간격을 둬서 배치

8. 개별 아이템 정렬 (align-self):

   • align-items 속성은 모든 플렉스 아이템에 적용되지만, align-self는 특정 플렉스 아이템만 따로 정렬할 때 사용해.
   • align-items에서 사용할 수 있는 값들을 그대로 사용할 수 있어.