CSS 기초 display

display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정할 수 있다. display 속성값에는 block, inline, inline-block 있다.

1. block

• 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다.
  block 요소는 inline 요소와 달리 width, height, margin, padding 속성이 모두 적용된다.
  대표적인 block 요소로 <div>,<p>, <h1> 태그 등이 있다
  
  결과 👇
  • 아래와 같이 여러 개의 block 요소들이 매번 줄바꿈 되어 여러 줄에 보이게 된다.
    

2.inline

• inline은 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 가로와 세로의 크기를 임의로 지정 할 수 없고 그 크기는 오로지 포함하고 있는 내용에 의해서 결정된다. 대표적인 inline 요소로 <span>, <a>, <em> 태그 등이 있다.
  
  결과 👇
  여러 개의 inline 요소들이 줄바꿈 없이 순서대로 한 줄에 보이게 된다.
  

3.inline-block

• inline-block은 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. 하지만 inline에선 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.
  대표적인 inline-block 요소로 <button>,<select> 태그 등이 있다.
  
  
  위의 예에서 a요소의 css에 height만 추가해 보았다.
  👇예상했던 결과처럼 inline요소는 height를 임의로 지정하지 못한다.
  -> a요소에 inline-block을 명시적으로 지정해 주었다 a요소는 inline-block 특성을 갖게 되어 다른 요소들과 나란히 배치되면서 width와 height 속성 지정 및 margin과 padding지정이 가능해졌다.
  

🎈 <span>요소는 inline 속성값을 가지고, <div>요소는 block 속성값을 가지고 있는 것처럼 HTML 태그 별로 기본적으로 적용되어 있는 display 속성값이 있지만 그 속성값은 CSS의 display속성을 이용하여 원하는 값으로 자유롭게 변경이 가능하다.