Untitled Document

속성값

1. box속성(2)

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

1) border-top-width

속성값: thin|medium|thick|length
윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 초기값은 medium이다.

IMG{margin-top:12px}

2) border-right-width
속성값: thin|medium|thick|length
오른쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 초기값은 medium이다.
3) border-bottom-width

속성값: thin|medium|thick|length
아랫쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 초기값은 medium이다.

4) border-left-width
속성값: thin|medium|thick|length
왼쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 초기값은 medium이다.
5) boder-width

속성값: thin|medium|thick|length
네 곳의 보더폭을 동시에 정한다.
하나의 속성값을 지정하는 경우에는 모든 방향에 있는 경계선의 두께를 같은 값으로 지정한다. 하나 이상의 값을 지정하는 경우에는 margin속성과 같이 처리된다. ( top right bottom left )

6) border-color

속성값:색상이름RGB값

BLOCKQUOTE{ border-color:red blue lime yellow}

border의 색을 지정하는 요소이다.
border-top-color, border-right-color, border-bottom-color, border-left-color 네가지를 사용할 수 있다.
border-color를 사용하면 한꺼번에 지정할 수있다.
윗쪽 패딩의 폭을 정한다. 초기값은 0이다. 하나 이상의 값을 지정하는 경우에는 margin속성에서와 같이 처리된다.(top, right, bottom, left)

7) border-style

속성값: nonedotteddashedsoliddoublegrooveridge|insetoutset
이 요소는 각 border의 모양을 지정하는 것이다.

P.example{border-style:solid dashed}

속성값들의 특징은 다음과 같다.

  • none: 아무것도 없음
  • solid: 입체감이 없는 박스
  • double: 테두리가 두개 있는 박스
  • inset: 명암을 아래에서 45도로 준다. 위가 어둡다.
  • outset: 명암을 위에서 45도로 준다. 아래가 어둡다.
  • groove: 가운데가 들어가고 양 끝이 나온 형상
  • ridge: 가운데가 나오고 양 끝이 들어간 형상
8) border-top, border-right, border-bottom, border-left

속성값: border-top-width|border-styleborder-color

H1{border-top:5px solidblue}

사각형 윗쪽 경계선의 너비, 스타일 색상을 한꺼번에 설정하기위해 사용되는 속성이다.

9)border-right

속성값: border-right-width|border-styleborder-color

사각형 오른쪽 경계선의 너비, 스타일 색상을 한꺼번에 설정하기위해 사용되는 속성이다.

10)border-bottom

속성값: border-bottom-width|border-styleborder-color

사각형 아래쪽 경계선의 너비, 스타일 색상을 한꺼번에 설정하기위해 사용되는 속성이다.

11)border-left

속성값: border-left-width|border-styleborder-color

사각형 왼쪽 경계선의 너비, 스타일 색상을 한꺼번에 설정하기위해 사용되는 속성이다.

12) border

속성값:border-widthborder-style|border-color

p.example{border:2px dotted #666633}

이 속성은 경계선 사각형의 각 부분의 너비, 스타일, 색상을 한 번에 설정하기 위해 사용되는 속성이다. 여기서 지정되는 값은 경계선 사각형의 모든 부분에 적용된다.

13) width

속성값:lengthpercentage|auto
박스의 폭을 지정한다.

table{width:80%}

14) height

속성값:lengthpercentage|auto
박스의 높이를 지정한다.

<이전   목록   다음>

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