0052 CSS 테두리 두께와 색 설정하기

0052 CSS 테두리 두께와 색 설정하기

테두리 두께는 border-width 속성(property)으로 제어하고, border-width 속성(property)의 속성값은 키워드(thin, medium, thick)와 길이(px, em 등)가 온다.

    

테두리 색깔은 border-color 속성(property)으로 제어하고, border-color 속성(property)의 속성값은 색깔명(red, yellow 등), RGB, RGBA, HEX 코드 등이 온다. 

   

border-width와 border-color 속성(property)은 1개에서 4개까지의 속성값을 가질 수 있는데 테두리 스타일과 동일한 방식으로 작동한다. 

    

border-width와 border-color 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top)에서부터 시계방향으로 적용된다. 다음의 사례를 보자.

    

 border-style: solid;

 border-width: 6px 4px 2px 1px;

 border-color: black green blue red;

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 검은 실선, 오른쪽(right)은 4px 두께의 녹색 실선, 아래쪽(bottom)은 2px 두께의 파란 실선, 왼쪽(left)은 1px 두께 빨간 실선이 된다. 

   

   

   

border-width와 border-color 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top), 좌우(left and right), 아래(bottom)로 적용된다.  다음의 사례를 보자.

    

 border-style: solid;

 border-width: 6px 1px 3px;

 border-color: green blue red;

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 녹색 실선, 좌우(left and right)는 1px 두께의 파란 실선, 아래쪽(bottom)은 3px 두께의 빨간 실선이 된다. 

   

   

   

border-width와 border-color 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 차례대로 위아래(top and bottom), 좌우(left and right)로 적용된다. 다음의 사례를 보자.

   

 border-style: solid;

 border-width: 6px 3px;

 border-color: blue red;

실행하면 아래와 같이 테두리 위아래(top and bottom)는 6px 두께의 파란 실선, 좌우(left and right)는 3px 두께의 빨간 실선이 된다. 

    

   

   

border-width와 border-color 속성(property)에 1개의 속성값만 주어지면 그 1개의 속성값이 전체 테두리에 적용된다. 다음의 사례를 보자.

    

 border-style: solid;

 border-width: 3px;

 border-color: red;

실행하면 아래와 같이 전체 테두리의 선이 3px 두께의 빨간 실선이 된다. 

    

예제에 사용된 파일은 0052_두께와색깔.html 파일을 참조하기 바란다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0052 CSS 테두리 두께와 색 설정하기.apkg

2019-01-28 PM 11:24  Ankilog 파일 오타 수정