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

블록 요소(block element)

---

블록 요소 특징

- 모든 인라인 요소를 포함할 수 있다.

- 다른 블록 요소도 일부 포함할 수 있다.

- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.

- width, height, margin, padding 등을 사용하여 형태를 변형해 레이아웃을 수정할 수 있다.

- 블록 요소 다음에는 줄바꿈이 이루어진다.

- vertical-align 적용 ❌

- text-align 적용 ❌

※블록 요소에 text-align 적용시켜보기
블록 요소는 기본적으로 width값을 수평 전체로 잡히기 때문에 text-align이 먹히질 않는다.
그래서 해당 요소를 inline-block으로 display 속성을 바꾼 후,
그 부모요소에 text-align을 해주면 적용시킬 수 있다.

 

 

HTML5 블록요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

 

인라인 요소(inline element)

---

인라인 요소 특징

- 항상 블록 요소안에 포함되어 있다.

- 인라인 요소안에 다른 인라인 요소가 포함될 수 있다.

- 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다.

- 그래서 임의로 width, height 변경을 할 수 없다.

- line-height로 줄의 높낮이를 조절할 수 있다.

- 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표기가 된다.

 

HTML5의 인라인 요소 종류

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var