css로 display를 많이 넣는데, 이를 정리해보고자 한다.
1. display: block
display가 block이라는 의미는 요소의 가로가 전체 화면의 100%를 차지한다는 의미이다.
예를 들어, 기본 div 태그의 경우, display가 block이다.div 태그는 가로를 100% 차지하기에 width: ~~px;로 제한을 두어도, 사실 가로를 100% 차지하고 있고, 나머지 부분은 빈공간으로서 존재한다.
다음은 그 예시이다.
<div style={{ width: "100px" }}>this is div</div>
<span>hi</span>위 코드의 실행 화면은 다음과 같다.
width에 제한을 두어도 가로를 100% 차지하고 있음을 확인할 수 있다.
2. display: inline
display가 inline이라는 것은 요소의 width, height 값을 모두 무시한다는 의미이다.
예를 들어, 기본 span 태그는 display: inline요소이다. 이에, span의 width 혹은 height는 자식 요소의 크기에 따라 결정되며, width: ~~px;로 제한할 수 없다.
다음은 그 예시이다.
<span style={{ width: "100px" }}>hi</span>위 코드의 실행 화면은 다음과 같다.
width에 제한을 두어도 소용이 없음을 알 수 있다.
그렇다면.... 그 중간은 없는 것인가?
3. display: inline-block
display가 inline-block이라는 것은 요소의 크기가 inline처럼 자식 요소의 크기에 따라 정해지되, width, height 값을 따로 지정해줄 수 있다는 의미이다.
또, 자주 쓰는 display로 flex와 grid가 있는데, 이는 위 3가지와 조금 결이 다르다.
block, inline, inline-block은 적용할 요소 그 자체의 크기를 정하는 방법이라면, flex와 grid는 적용할 요소의 내부 자식 요소들의 배치에 관련된 방법이다.
이 두 가지 방법은 다음 포스트에서 알아보도록 하자.
