CSS에서 요소는 항상 직사각형 상자 또는 스트립으로 취급됩니다. 상자를 설명하는 데 사용되는 프로퍼티는 다음과 같습니다:
- width - 요소의 너비
- 높이 - 요소의 높이
- 왼쪽 - 왼쪽까지의 거리
- 오른쪽 - 오른쪽까지의 거리
- 상단-상단까지의 거리
- 하단 - 하단까지의 거리
- 여백 - 바깥쪽 여백
- 테두리 - 요소 주변의 테두리
- 패딩 - 내부 간격, 즉 프레임에서 요소 콘텐츠까지의 거리입니다.
이러한 속성은 이미 소개했습니다.
요소의 총 너비는 개별 사양의 너비를 합한 값입니다. (높이도 마찬가지입니다.)
다음은 예시입니다:
div#box { width: 100px; padding: 20px; /* 좌우 각 20px / border: 2px solid; / 좌우 각 2px / margin: 0 30px; / 좌우 각 30px */ }이 div 영역의 너비는 얼마일까요? 개별 값을 살펴봅시다:
- 100 픽셀
- 20픽셀의 2배
- 2 픽셀의 2 배
- 30픽셀의 2배
이렇게 하면 요소의 총 너비는 204픽셀이 됩니다.
요소의 너비와 높이는 너비와 높이에 의해 결정됩니다. 이러한 사양이 스타일시트에 명시되어 있지 않은 경우 다음이 적용됩니다:
- 너비가 누락된 경우 상자는 주변 요소만큼 넓게 표시됩니다.
- 높이가 누락된 경우 요소는 해당 콘텐츠만큼 높게 표시됩니다.
예시
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> div#box { border: 1px solid; /* 좌우 2px */ margin: 0 30px; /* 좌우 30px */ background-color:#6600CC; } </style> </head> <body> <div id="box">PSD-Tutorials.EN</div> </body> </HTML>
브라우저에서 이렇게 표시됩니다:
div 요소의 부모 요소는 body입니다. 따라서 요소는 실제로 본문 요소만큼 너비로 표시됩니다. 그러나 높이는 콘텐츠를 기준으로 합니다.
모든 것을 0으로
모든 브라우저에는 스타일 시트가 내장되어 있습니다. 이러한 스타일시트에는 몇 가지 기본값이 정의되어 있습니다. 예를 들어 패딩과 여백에도 이러한 기본값이 적용됩니다. 안타깝게도 이러한 기본값은 브라우저마다 다릅니다. 이러한 측면은 예를 들어 상자 모델과 관련하여 각 브라우저에서 동일한 결과를 얻기가 어렵게 만듭니다. 따라서 기본 브라우저 여백을 0으로 설정하는 것이 좋습니다. 다음과 같이 설정할 수 있습니다:
* { padding: 0; margin: 0; }
이 줄을 스타일시트의 시작 부분에 삽입합니다. 이렇게 하면 이제 원하는 위치에 상자를 배치할 수 있습니다.
상자 유형
요소가 최종적으로 표시되는 방식과 다른 요소에 영향을 미치는 방식은 요소 유형에 따라 다릅니다. 실제로 CSS 사양은 블록 요소와 인라인 요소를 구분합니다. (다른 유형도 있지만 여기서는 하위 역할만 하므로 무시합니다.) 블록 요소는 항상 줄을 만듭니다.
블록 요소는 항상 새 줄을 만듭니다. 후속 요소도 새 줄에서 시작됩니다. 일반적인 블록 요소에는 p, div, h1, ul 등이 있습니다. 이러한 요소에는 앞서 나열한 외부 간격, 내부 간격, 높이, 너비 및 프레임 속성이 적용됩니다.
<h1>디지털 페인팅 및 매트 페인팅: 이미지 구성 정의</h1> <p>모듈 2 - 파트 2: 이미지는 항상 전체입니다. 하지만 항상 보는 사람이 어디를 먼저 봐야 하는지 고려해야 합니다.</p>
브라우저에서 결과를 보면 h1과 p가 각각 고유한 줄을 생성하는 것을 볼 수 있습니다.
반면 인라인 요소는 자체 단락을 생성하지 않고 일반 텍스트 흐름에 표시됩니다. 일반적인 인라인 요소는 span, em, strong, img, br 등입니다. 인라인 요소에는 세로 간격과 너비 및 높이 사양이 적용되지 않습니다.
<h1><em>디지털 페인팅 및 매트 페인팅</em>: 이미지 구성 정의하기</h1> <p>모듈 2 - 2부: <strong>이미지는 항상 전체입니다</strong>. 하지만 항상 보는 사람이 어디를 먼저 봐야 하는지 고려해야 합니다.
여기에서도 결과를 살펴보세요:
이제 실제로 블록 요소인 요소를 인라인 요소로 바꿀 수 있습니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.ko</title> <style> h1 { background-color:#00CCFF; } </style> </head> <body> <h1>디지털 페인팅 및 매트 페인팅</h1> <p>모듈 2 - 파트 2: <em>이미지는 항상 전체입니다</em>. 하지만 항상 보는 사람이 어디를 먼저 봐야 하는지 고려해야 합니다.</p> </body> </html>브라우저에서 결과를 살펴보세요.
h1 제목의 배경색은 요소가 전체 너비에 걸쳐 있음을 나타냅니다. 너비는 상위 본문 요소를 기준으로 합니다.
이제 표시 속성이 작동합니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.ko</title> <style> h1 { display:inline; background-color:#00CCFF; } </style> </head> <body> <h1>디지털 페인팅 및 매트 페인팅</h1> <p>모듈 2 - 파트 2: <em>이미지는 항상 전체입니다</em>. 하지만 항상 시청자가 어디를 먼저 봐야 하는지 고려해야 합니다.</p> </body> </html>
요소의 너비는 디스플레이: 인라인에 의해 변경됩니다.
실제로 요소 너비는 이제 기존 콘텐츠에 맞게 조정됩니다. 다음은 여전히 디스플레이에 할당할 수 있는 값에 대한 개요입니다.
- none - 표시되지 않음
- 블록 - 요소가 블록 요소로 표시됩니다(즉, 새 줄을 만듭니다).
- 인라인 - 요소가 인라인 요소로 표시됩니다. 즉, 현재 텍스트 흐름에 표시됩니다.
- 인라인 블록 - 높이, 너비 및 간격을 지정할 수 있는 외부 블록을 만듭니다. 그러나 각 요소는 현재 텍스트 흐름에 유지됩니다. 따라서 블록과 인라인 요소의 조합입니다.
- 목록 항목 - 요소가 블록 요소로 표시됩니다. 그러나 글머리 기호 앞에 표시됩니다.
- run-in - 콘텐츠에 따라 블록 또는 인라인 요소를 만듭니다.
- table - HTML에서 알려진 테이블 요소처럼 작동합니다.
- inline-table - HTML 요소 테이블처럼 작동하지만 인라인으로 작동합니다.
- table-row - 요소는 서로 나란히 배열된 자식 요소를 포함합니다. HTML 요소 tr처럼 작동합니다.
- table-cell - 이 요소는 테이블 셀을 나타내며 두 HTML 요소 th 및 td처럼 작동합니다.
- table-row-group - 요소에는 여러 하위 요소가 나란히 배열된 요소 그룹이 포함되며 tbody HTML 요소와 동일한 효과가 있습니다.
- table-header-group - 요소는 여러 하위 요소가 나란히 배열된 요소 그룹을 포함하며 HTML 요소와 동일한 효과를 갖습니다.
- table-footer-group - 요소는 여러 하위 요소가 나란히 배열된 요소 그룹을 포함하며 tfoot HTML 요소와 동일한 효과를 갖습니다.
- table-column - 열에 있는 셀의 속성을 설명하는 데 사용됩니다. table-column은 HTML의 col 요소와 같은 역할을 합니다.
- table-column-group - 이 요소에는 열에 있는 셀의 속성을 설명하는 데 사용되는 요소 그룹이 포함되어 있습니다. HTML-colgroup 요소처럼 작동합니다.
- table-caption - 표 캡션을 정의하는 데 사용됩니다. 이 속성은 HTML 캡션 요소와 동일한 효과를 갖습니다.
CSS는 실제로 다양한 요소 유형에 대해 다양한 표시 옵션을 제공합니다. 이러한 옵션은 요소의 위치 지정과 관련하여 결정적인 역할을 합니다. 이에 대한 자세한 내용은 다음 튜토리얼에서 설명합니다.
