[CSS] Display 속성

Display 속성

• mdn 문서 - CSS display
• display 속성은 요소를 블록 혹은 인라인 요소 중 어떤 방법으로 취급될지와, flow, grid, flex처럼 자식 요소를 배치할 때 사용됨
• display 속성의 값은 block, inline, inline-block, flex, grid 등이 있음.

 

 

📌display: block

block 속성 예시

• 블럭처럼 위에서 아래로 쌓이는 특징이 있음.
• <div>, <h1>,  <p>,  <ul>,  <ol>, <form> 등의 요소는 대표적인 block 속성
• 가로 영역을 모두 차지하기 때문에 block 특성을 가진 요소와 인접된 요소는 양 옆으로 배치될 수 없음.
• width, height, margin, padding의 설정이 가능

 

 

📌display: inline

inline 속성 예시

• 각 요소를 인접된 요소의 양 옆으로 나열할 수 있음.
• <span>, <a>, <img>, <svg> 요소가 대표적인 inline 속성.
• width, height 설정이 불가능.
• margin은 left, right 값만 설정 가능.
• padding은 상하좌우 모두 설정 가능하지만, 상하 부분의 padding은 다른 요소에 영향을 주지 못함.

 

 

📌display: inline-block

inline-block 속성 예시

• 요소의 형태는 block의 특징을 가지고 있고, 요소의 배치는 inline의 특징을 가지고 있음.
  쉽게 말해 외형을 block처럼 자유롭게 조절할 수 있으며, inline처럼 각 요소를 양 옆으로 배치가 가능.