Inline elements 와 Block level elements

Inline elements 와 Block level elements

photo by nidhug

일반적으로 HTML 요소는 몇가지로 분류할 수 있는데 그 중에서 특히 중요하게 다루어지는 것이 바로 Block level 과 Inline 요소입니다. 이 개념을 확실하게 이해하고 있어야 코드를 정확하고 바르게 사용할 수 있습니다. 본래 HTML에서의 개념이지만 CSS에서도 관련성이 많기때문에 비중있게 다루어집니다. 오늘은 Block level elements 와 Inline elements는 어떤 종류가 있고, 차이점이 있는지 이야기해 보겠습니다.

Block level elements

1. Block level elements 는 HTML문서의 body 영역에 사용됩니다.
2. Block level elements 는 다른 Block level element 와 Inline element를 포함 할 수 있습니다.
3. Block level elements 는 하나의 라인에 하나만 들어오며, 복수로 들어올 수 없습니다.
4. Block level elements 는 width와 height 값을 가질 수 있습니다.
5. Block level elements 는 margin과 padding 값을 가질 수 있습니다.
6. Block level elements 는 vertical-align 속성이 무시됩니다.

※ 부연 : 3번은 결과적으로 Block level elements는 새 문단에서 시작되게 된다는 말입니다. 하지만  Block level elements가 하나의 라인을 다 차지한다고 하더라도 그것은 자신을 포함하고 있는 상위 엘리먼트 또는 부모 엘리먼트의 width값에 종속됩니다.

Block level Element의 종류 

• p
• h1, h2, h3, h4, h5, h6
• ol, ul
• pre
• address
• blockquote
• dl
• div
• fieldset
• form
• hr
• noscript
• table

Inline elements

1. Inline elements 는 HTML문서의 body 영역에 사용됩니다.
2. Inline elements 는 다른 Inline element를 포함할 수 있지만 Block level element를 포함할 수는 없습니다.
3. Inline elements 는 기본적으로 하나의 라인에 중복하여 사용할 수 있으나, 줄바꿈이 일어나지는 않습니다.
4. Inline elements 는 width와 height 값을 가질 수 없습니다.
5. Inline elements 는 상/하 margin과 padding 값을 가질 수 없습니다.
6. Inline elements 는 vertical-align 속성이 적용될 수 있습니다.



Inline elements의 종류 

• b, big, i, small, tt
• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
• a, bdo, br, img, map, object, q, script, span, sub, sup
• button, input, label, select, textarea

고도를 기다리며 zenith5.tistory.com by 킥스

<관련글>

[CSS] - CSS 선언방법