CSS에 display 속성에 대한 공부

1.css의 display 속성은 요소의 박스 모델이 화면에 표시되는 방식을 결정합니다. 주요 display 값들은 블록 요쇼, 인라인 요소, 플렉스 박스, 그리드, 테이블 레이아웃등 다양한 레이아웃을 제공합니다. 

 

기본값

block

block 요소를 블록처럼 처리합니다. 기본적으로 새줄에서 시작하며 너비는 부모 요소의 전체를 차지합니다.

 

inline

요소를 인라인처럼 배치합니다.

요소는 텍스트처럼 한 줄에 배치합니다. 

 

inline-block

규칙

1. 수평 배치

inline 요소처럼 같은 줄에 나란히 배치됩니다.

2. 크기 조정 가능

width, height, margin, padding 모두 설정 가능합니다.

3.정렬 방식

수평 정렬이 가능하며, 정렬 기준은 부모 요소의 텍스트 정렬에 따라 달라집니다.

 

4. flex

규칙

1. 컨테이너 설정

display: flex를 부모 요소에 설정해야 자식 요소들이 플렉스 아이템이 된다.

2. 축 정렬

justify-content: 주 축에서 요소 정렬 방식 설정

align-items: 교차 축에서 요소 정렬 방식 설정

 

justify-content 

주축을 기준으로 자식 요소의 정렬을 결정합니다. 기본적으로 주 축은 가로 방향입니다. 주로 요소들 사이의 간격과 정렬을 설정합니다. 

 

가능한 값과 동작

flex-start(기본값)

요소들의 주 축의 시작점에 정렬됩니다. 요소들 사이에 간격이 없습니다.

flex-end

요소들이 주 축의 끝점에 정렬됩니다.

center

요소들이 주 축의 중앙에 정렬됩니다.

space-between

요소들 사이의 간격을 균등하게 배치하고 양끝은 부모 컨테이너에 붙습니다.

space-around

요소들 사이와 양끝에 균등한 여백을 배치합니다. 끝쪽 여백은 요소 간 간격의 절반 크기입니다.

 

space-evenly

요소들 사이와 양끝에 완전히 동일한 간격을 배치합니다.

 

 

align-items

교차 축을 기준으로 자식 요소의 정렬을 결정합니다.

기본적으로 교차축은 세로 방향입니다. 요소의 높이 또는 세로 배치 방식에 영향을 미칩니다

 

가능한 값과 동작

1. stretch(기본값)

요소들이 교차 축 방향으로 부모 컨테이너의 높이에 맞게 늘어납니다.

 

2. flex-start

요소들이 교차축의 시작점에 정렬됩니다.

 

3. flex-end

요소들이 교차 축의 중앙에 정렬됩니다.

 

4. center

요소들이 교차 축의 중앙에 정렬됩니다.

 

<컨테이너 설정>

컨테이너 설정은 css flexbox 레이아웃에서 display: flex를 사용하여 부모 요소를 flex 컨테이너로 지정하는 것을 의미한다.

flexbox의 동작은 부모 요소와 자식 요소의 관계를 기반으로 이루어지기 때문이다. 

 

flex 컨테이너란?

display: flex 또는 display: inline-flex가 설정된 요소입니다.  flex 컨테이너는 내부의 자식 요소들을 정렬하고 배치하는 역할을 합니다. 

컨테이너 설정의 핵심

display: flex를 부모 요소에 적용하면 그 하위 요소들이 flex 아이템이 됩니다. flexbox 속성은 flex 컨테이너에서만 동작합니다.  flex 컨테이너가 없다면 자식 요소는 flexbox의 영향을 받지 못합니다. 

 

<flex-direction의 기본값과 옵션>

flex-direction에는 네가지 주요 값이 있습니다.

1. row(기본값)

주 축이 가로 방향으로 설정됩니다. 요소들이 수평으로 배치됩니다.

2. row-reverse

주 축이 가로 방향이지만 오른쪽 -> 왼쪽으로 배치됩니다.

3. column

주 축이 세로 방향으로 배치됩니다.

4. column-reverse

주 축이 세로 방향으로 배치되지만 아래에서 위로 배치됩니다. 요소들의 순서가 반대로 뒤집힙니다.

 

flex-direction / justify-content/ align-items의 순서로 설정해야 하는 것은 아니지만  flex-direction이 다른 속성들의 동작 방식에 영향을 미치므로 실질적으로는 이 순서대로 설정하는 것이 합리적이고 일반적이다.

 

<왜 이런 순서가 합리적인 것일까?>

flex-direction이 기준을 결정하기 때문이다.  flex-direction은 주 축과 교차 축의 방향을 결정합니다.

이 방향에 따라 justify-content/ align-items의 동작이 달라집니다. 

 

flex-direction: row

주축: 가로 교차 축: 세로

 

flex-direction:column

주 축:세로 교차 축:가로