CSS3 - CSS 스타일 - 경계선 - 경계선 폭과 색상 (11)

CSS3 - CSS 스타일 - 경계선 - 경계선 폭과 색상 (11)

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

경계선 폭과 색상에 대해서 알아보도록 하겠습니다.

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

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

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

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

css 스타일 - 경계선 폭이란?

경계선 폭은 border-width 라는 속성으로 경계선의 폭(두께)를 지정하는데 이러한

경계선의 두께는 흔히 px 단위 또는 border-width 속성의 값인 thick, medium, thin 등으로

일정하게 경계선 두께를 아래와 같이 지정 할 수 있습니다. 

<border-width 사용법>

추가로 위 border-width는 위와 같이 이전 포스팅에서 배운 경계선 스타일 border-styel 또는 border 속성을 사용해 경계선 스타일을 기본으로 설정해 놓아야 border-width가 동작하니 이점 꼭 기억하시기 바랍니다.

css 스타일 - 경계선 색상이란?

경계선 색상이란 border-color 이라는 속성을 이용해 경계선의 색상을 지정하는 것인데 이러한 색상

지정 방법은 아래와 같이 영문색상이름, 16진수 코드, rgb코드 3가지 방법이 있습니다.

<border-color 사용법>

추가로 위 border-color는 위 경계선 폭과 마찬가지로 경계선 스타일 border-styel 또는 border 속성을 사용해 경계선 스타일을 기본으로 설정해 놓아야 border-color가 동작하니 이점 꼭 기억하시기 바랍니다.

경계선에 대한 스타일, 두께, 색상을 한줄로 정의!

위와 같이 일일이 border-style, border-width, border-color 속성을 따로따로 쓰기란 불편한데

이럴때는 아래와 같이 border 속성을 정의 한 후 사용 합니다.

<경계선에 대한 두께, 스타일, 색상을 한꺼번에 정의한 방법>

사용법은 위와 같이 border 속성을 사용 후 앞에서 부터 선의 두께(폭)을 지정 후 

스타일 색상을 지정하면 됩니다. 

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