HTML Block, Inline TAG

HTML태그는 크게 블록 요소와 인라인 요소로 나누어지게 되며 각각 요소들은 차이점을 가지고 있다.

 

# 블록 태그

div, nav, h1~6, table, ul, ol, li, form, header, footer, p, pre, form 등등

 

# 블록 태그의 특징

 1. 자동으로 줄바꿈이 이루어진다.

 2. width, height 값을 설정 할 수 있으며 설정하지 않을 경우 부모의 값을 물려 받는다.

 3. vertical-align, text-align 값이 적용되지 않는다.

 

 블록 태그는 모든 인라인 태그를 포함할 수 있으며 다른 블록 태그도 일부 포함 할 수 있다.

기본적으로 가로폭이 페이지 전체를 차지하는 직사각형 형태를 가지고 있으며,

width, height, margin, padding 등 값을 변경해 레이아웃을 수정 할 수 있다.

 

 

# 인라인 태그

a, button, span, strong, img, input, select, textarea 등등

 

# 인라인 태그의 특징

 1. 줄바꿈이 이루어지지 않는다.

 2. width, height 값이 적용되지 않는다.

 

 인라인 태그는 항상 블록 태그안에 포함되어 있으며, 인라인 태그안에 다른 인라인 태그가 포함될 수도 있다.

기본적으로 컨텐츠가 끝나는 지점까지의 넓이를 가지고 있기 때문에 임의로 너비와 높이를 변경할 수 없다.

대신 line-height로 높이는 변경이 가능하며, text-align으로 텍스트를 좌, 우, 중앙으로 변경할 수 있다.

줄바꿈이 이루어지지 않으며, 기본 좌측에서부터 시작하여 우측으로 이어서 표시가 된다.

 

 

P.S // HTML의 모든 태그는 CSS의 display 를 이용해 블록, 인라인 태그로 변경할 수 있다.