Html & Script

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

작성자 정보

컨텐츠 정보

본문

테이블,이미지 테두리 스타일 .................................................
테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 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 를 따로 따로 지정해야한다.


■ 이미지에 적용하기
sonccc.gif sonccc.gif sonccc.gif
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
 
내용출처 : http://www.dragoneye.co.kr/

관련자료

댓글 0
등록된 댓글이 없습니다.
목록
Today's proverb
유쾌한 사람은 자기 일에만 몰두하는 사람이 아니다. 때론 자신의 일을 전부 제쳐놓고 타인의 문제에 전력을 쏟는 열정이 있는 사람이다. 타인에게 자신의 힘을 나누어주고 마음을 열어주는 것은 자신의 삶을 행복하게 만드는 방법이다.