반응형
Inline elements 와 Block level elements
photo by nidhug
일반적으로 HTML 요소는 몇가지로 분류할 수 있는데 그 중에서 특히 중요하게 다루어지는 것이 바로 Block level 과 Inline 요소입니다. 이 개념을 확실하게 이해하고 있어야 코드를 정확하고 바르게 사용할 수 있습니다. 본래 HTML에서의 개념이지만 CSS에서도 관련성이 많기때문에 비중있게 다루어집니다. 오늘은 Block level elements 와 Inline elements는 어떤 종류가 있고, 차이점이 있는지 이야기해 보겠습니다.
Block level elements
- Block level elements 는 HTML문서의 body 영역에 사용됩니다.
- Block level elements 는 다른 Block level element 와 Inline element를 포함 할 수 있습니다.
- Block level elements 는 하나의 라인에 하나만 들어오며, 복수로 들어올 수 없습니다.
- Block level elements 는 width와 height 값을 가질 수 있습니다.
- Block level elements 는 margin과 padding 값을 가질 수 있습니다.
- 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
- Inline elements 는 HTML문서의 body 영역에 사용됩니다.
- Inline elements 는 다른 Inline element를 포함할 수 있지만 Block level element를 포함할 수는 없습니다.
- Inline elements 는 기본적으로 하나의 라인에 중복하여 사용할 수 있으나, 줄바꿈이 일어나지는 않습니다.
- Inline elements 는 width와 height 값을 가질 수 없습니다.
- Inline elements 는 상/하 margin과 padding 값을 가질 수 없습니다.
- 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 킥스
반응형
'정보' 카테고리의 다른 글
오렌지 캬라멜(Orange Caramel) 퍼니 허니(Funny Hunny) 뮤비/듣기/가사 (2) | 2011.12.23 |
---|---|
트랙백, 뭔가 했더니... (35) | 2011.12.22 |
2011 SMTOWN Santa U Are The One 뮤비 (0) | 2011.12.16 |
갤럭시 넥서스 시뮬레이터 등장 (0) | 2011.12.15 |
구글 애드센스 섹션타켓팅, 수익율을 올리는 방법 (6) | 2011.12.12 |
댓글