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
 

관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
너의 하루하루가 너를 형성한다. 그리고 머지 않아 한 가정을, 지붕 밑의 온도를 형성할 것이다. 또한 그 온도는 이웃으로 번져 한 사회를 이루게 될 것이다. 이렇게 볼 때 너의 ‘있음’은 절대적인 것이다. 없어도 그만인 존재가 아니라는 말이다. (법정스님)