HTML 의 inline 요소와 block 요소의 차이점

 

 

요소에는 블록요소와 인라인요소라고 하는 개념이 존재한다.

 

블록요소

블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다.

1. 줄 바꿈이 일어남.

2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함)

종류

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

 

 

인라인요소

인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다. 그래서 임의로 width, hegith 로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌우측 정렬을 할 수 있다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다.

 

1. 줄 바꿈이 일어나지 않음.

2. 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 인라인 요소 안에는 블록 요소를 포함할 수 없음.

4. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 함.

 

종류

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

 

HTML 블록요소 인라인요소 개념 및 차이점

 

[HTML] 인라인요소와 블록요소 구분하기