본 사이트는 웹표준을 준수하여 웹반응형으로 제작되었습니다. 디바이스에 따라 최상의 해상도로 확인하실 수 있습니다:)

블럭(block)요소와 인라인(inline)요소

2013.07.31 01:13

admin 조회 수:4724



퍼블리싱 태그는 그 성질에 따라 크게 2가지로 나눌 수 있다. 

블럭요소 / 인라인요소

 

블럭요소에는 대표적으로 div, p, h1~h6, ul, ol, li, dl, dt, dd 등이 있다.

인라인요소는 등이 있다.

 

블럭요소는 사용하면 기본적으로 가로 100%의 넓이를 가지며 세로로 죽 나열되고

인라인요소는 내부컨텐츠의 넓이 만큼의 넓이를 가지며 가로로 나열된다.

 

말로 설명하기보다 한번 사용해보면 그 특성을 바로 이해할 수 있다.

 

그런데 블럭요소와 인라인요소는 이 특성 외에도 마크업 테스트시에 유의해야할 아주 중요한 속성이 있다.

블럭요소 내부에는 블럭요소와 인라인요소를 모두 사용할 수 있지만

인라인 요소 내부에는 인라인 요소만 사용할 수 있다.

이를 어길 시에는 마크업오류가 발생하게 된다.

 

그리고 예외사항 하나,

p태그와 h1~h6요소는 블럭요소이지만 내부에 블럭요소를 사용할 수 없다.

 

이정도로 정리할 수 있을 듯 한데 코딩을 계속하다보면 숨겨진 법칙(?)이 더 있을지도?

 

코딩 좀만 하다보면 자연스레 알게 되는 것들이지만 한번쯤 정리해 보는 게 좋을 듯 해서 끄적거려본다.