윤곽 Box Properties

여백 Margin

윗 여백 Top Margin 오른쪽 여백 Right Margin 밑 여백 Bottom Margin 왼쪽 여백 Left Margin 형식 margin-top(-right, -bottom, -left): <value=length> | <percentage> | auto> 보기 BODY { margin-top: 10px } 길이Length나 백분율Percentage을 지정함으로써 윗(오른쪽, 밑, 왼쪽) 여백을 설정한다. 음수도 허용한다.

여백 Margin

형식 margin: <value=<length> | <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=<length> | <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= thin | medium | thick | <length>> 보기 P {border-top-width: 2px } 윗 테두리선의 굵기가 2px(색은 글꼴Font에 지정된 색.) 사방의 테두리선의 굵기를 지정한다. 음수는 허용하지 않는다. 초기값Initial Value는 'medium'이다.

테두리의 굵기 Border Width

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

테두리의 색상 Border Color

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

Clear

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