line-height
: 한 줄에서 글자를 수직 가운데로 정렬하는 데 유용하다. 예를 들어, height가 100px인 요소에 line-height를 100px로 설정하면, 한 줄의 글자가 수직 100px 높이의 가운데에 위치하도록 정렬할 수 있다.
이 속성은 상대적인 단위(px, %, em 등) 중에서 배수 단위(예: 1.5 또는 2)로 설정하는 것이 일반적으로 권장된다고 한다. 배수 단위를 사용하면 글자의 크기에 따라 줄 간격이 유동적으로 조정되어 더 유연한 디자인이 가능하기 때문이다.
text-indent
: 문자 첫 줄의 들여쓰기를 할 수 있는 속성이다.
기본 값은 0(들여쓰기 없음)이며 px, em, rem 등의 단위로 들여쓰기를 사용할 수 있다. 추가로, 음수를 사용하여 outdent(내어쓰기)도 가능하다.
요소 쌓임 순서 (Stack order)
: 어떤 요소가 사용자와 더 가깝게 있는지 결정
1. 요소에 position 속성 값이 있는 경우 위에 쌓임. (기본 값인 static 제외하고 relative, absolute, fixed 중)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임.
3. 1번과 2번 조건까지 같은 경우 HTML의 다음 구조일 수록 위에 쌓임.
💡 주의할 것은, position 속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다!
Flexbox의 핵심 개념: 주축(Main Axis)과 교차축(Cross Axis)
Flexbox는 요소들을 배치할 때 두 가지 축을 사용한다.
- 주축 (Main Axis): flex-direction 속성으로 설정되며, 요소들이 정렬되는 기본 축.
- 기본값: row (왼쪽에서 오른쪽으로 수평 정렬)
- 교차축 (Cross Axis): 주축에 수직인 축.
flex-direction 값에 따라 주축과 교차축의 방향이 달라지며, 이로 인해 요소들의 start와 end 위치도 달라집니다.
1. flex-direction: row (기본값)
- 주축: 왼쪽에서 오른쪽으로 가는 수평 방향.
- 교차축: 위에서 아래로 가는 수직 방향.
- Start와 End의 위치
- Main Axis: 왼쪽이 start, 오른쪽이 end.
- Cross Axis: 위쪽이 start, 아래쪽이 end.
2. flex-direction: row-reverse
- 주축: 오른쪽에서 왼쪽으로 가는 수평 방향.
- 교차축: 위에서 아래로 가는 수직 방향(변하지 않음).
- Start와 End의 위치
- Main Axis: 오른쪽이 start, 왼쪽이 end.
- Cross Axis: 위쪽이 start, 아래쪽이 end.
3. flex-direction: column
- 주축: 위에서 아래로 가는 수직 방향.
- 교차축: 왼쪽에서 오른쪽으로 가는 수평 방향.
- Start와 End의 위치:
- Main Axis: 위쪽이 start, 아래쪽이 end.
- Cross Axis: 왼쪽이 start, 오른쪽이 end.
주요 특징
- 요소들이 위에서 아래로 수직 정렬됩니다.
- 가장 위쪽에 배치된 요소가 start, 가장 아래쪽에 배치된 요소가 end입니다.
4. flex-direction: column-reverse
- 주축: 아래에서 위로 가는 수직 방향.
- 교차축: 왼쪽에서 오른쪽으로 가는 수평 방향(변하지 않음).
- Start와 End의 위치:
- Main Axis: 아래쪽이 start, 위쪽이 end.
- Cross Axis: 왼쪽이 start, 오른쪽이 end.
주요 특징
- 요소들이 아래에서 위로 수직 정렬됩니다.
- 가장 아래쪽에 배치된 요소가 start, 가장 위쪽에 배치된 요소가 end입니다.
교차축이 변하지 않는 이유
flex-direction은 주축의 방향만 변경한다. 따라서 교차축은 항상 주축에 수직으로 설정된다.
- row 또는 row-reverse: 교차축은 위에서 아래로.
- column 또는 column-reverse: 교차축은 왼쪽에서 오른쪽으로.
CSS Flexbox: align-content 속성과 flex-wrap의 관계
align-content 속성은 Flexbox에서 여러 줄의 아이템을 정렬할 때 사용하는 속성이다. 하지만, 이 속성이 작동하려면 특정 조건이 충족되어야 한다. 특히, flex-wrap 속성과 줄 바꿈의 유무가 중요한 역할을 한다고 한다.
1. align-content란?
align-content는 플렉스 컨테이너 내의 "여러 줄" 사이의 간격을 정렬하는 속성이다. 이 속성은 교차축(Cross Axis)을 기준으로 줄 간의 정렬 방식을 결정한다.
주요 값
- stretch (기본값): 줄 사이의 간격을 컨테이너 높이에 맞게 늘림.
- flex-start: 줄을 컨테이너의 시작 지점에 배치.
- flex-end: 줄을 컨테이너의 끝 지점에 배치.
- center: 줄을 컨테이너의 중앙으로 배치.
- space-between: 줄 간 간격을 균등하게 배분.
- space-around: 줄 간 간격을 균등하게 배분하고, 양 끝 여백도 추가.
2. align-content의 동작 조건
조건 1: flex-wrap 속성이 wrap 또는 wrap-reverse여야 한다.
align-content는 플렉스 컨테이너가 여러 줄로 나뉘었을 때만 동작한다. 따라서 flex-wrap: nowrap (줄 바꿈 없음)인 경우에는 이 속성이 아무 효과도 주지 않는다!
예제
.container {
display: flex;
flex-wrap: nowrap; /* 줄 바꿈 없음 */
align-content: center; /* 아무 효과 없음 */
}- 모든 아이템이 한 줄에 배치되므로 align-content는 비활성화된다.
조건 2: 자식 요소가 한 줄에 모두 배치되지 않을 만큼 충분히 많아야 한다.
줄 바꿈이 발생하지 않으면 줄 간의 간격을 조정할 필요가 없으므로 align-content는 동작하지 않는다.
예제
.container {
display: flex;
flex-wrap: wrap; /* 줄 바꿈 허용 */
align-content: space-between; /* 줄 간 간격을 균등하게 */
height: 300px; /* 컨테이너 높이를 지정 */
}
.item {
width: 100px;
height: 100px;
}- 자식 요소가 한 줄에 모두 배치될 수 없어서 줄 바꿈이 발생하면, align-content가 동작한다.
3. align-content와 align-items의 차이
Flexbox에서 align-content와 align-items는 교차축(Cross Axis) 정렬과 관련이 있지만, 역할이 다르다.
| align-items | 모든 경우에서 동작 | 한 줄 내의 개별 아이템 정렬에 사용. |
| align-content | flex-wrap로 줄이 2줄 이상일 때만 동작 | 여러 줄 간의 간격을 조정. |
예제 비교
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center; /* 줄 간 간격을 컨테이너 중앙에 */
align-items: flex-start; /* 각 줄 내 아이템을 위쪽으로 정렬 */
}- align-content: 여러 줄 사이를 중앙으로 정렬.
- align-items: 한 줄 내의 아이템을 위쪽으로 정렬.