css_ border속성 > CSS

본문 바로가기
사이트 내 전체검색


회원로그인

CSS

css_ border속성

페이지 정보

작성자 LYJ 작성일08-07-31 15:12 조회3,642회 댓글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 속성을 이용하면 지금까지 테두리에 관해서 배웠던 스타일을 종합해서 일괄 설정할 수 있다

 

댓글목록

등록된 댓글이 없습니다.


그누보드5
Copyright © jsp.pe.kr All rights reserved.
상단으로
모바일 버전으로 보기