Display속성 이해하기

속성

• inline
• block
• inline-block

 

inline 속성은 텍스트 속성과 유사하다.

• 텍스트 속성과 유사한 태그 리스트
  • span
  • a
  • img
  • strong
  • 기타 등등 ...

여기서 말하는 텍스트 속성이란, 텍스트 길이 만큼 공간을 차지하는 것을 의미한다. div 같은 태그 경우. 텍스트 길이 만큼 공간을 차지 하는게 아닌 한 라인 모든 공간을 차지하는 반면 텍스트 속성은 텍스트 길이, 크기 만큼 공간을 차지한다.

inline 속성은 텍스트로 보기 때문에. font-size 를 사용하여 크기를 조절 할 수 있다.
단, width, height와 같은 속성은 사용 할 수 없다. 텍스트 속성에다가 width, height 속성을 사용한 것을 본 적이 있는가?!

block 속성은 쌓이는 상자 와 유사하다.

• 박스 송성과 유사한 태그 리스트
  • H1 ~H6
  • div
  • 기타 등등...

텍스트 속성과 달리, 페이지의 한 라인 모든 공간을 차지한다. 그렇기 때문에 이를 하나의 박스 라고 부른다.

block 속성은 박스 형태로 보기 때문에, 크기 조절 할 때 width, height 와 같은 속성을 사용하여 크기를 조절 할 수 있다.

inline-block 속성은 inline 방식과 block의 방식을 합친 것!

inline-block 속성은 공간을 차지 할 때 block 형태로 감싸며, inline 처럼 텍스트 속성으로 만든다고 이해하면 될 것 같다. inline속성의 특징과 똑같이 텍스트 길이에 맞게 공간을 차지한다. 그리고 block속성과 같은 방식으로 공간을 width, height 로 크기를 조절 할 수 있다!

이정도로 이해하고 넘어가면 될 것 같다.

참고링크

• https://studiomeal.com/archives/282