css 기초공사 display 속성 값 inline, block, inline-blcok애 대해 check! 가자!
inline
display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록 구성됩니다.
특징
가로와 세로의 크기를 임의로 지정 할 수 없다!❌
그 크기는 오로지 포함하고 있는 내용에 의해서 결정!
대표적인 inline 요소로는 span
즉 font-size 및 content의 길이에 따라 그 크기가 결정되는 속성!
block
display 가 block 으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지합니다. 간단하게 말해서 어떤 특정 구역을 차지한다고 보면 된다!
가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것 보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 block 으로 설정된 요소는 한 줄을 그대로 차지⚡️
위의 속성을 이용하여 콘텐츠를 가운데로 정렬하고자 할 때 margin: 0 auto; 등의 스타일링을 하기도 한다!
block 속성을 기본 값으로 가지는 요소는 대표적으로 div, p
inline vs block
다시한번 check!⚡️
둘의 특징적인 차이점은 아래와 같다.
1. 요소가 새로운 행(new line)에서 시작하는지 여부
2. 요소의 크기를 지정할 수 있는지 여부
inline-blcok
inline-block = block 속성 + inline 속성을
즉, block 처럼 가로와 세로 크기를 설정 할 수 있으면서도,
새로운 줄에서 시작하지 않고,
inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.
주의사항!🔥
- inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.
- inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다.
