[CSS] display 속성 3가지(block, inline, flex)

css를 공부를 했어요. 

 

display 속성을 공부하면서 3가지 value를 알게 됐어요.

 

1️⃣ block  2️⃣ inline  3️⃣ flex

 

1. block 

block의 대표적인 태그는 <div>이에요. 

옆에 아무것도 올 수 없어요!

 

2. inline 

inline의 대표적인 태그는 <span>이에요.

옆에 올 수 있고, 높이와 넓이를 갖지 못해요!

패딩은 사방에 다 줄 수 있지만 마진은 위아래는 적용이 안돼요!

 

3. flex box

block과 inline의 한계를 극복하고자 나온 개념이에요.

flexbox를 이해하려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 돼요.

주축은 flex-direction 속성을 사용해 지정할 수 있어요.

디폴트 값은 row(주축, 가로, 인라인 방향)에요! 그럼 교차축은 column!

flex-direction에서 column(세로, 블록 방향)으로 설정하며 주축이 수직으로 변경돼요. 그럼 교차축은 row!

또한 중요한 특성은 부모 태그에 적용해야 해요!!