[CSS] display의 종류

모든 요소는 딱 한 개의 display의 값을 갖고 있습니다. display의 종류는 아래와 같습니다.

1. inline
2. block
3. inline-block
4. flex (레이아웃 배치를 쉽게 해주는)
5. list-item
6. none

display 속성에서 block & inline에 대해 알아보자.

display: block
새로운 줄에서 시작하려는 경향이 있다.
가로 길이는 최대한 많이 차지하려고 한다.
: 가로폭 전체의 넓이를 가지는 직사각형 형태
width, height, margin, padding 등을 사용하여 크기나 위치 지정 가능하다.
즉, width, height, margin, padding 등을 사용해서 크기나 위치를 지정하려면 블록 요소여야 한다.

블록 요소는 가로 전체를 차지하기 때문에 자동으로 줄바꿈된다.

모든 인라인 요소를 포함할 수 있다. (블록 요소는 일부만 포함 가능)

1) 영역 
<div>, <main>, <section>, <article>, <nav>, <header>, <aside>, <footer> 

2) 테이블, 리스트 
<table>, <ul>, <li> 

3) 데이터 입력 
<form> 

4) 기타
<h1>, <p>

display: inline
가로 길이는 필요한만큼만 차지한다.
즉, 가로, 세로가 자동으로 설정된다.
width, height는 지정해도 적용되지 않고 margin/padding은 좌우만 적용되고 상하는 적용되지 않는다. (text-align으로 텍스트 좌/우/중앙 정렬 가능하다)
다른 요소들과 같은 줄에 머무른다.

1) 텍스트 스타일/링크 관련 태그 
<a>, <i>, <b>, <span>, <strong>, <br>

2) form 하위 태그 
<input>, <output>, <label>, <textarea>, <select>, <button>

inline-block
다른 요소들과 같은 줄에 머무를 수 있으면서 width, height 지정, margin/padding 상하를 지정할 수 있다.