✔웹코딩기초강좌 4 - HTML '블록타입'과 '인라인타입'

✔웹코딩기초강좌 4 - HTML '블록타입'과 '인라인타입'

각 요소들은 블록타입과 인라인타입으로 구분되는데, html을 작성할 때 꼭 알아둬야 할 기본 항목 중 하나다.

1. 블록타입 (Block Type, Block Level Elements)

블록타입(블록요소)는 기본적으로 줄바꿈이 일어나는 형태로 하나의 요소가 웹페이지 영역 내에서 좌측끝에서 우측 끝까지 전체 너비만큼 차지한다. Width(가로)와 Height(세로) 영역을 설정할 수 있으며, 완벽한 여백과 주변요소와의 간격을 조정한다.

이러한 블록타입에 해당하는 요소들로는 대표적으로 H1~H6요소, P요소, div 등이 있다.

(△ 블록타입 예시. 상단 Result 탭을 클릭해서 결과를 확인해보자)

2. 인라인타입(Inline Type, Inline Elements)

인라인타입은 블록타입과 반대되는 형태로 줄바꿈이 일어나지 않는 형태인데, 요소와 요소가 기본적으로 좌에서 우로 자연스럽게 배치된다.

원칙적으로 Height(높이) 지정은 불가하지만, 예외적으로 img 및 input 태그는 height 설정이 유효하며, 상하 여백과 주변 요소와의 상하 간격에 관련한 조정이 불가한 것이 특징이다.

대표적으로 a, img, strong, span 요소 등이 있다.

(△ 인라인타입 예시. 상단 Result 탭을 클릭해서 결과를 확인해보자)

<관련 포스팅>

✔HTML기초 - HTML, CSS, JAVA Script 입문 - ①  ㅣ  http://seo-apl.tistory.com/53

---

✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념  ㅣ  http://seo-apl.tistory.com/54

---

✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기  l  http://seo-apl.tistory.com/55

세오의 어필로그 ㅣ sseoteo@naver.com