css_ border속성
페이지 정보
작성자 LYJ 작성일08-07-31 15:12 조회5,764회 댓글0건본문
1) 테두리의 색상, 형식 두께를 지정하는 border 속성<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
★ border 속성을 이용한 테두리 색상 설정하기
속성 |
형식 |
{ border-color:[색상명 | 색코드]{1,4} } |
테두리 색상을 한꺼번에 설정 |
{ border-top-color:색상명 | 색코드 } |
위쪽 테두리의 색상 설정 |
{ border-bottom-color:색상명 | 색코드 } |
아래쪽 테두리의 색상 설정 |
{ border-left-color:색상명 | 색코드 } |
왼쪽 테두리의 색상 설정 |
{ border-right-color:색상명 | 색코드 } |
오른쪽 테두리의 색상 설정 |
★ border 속성을 이용한 테두리 형식 설정하기
속성 |
형식 |
{ border-style:속성값{1,4} } |
테두리 스타일을 한꺼번에 설정 |
{ border-top-style:속성값 } |
테두리 위쪽 스타일 설정 |
{ border-bottom-style:속성값 } |
테두리 아래쪽 스타일 설정 |
{ border-left-style:속성값 } |
테두리 왼쪽 스타일 설정 |
{ border-right-style:속성값 } |
테두리 오른쪽 스타일 설정 |
★ border 속성을 이용한 테두리 두께 설정하기
속성 |
형식 |
{border-width:[thin | medium | thick | 길이]{1,4}} |
테두리두께를 한꺼번에 설정 |
{border-top-width:thin | medium | thick | 길이} |
테두리 위쪽 두께 설정 |
{border-bottom-width:thin | medium | thick | 길이} |
테두리 아래쪽 두께 설정 |
{border-left-width:thin | medium | thick | 길이} |
테두리 왼쪽 두께 설정 |
{border-left-width:thin | medium | thick | 길이} |
테두리 오른쪽 두께 설정 |
★ border 속성을 이용한 테두리 일괄적으로 설정하기
속성 |
형식 |
{ border:테두리 두께 색상스타일} |
테두리 일괄 설정 |
{ border-top:테두리두께색상스타일} |
위쪽 테두리 일괄 설정 |
{ border-bottom:테두리두께색상스타일} |
아래쪽 테두리 일괄 설정 |
{ border-left:테두리두께색상스타일} |
왼쪽 테두리 일괄 설정 |
{ border-right:테두리두께색상스타일} |
아래쪽 테두리 일괄 설정 |
① 테두리 색상 설정
테두리의 색상을 설정하려면 border-color를 이용한다. {1,4}는 최소 1개에서 최대 4개 들어간다는 뜻이다. 네 개를 모두 지정하면 그 순서 의미는 top, right, bottom, left이다.
② 테두리 스타일 설정
테두리의 스타일을 설정하려면 border-style을 이용한다.
속성 |
형식 |
none |
스타일을 사용하지 않으며, border-width의 값은 0이 된다. |
dotted |
점선으로 표현된다. |
dashed |
굵은 점선으로 표현된다. |
solid |
실선으로 표현된다. |
double |
이중 실선으로 표현된다. |
groove |
오목하게 들어간 액자 테두리 모양으로 표현된다. |
ridge |
볼록하게 나온 액자 테두리 모양으로 표현된다. |
inset |
내용이 잠긴 느낌의 입체선 모양으로 표현된다. |
outset |
내용이 튀어나온 느낌의 입체선 모양으로 표현된다. |
③ 테두리 두께 설정
테두리의 두께는 border-width 속성을 이용하여 설정한다. 말 그대로 thin이 가장 얇고, thick가 가장 두껍다. 초기값은 중간을 의미하는 medium이다. 각 값에는 길이 단위를 넣어줘도 된다.
④ 테두리 일괄 설정
border 속성을 이용하면 지금까지 테두리에 관해서 배웠던 스타일을 종합해서 일괄 설정할 수 있다.
댓글목록
등록된 댓글이 없습니다.