<HTML+CSS3>테두리 관련 속성들

border-width속성-테두리 두께 지정하기

-테두리 두께를 지정할 때 1px나 5px처럼 직접 크기를 입력할 수도 있고 thin이나 medium,thick같은 키워드 중에서 하나를 선택할 수도 있다.

 

속성 값

thin<medium <thick 순으로 굵고 다른 속성으로는 크기를 입력해 직접 지정할 수 있다.

ex)border-width:2px ->네 방향 모두 2px

border-width:thin thick thin 5px ; ->위아래는 얇게 오른쪽은 굵게 왼쪽은 5px

 

border-color속성 –테두리 색상 지정하기

-이 속성을 사용하면 네 방향 테두리의 색상을 한꺼번에 설정할 수 있다.

 

속성 값

(1)색상 값 :색상 이름이나 16진수 값, rgb값 등을 이용해 색상을 지정한다

(2)transparent : 투명하게 나타낸다. 기본값임

ex) border-color:red; ->빨간색 테두리

 

border-style 속성 – 테두리선 스타일 지정하기

-테두리 스타일의 기본값은 none이므로 스타일시트에서 테두리 스타일을 따로 지정하지 않으면 테두리가 화면에 표시되지 않는다.

 

border-style 속성 값

 

%테두리 없음은 값에 0 을넣어서 없앨 수 있다 .!!

border속성 – 테두리 스타일 묶어서 지정하기

-border속성에는 4가지 방향이 있다. 이 속성을 방향에 따라서 두께와 색상,스타일을 한꺼번에 묶어서 지정할 수 있다. 두께와 색상, 스타일의 순서는 상관 없다.

특정 방향에만 테두리를 표시하려고 할 때 사용하면 편리하다 .

ex) border-top:두께값| 색상 값| 스타일;

흔히 텍스트에 밑줄을 그을 때 사용된다

 

ex) .a {border-bottom:1px blue soid ; } ->아래쪽에만 1px파란색 실선

네 방향의 테두리 스타일을 다르게 지정하고 싶다면 방향을 함께 써서 따로 지정하면 되고, 스타일을 같게 하려면 border속성만 이용하면 된다.