윤곽 Box Properties

여백
Margin

윗 여백 Top Margin
오른쪽 여백 Right Margin
밑 여백 Bottom Margin
왼쪽 여백 Left Margin
형식 margin-top(-right, -bottom,
-left):<value

<percentage> | auto>
보기
BODY { margin-top: 10px }
길이Length나 백분율Percentage을 지정함으로써
윗(오른쪽, 밑, 왼쪽) 여백을 설정한다. 음수도 허용한다.

여백
Margin

형식
margin:<value

|<percentage> | auto | {1, 4}>
보기
BODY
{ margin: 10px } 사방의 여백이 10px.
P {
margin: 3px 5px } 윗,밑 여백은 3px. 왼, 오른 여백은 5px.
DIV {
margin: 1px 2px 3px 4px } 윗1px, 오른 2px, 밑 3px, 왼 4px.
4가지 여백을 한꺼번에 지정할 때에 사용한다. 두개나
세개의 값을 정하면 생략된 값은 반대쪽 여백과 동일하게 나타난다..

공백
Padding

윗 공백 Top Padding
밑 공백 Bottom Padding
오른쪽 공백 Right Padding
왼쪽 공백 Left Padding
형식 padding-top(-bottom,
-right, -left):<value

|<percentage>>
보기 DIV { padding-top: 10px
} DIV안의 문자는 위로 10px만큼 공백을 가지고 나타난다.

공백Padding은 글자나 문자의 외곽에 빈 공간을 설정한다.
여백Margin이 전체 문서의 외곽에 빈 공간을 설정하는 것과 차이가 있음을 알아두자.

공백
Padding

형식 padding:<value=<length>
|<precentage> | {1,4}>
보기 P
{ padding: 2px 4px 5px } 윗 공백은 2px, 오른 4px, 밑 5px, 왼 4px.
사방의 공백을 한꺼번에 지정한다.(방법은 여백Margin과
동일) 음의 공백은 허용되지 않는다.

테두리
Border

윗테두리의 굵기 border-top-width
오른쪽 테두리의 굵기 Right Border Width
밑 테두리의 굵기 Bottom Border Width
왼쪽 테두리의 굵기 Left Border Width
형식 border-top(right,
bottom, left)-width:<value

보기 P {border-top-width:
2px } 윗 테두리선의 굵기가 2px(색은 글꼴Font에 지정된 색.)
사방의 테두리선의 굵기를 지정한다. 음수는 허용하지 않는다.
초기값Initial Value는 'medium'이다.

테두리의
굵기 Border Width

형식 border-width:<value

| medium | thick |<length> | {1,4}>
보기 P
{ border-width: 2px 3px } 윗,밑 테두리선의 굵기는 2px. 오른,왼쪽 테두리선의 굵기는
3px.
사방 테두리선의 굵기를 지정한다.(방법은 여백Margin과
동일)

테두리의
색상 Border Color

형식 border-color:<value

보기 P {border-color: red,
white, black } 윗 테두리선의 색은 'red',오른과
왼 'white',밑 'black'.
테두리Border선의 색상을 지정한다.

테두리의
형태 Border Style

형식 border-style:<value=
none|dotted|dashed|solid|double|groove|ridge|inset|outset {1,4}>
보기 P {border-style: solid
}
이것은 테두리Border선의 형태를 지정하는데 사용한다.
이 특성이 지정되지 않으면 테두리선은 볼 수 없다. 이 역시 사방을 각각
또는 동일하게 지정할 수 있다.
윗 테두리 Top Border
오른쪽 테두리 Right Border
밑 테두리 Bottom Border
왼쪽 테두리 Left Border
형식 border-top(right,
bottom, left):<value

<border-top-width>|<border-style>|<color>>
보기 P { border-top: 10px
solid #ffffff } 윗테두리의 굵기는 10px,
형태는 'solid', 색상은 흰색.
이것은 테두리선의 굵기Width와 스타일Style, 색상Color을
지정한다. border-style은 단 한가지만 지정되어야 한다.

테두리
Border

형식 border:<value=<border-widht>
|<border-style> | <color>>
보기
P { border: groove 3px }

A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
이것은 테두리의 굵기Width와 형태Style, 색상Color을
지정한다. 위의 모든 경우에서 border-style이 반드시 지정되어 있음에 유의하자. 그리고, Border에서는 사방의 굵기Length와
형태Style, 색상Color은 동일하게만 지정된다. 사방을 각각으로 표현하려면, border-top, border-right,
border-bottom, border-left, border-color, border-width, border-style,
border-top-width, border-right-width, border-bottom-width 또는 border-left-width
등에서 하나 또는 여러가지를 선택해서 사용해야 한다.

기타
: 폭 Width

형식 width:<value

|<percentage> | auto>
보기
INPUT.button { width: 10px
} 단추의 길이가 10px로 지정된다. P { width: 50px } P안의 문장은 가로 50px을 넘지 않는 폭Width을 가지게 된다.
HTML의 각 요소Element에는 묶음요소Block-Level
Element(P, TABLE, OL 등)나 넣기 요소Replaced Element(IMG, INPUT, TEXTAREA, SELECT와
OBJECT 등)가 있다. 여기에 (가로의)길이Length를 지정하는 것이 폭Width의 역할이다. 초기값Initial Value는
'auto'이다.

기타
: 높이 height

형식 width:<value

| auto>
보기
P { width:200px; height:
200px } P안의 문장은 가로 200px, 세로 200px의
넓이 안에 나타난다.
IMG.foo { width: 40px; height: 40px } 그림은 원래의 크기와 관계없이 40px X 40px의 크기를 가진다.
묶음 요소Block-Level나 넣기 요소Replaced
Element에 (세로의)길이Length를 지정한다. 폭Width과 높이Height를 함께 사용하여 묶음요소Block-Level
Element의 넓이를 지정할 수 잇으며, 이것은 상당한 편집효과를 낼 수 있다. 그림Image의 크기를 적당히 조정하는데에도
유용할 것이다.

기타
: 놓기 Float

형식 width:<value

| right | none>
보기 IMG.foo { float: right
} 그림이 오른쪽에 나타난다.
이것은 HTML의 'ALIGN=left' 등과 동일한
기능을 한다. CSS1에서는 모든 태그에대해 'float'를 허용한다. HTML에서는
IMAGE와 TABLE에서만 허용한다. 초기값Initial Value은 'none'이다.(이 기능의 특징은 놓기float로
지정된 것 외의 문장들이 그 주위를 감싸며Wrap 나타난다는 것이다.

Clear

형식 width:<value

| left | right | both>
보기 H1 { clear: left } H1에 묶인 문자Letter는 'left'를 피해서 나타난다. 이것은 HTML의
와 비슷한데, CSS1은 모든 요소Element에 적용되며, 놓기Float에 의해 결정된 자리를 다른 요소Element에 의한
내용이 침범하지 않게 하기 위한 것이다.

• 제작: w3master@sanyaro.com bestsouth@korea.com