웹마당넷 |테이블, 이미지 테두리관련 스타일

CSS3

제 목

테이블, 이미지 테두리관련 스타일

작성자

오렌지

등록일

2007-09-29 12:16:47

조회수

3,465

테이블,이미지 테두리 스타일 .................................................

테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 CSS를 사용할 수 있다.

■ border-style

border-style:none

border-style:dotted

border-style:dashed

border-style:solid

border-style:double

border-style:groove

border-style:ridge

border-style:inset

border-style:outset

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-style border-bottom-style border-left-style border-right-style 를 따로 따로 지정해야한다.

■ border-color

border-color:#006699
border-style:dotted

border-color:tomato
border-style:dashed

border-color:orange
border-style:solid

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-color border-bottom-color border-left-color border-right-color 를 따로 따로 지정해야한다.

■ border-width

border-width:1px
border-color:#006699
border-style:dotted

1px

3px

border-width:1px
border-color:tomato
border-style:dashed

1px

3px

border-width:1px
border-color:orange
border-style:solid

1px

3px

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-width border-bottom-width border-left-width border-right-width 를 따로 따로 지정해야한다.

■ margin (바깥쪽 여백)

margin:3px
border-width:1px
border-color:#006699
border-style:dotted

margin 없이

margin:3px

margin:10px

*	4개의 태드리선을 모두 다르게 적용하려면 margin- top margin-bottom margin-left margin-right 를 따로 따로 지정해야한다.

■ width, height

width=300
height=40
border-width:1px
border-color:#006699
border-style:dotted

width=300
height=40

■ padding (안쪽 여백)

padding:5px
width=300px
border-width:1px
border-color:#006699
border-style:dotted

내용물 주위로 여백이...

*	4개의 태드리선을 모두 다르게 적용하려면 padding-top padding-bottom padding-left padding-right 를 따로 따로 지정해야한다.

■ 이미지에 적용하기


border-style:dotted; border-color:orange; border-width:3px	border-style:dashed; border-color:orange; border-width:3px	border-style:outset; border-color:orange; border-width:3px