2008/08/06 15:53
[HTML] Box Model General Web2008/08/06 15:53
Box Model
XHTML 문서는 계층적으로 조직화된 엘리먼트(태그)를 포함합니다. 웹 브라우저는 엘리먼트의 레이아웃이나 내용의 비주얼 포맷팅을 위해 CSS를 사용합니다.
웹 브라우저는 웹 페이지에 각 엘리먼트를 묘사하기 위해 직사각형을 그립니다. 그리고 아래의 그림은 페이지에 직사각형 레이아웃이 그려진 것을 보여줍니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CSS Example</title> </head> <body> <h1>Shoppling List</h1> <p>Please <strong>don't</strong> forget the following:</p> <ul> <li>Large tomatoes</li> <li>Red bell peppers</li> <li>Eggplant</li> </ul> </body> </html>
Shoppling List
Please don't forget the following:
- Large tomatoes
- Red bell peppers
- Eggplant
엘리먼트가 묘사하는 박스나 직사각형은 4개의 부분으로 구성됩니다. 아래의 그림은 그것에 대한 설명인데 내용, 보더, 내용과 보더 사이에 공간이 있는데 그것을 패딩이라고 부릅니다. 그리고 보더와 직사각형의 모서리 사이의 공간을 마진이라고 합니다.
Margin
Border
Padding
Hello World
엘리먼트는 2가지 타입으로 되어 있다. 블럭(block)과 인라인(inline)이다.
Block elements - 블럭 엘리먼트는 부모 엘리먼트에 대해 100%의 넓이를 가진다. 예를 들어서 h1은 블럭 엘리먼트이다. h1 다음에 나오는 엘리먼트는 모두 아래에 위치하게 된다.
Inline elements - 인라인 엘리먼트는 단지 내용의 넓이만 잡는다. 이것의 의미는 두개 또는 그 이상의 인라인 엘리먼트가 같은 라인상에서 디스플레이 될 수 있음을 의미한다. 예를 들어서 a 태그는 인라인 엘리먼트 이다.
'General Web' 카테고리의 다른 글
| CSS1 - 1. 기본개념 (0) | 2008/11/30 |
|---|---|
| W3C 표준 DOM (0) | 2008/11/30 |
| [HTML] Box Model (0) | 2008/08/06 |
| 2. xml 문서의 생성과 CSS를 이용한 XML 문서 출력 (0) | 2008/04/11 |
| xml과 10가지 설계목표 (0) | 2008/04/11 |
| [RDF 입문서] 1. 소개 (0) | 2008/03/12 |
TAG Box Model
