CSS3 - CSS 스타일 - 경계선 - 경계선 스타일 (10)

CSS3 - CSS 스타일 - 경계선 - 경계선 스타일 (10)

오늘은 CSS3의 열번째 내용으로 CSS 경계선에 관련된 속성중

경계선과 경계선 스타일 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 경계선이란?

먼저 경계선이란 CSS에서 border 란 속성을 이용해 HTML 태그 주변에 경계선을

만들언 주는 속성으로 관련 속성에는 경계선의 스타일, 색상, 폭, 둥근경계선, 

경계선에 그림자를 입히는 것들이 있으며 경계선의 스타일 부터 

순서대로 하나씩 알아 보도록 하겠습니다.

경계선 스타일

 

경계선 스타일은 border-style 라는 속성으로 설정 할 수 있으며

이러한 속성은 아래와 같은 값으로 경계선의 스타일이 달라 집니다.

<p 태그에 bodrder-style 속성을 인라인 스타일로 적용한 결과>

속성 값	내용
none	경계선 없음 입니다.
solid	실선 입니다.
dashed	큰 점선 입니다.
dotted	작은 점선 입니다.
double	이중 경계선 입니다.
groove	오목한 모양의 실선 입니다.
inset	오목한 모양의 경계선 입니다.
outset	볼록한 모양의 경계선 입니다.
ridge	볼록한 모양의 실선 입니다.
hidden	경계선을 감춥니다.
inherit	부모 태그의 속성 값을 상속 받습니다.

<border-style 속성 값>

border-style는 위와 같은 속성 값으로 경계선의 스타일을 변경 할 수 있으며 아래와 같이 border-top (경계선 상단), border-left (경계선 왼쪽), border-bottom (경계선 아래쪽), border-right (경계선 오른쪽) 속성을 이용해 위, 왼쪽, 아래, 오른쪽 경계선 스타일을 모두 다르게 설정 할 수 있습니다.

   

<4개의 경계선을 각기 다르게 설정>

위와 같이 p태그에 인라인 스타일로 위, 왼쪽, 아래쪽, 오른쪽 등 경계선 스타일을 별도로

각각 주었으며 이러한 부분은 경계선을 주고 싶은 방향에 줄 수 있게 별도로 사용 가능 합니다.

그리고 위와 같이 일일이 top, left, bottom, right를 사용 하지 않고

한꺼 번에 줄 수 있는 방법이 있는데 이 방법은 아래와 같습니다.

<border-style 속성을 이용한 4개의 경계선 변경>

이번에는 border-style 속성을 이용해 한꺼번에 4개의 경계선을 변경 하는 방법 입니다.

여기서 위에 설명과 조금 다른게 있다면 왼쪽과 오른쪽 경계선이 뒤바뀐 것인데

뒤바뀐 이유는 위와 같이 border-style 속성을 입력 한 다음 속성 값을 연달아 입력하게 되면

제일 앞에 있는 속성 값 부터 시계가 흘러가는 방향으로 (위, 오른쪽, 아래, 왼쪽) 순으로 

스타일이 적용이 되기 때문에 바뀌게 된 것입니다.

추가로 위와 같이 속성 값을 연달아 입력해서 시계가 흘러 가는 방향 (위, 오른쪽, 아래쪽, 왼쪽)

으로 적용되는 방법은 CSS에서 모두다 공통 입니다. 

이상 CSS3 - CSS 스타일 - 경계선 - 경계선 스타일 (10)에 관련된 포스팅을 마치도록 하겠습니다.