[CSS] display 속성: inline, block, inline-block

CSS에서 display 속성은 웹페이지 상 엘리먼트들이 어떻게 보여지는지, 그리고 다른 엘리먼트와 어떻게 상호배치되는지를 결정한다.

display 속성값 중 가장 근간이 되는 아래 세 개의 속성을 정리해보자.

• inline
• block
• inline-block

1. inline

영역의 크기가 딱 컨텐츠 크기로만 정해짐!

대표 element

<span>
<a>
<em>
img

📌 주의사항

• width height 속성 지정 불가능
  ㄴ 왜냐하면 해당 태그가 마크업하고 있는 요소의 크기만큼 공간을 차지하도록 되어있기 때문임
• margin padding 속성은 right,left만 반영이 되고, top,bottom은 반영 안 됨
• 여러 요소 추가 시 가로 방향으로 추가됨

2. block

width를 지정하지 않으면 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지함

대표 element

div
p
h1- h6
form
header
footer
section

📌 inline과 다르게?

• width, height, margin, padding 속성이 모두 반영됨
• 여러 요소 추가 시 세로 방향으로 추가됨
  block이라는 이름과 다르게 굉장히 포용적일 수도?

3. inline-block

inline..+..block 하이브리드 모드처럼 동작. 기본적으로 inline 처럼 한 줄에 다른 엘리먼트들과 나란히 배치되지만? block처럼 width,height,margin,padding 속성 적용 가능

대표 element

button
input
select

📌 주의사항

• width,height,margin,padding 모두 지정 가능(block)
• 명시적으로 해당 엘리먼트의 스타일을 display: inline-block으로 지정해주어야 함
• 여러 요소 추가 시 가로 방향으로 추가됨(inline)
• 여러 개의 엘리먼트를 한 줄에 원하는 너비만큼 배치할 수 있다는 장점이 있음

4. None

요소를 눈에 보이지 않게 없앰

• 개발자도구에서 보면, 코드상으로는 존재하지만 브라우저가 그릴 때는 아예 그리지 않음.

• visibility: hidden; 도 가능
  ㄴNone과의 차이점은 요소의 자리는 그대로 차지함 (레이아웃은 그대로 남아있음)

  MDN_Display