책 씹어먹는 즐거움

앞에서, 테두리(border)와 관련하여 테두리 선의 종류(style), 두께(width), 색깔(color)을 제어하는 법을 알아보았다. 테두리 선의 종류(style)는 border-style, 두께(width)는 border-width, 색깔(color)은 border-color 속성(property)으로 각각 설정했다. 그런데 이 모든 속성들은 아래와 같이 테두리의 4방향 별로도 설정이 가능하다.

원래, 이렇게 테두리의 4방향에 따라 각각 속성(property)을 정하는 것이 정석이다. 하지만 그러면 너무 번거로우므로 더 편하게 쓸 수 있도록 축약한 단축 속성(shorthand property)을 만들었는데 그것이 각각 border-style, border-width, border-color 라고 할 수 있다.

이렇게 축약된 단축 속성이 확실히 더 편하다. 

그렇다면 더 편하게 해보자. border-style, border-color, border-width의 속성들을 축약한 단축 속성(shorthand property)은 border 속성(property)이다. 

border의 속성값에는 style, color, width에 해당하는 값들이 오는데 이 중 style을 제외한 color, width 속성값들은 제외해도 된다. color의 경우 해당 요소의 글자색(color)이, width의 경우 medium이 기본값(default)으로 설정되어 있어서 속성값이 주어지지 않으면 이들 기본값(default)이 적용된다. 

다음의 그림을 보자. 

위의 그림에서 ④의 경우처럼 style에 해당하는 속성값 solid가 누락되어 있을 때에는 테두리가 아예 보이지 않는다.

②의 경우처럼 두께(width)에 해당하는 속성값이 누락되어도 여전히 동일하게 medium으로 적용되는 것을 확인할 수 있다. 이는 두께(width)를 별도로 설정하지 않을 경우 기본값(default)이 medium이기 때문이다. 

③에서는 색깔(color)에 해당하는 속성값을 누락시켜 보았다. 글자색과 동일한 파란색으로 테두리의 색깔이 변하는 것을 확인할 수 있다. 이는 색깔(color)을 별도로 설정하지 않을 경우 기본값(default)이 해당 요소의 글자색(color)이기 때문이다. 

예제에 사용된 파일은 0053_border.html 파일을 참조하기 바란다.

border 속성으로 축약할 경우 4개 방향의 테두리를 개별적으로 설정할 수 없다. 만일, 방향별로 테두리를 별도로 설정하고 싶다면 단축 속성인 border를 사용하지 말고 border-top, border-right, border-bottom, border-right로 축약하면 된다. 축약하는 요령은 border와 완전히 동일하다.

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

Ankilog 파일:  0053 테두리 각각의 방향에서 설정하기 및 단축 속성.apkg

수정 2019-02-10 오후 3:38  4방향별 단축속성에 대하여 첨가하고 Ankilog에도 추가함

테두리 두께는 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)에서부터 시계방향으로 적용된다. 다음의 사례를 보자.

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

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

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

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

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

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

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

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

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

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

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