HTML의 블록요소와 인라인 요소 특징

HTML 태그는 기본적으로 블록 요소와 인라인 요소로 나누어져 있습니다. 이것의 차이점과 특징을 모른다면 CSS를 써먹는 데 있어서 큰 고비가 닥쳐올 것입니다. 가장 기본이 되기 때문에 충분히 이해해야 합니다.

블록 요소

HTML 태그에서 블록 요소는 div, h1, p 태그 등이 있으며 사용 가능한 최대 가로 너비를 사용합니다. 아래 예제를 보면 간단하게 이해할 수 있습니다.

위 예제를 통해 크기를 지정할 수 있다는 사실을 알았습니다. 또한, 크기를 지정하지 않으면 width값 auto, height값 auto로 설정되어 있습니다.

블록 요소의 또 다른 특징으로는 수직으로 쌓입니다. 이 말은 연속해서 5개의 div 태그를 입력하고 살펴보면 아래 방향으로 쌓인 것을 확인할 수 있습니다. 또한 margin, padding의 위, 아래, 좌, 우를 설정할 수 있습니다.

따라서 블록 요소는 레이아웃을 잡을 때 많이 사용됩니다.

HTML 태그에서 인라인 요소는 span, img 태그 등이 있으며 필요한 만큼의 너비를 사용합니다. 이것도 예제를 통해 쉽게 수 있습니다.

위 예제를 통해 인라인 요소는 크기를 지정할 수 없다는 사실과 문자만큼만 너비를 사용한다는 사실을 알았습니다. 인라인 요소의 기본값은 width값 0, height값 0으로 설정되어있습니다.

인라인 요소는 수평으로 쌓이며 span 태그를 사용할 때 코드를 붙여서 작성하면 위 예제와 같이 띄어쓰기가 들어가 있지 않은데 줄 바꿈 한 코드는 띄어쓰기가 적용됩니다.

블록 요소와 다르게 인라인 요소는 margin, padding 중에 위, 아래는 설정할 수 없습니다.

따라서 인라인 요소는 텍스트를 작업하는 용도로 사용할 수 있습니다.