Untitled Document

속성값.. 그 첫번째.

1. box속성

스타일시트는 모든 요소는 여러 겹의 상자로 둘러쌓여 있다고 가정한다. margin, border, padding 속성을 이용해 각각의 폭이나 색을 조정할 수 있다.
간단하게 그림으로 표시하면 아래와 같다.

3) margin-top

속성값:lengthpercentage|auto
왼쪽 마진의 폭을 정한다. 모든 element에 적용할 수 있고 초기값은 0이다.

IMG{margin-top:12px}

2) margin-right
속성값:lengthpercentage|auto
왼쪽 마진의 폭을 정한다. 모든 element에 적용할 수 있고 초기값은 0이다.
4) margin-bottom

속성값:lengthpercentage|auto
왼쪽 마진의 폭을 정한다. 모든 element에 적용할 수 있고 초기값은 0이다.

1) margin-left
속성값:lengthpercentage|auto
왼쪽 마진의 폭을 정한다. 모든 element에 적용할 수 있고 초기값은 0이다.
5) margin

속성값:lengthpercentage|auto
네 곳의 마진을 동시에 정한다.
세 번째처럼 3개의 속성값을 지정하면 두번째 값은 왼
쪽과 오른쪽 여백에 적용된다.
네 번째 예와 같이 4방향을 각각 입력하는 경우는 다음과 같이 시계 방향으로 입력해야 한다. {margin: top right bottom left }

body {margin: 2em } /* 모든 마진이 2em*/
body {margin:1em 2em} /* top과 bottom은 1em, right left 2em*/
body {margin: 1em 2em 3em} /* top은1em, left와 right는 2em, bottom은 3em*/
body {margin: 1em, 2em, 3em, 4em} /*top은 1em, left는 2em, right는 3em, bottom은 4em*/

6) padding-top

속성값:lengthpercentage

윗쪽 패딩의 폭을 정한다. 초기값은 0이다.

7) padding-right

속성값:lengthpercentage

오른쪽 패딩의 폭을 정한다. 초기값은 0이다.

8) padding-bottom

속성값: length|percentage

아래쪽 패딩의 폭을 정한다. 초기값은 0이다.

9) padding-left

속성값:lengthpercentage

왼쪽 패딩의 폭을 정한다. 초기값은 0이다.

10) padding

속성값:lengthpercentage

네 곳의 패딩 폭을 동시에 정한다.
네 번째 예와 같이 4방향을 각각 입력하는 경우는 다음과 같이 시계 방향으로 입력해야 한다. {padding: top right bottom left }
사용방식은 위의 마진과 같다.

H1{ background: white, padding:1em 2em;}

<이전   목록   다음>

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.