display
display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정한다.
display 속성은 매우 다양한 값을 가질 수 있지만, 이 게시물에서는 가장 기본이 되는
block, inline, inline-block를 비교해 정리한다.
block / inline
block
display가 block으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에
위치하면서, 가로 크기가 부모 요소의 100%를 차지합니다. 간단하게 말해서 어떤 특정
구역을 차지한다고 보면 된다.
가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것
보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 block으로 설정된 요소는 한 줄을 그대로 차지한다.
div,p는 block 속성을 default 값으로 가지는 대표적 요소이다.
div는 default값이 block이기때문에 아래 사진과 같이 background color가 표현된다.
inline
display가 inline으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며,
마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록 구성된다.
가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정된다.
span은 대표적인 inline 요소이다.
두번째 박스에 display: inline 속성 부여
사진과 같이 background color가 표현된다.
차이점
- 요소가 새로운 행(new line)에서 시작하는지
- 요소의 크기를 지정할 수 있는지
inline-block
display가 inline-block으로 설정된 요소는 block속성과 inline속성을 섞어놓은 것과 같다. block처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있다.
세번째 박스에 display:inline-block 속성 부여.
사진과 같이 inline속성과 block속성을 가진다.
result
block 과 inline, inline-block는 간단한 차이를 가지고 있지만, 그 특징을 파악하고 상황에 맞게 적절한 display 속성을 지정해 사용해야 한다.
