0053 테두리 각각의 방향에서 설정하기 및 단축 속성(shorthand property)
앞에서, 테두리(border)와 관련하여 테두리 선의 종류(style), 두께(width), 색깔(color)을 제어하는 법을 알아보았다. 테두리 선의 종류(style)는 border-style, 두께(width)는 border-width, 색깔(color)은 border-color 속성(property)으로 각각 설정했다. 그런데 이 모든 속성들은 아래와 같이 테두리의 4방향 별로도 설정이 가능하다.
테두리 위쪽(top)은 border-top이다.
위쪽 테두리의 종류 : border-top-style
위쪽 테두리의 두께 : border-top-width
위쪽 테두리의 색깔 : border-top-color
테두리 아래쪽(bottom)은 border-bottom이다.
아래쪽 테두리의 종류 : border-bottom-style
아래쪽 테두리의 두께 : border-bottom-width
아래쪽 테두리의 색깔 : border-bottom-color
테두리 오른쪽(right)은 border-right이다.
오른쪽 테두리의 종류 : border-right-style
오른쪽 테두리의 두께 : border-right-width
오른쪽 테두리의 색깔 : border-right-color
테두리 왼쪽(left)은 border-left이다.
왼쪽 테두리의 종류 : border-left-style
왼쪽 테두리의 두께 : border-left-width
왼쪽 테두리의 색깔 : border-left-color
원래, 이렇게 테두리의 4방향에 따라 각각 속성(property)을 정하는 것이 정석이다. 하지만 그러면 너무 번거로우므로 더 편하게 쓸 수 있도록 축약한 단축 속성(shorthand property)을 만들었는데 그것이 각각 border-style, border-width, border-color 라고 할 수 있다.
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
의 4개 속성을 축약한 단축 속성이
border-style: solid;
이다.
border-top-width: 8px;
border-right-width: 6px;
border-bottom-width: 4px;
border-left-width: 2px;
의 4개 속성을 축약한 단축 속성이
border-width: 8px 6px 4px 2px;
이다.
border-top-color: green;
border-right-color: red;
border-bottom-color: blue;
border-left-color: red;
의 4개 속성을 축약한 단축 속성이
border-color: green red blue;
이다.
이렇게 축약된 단축 속성이 확실히 더 편하다.
그렇다면 더 편하게 해보자. border-style, border-color, border-width의 속성들을 축약한 단축 속성(shorthand property)은 border 속성(property)이다.
border-style: dotted;
border-width: 5px;
border-color: blue;
의 3개 속성을 축약한 단축 속성이
border: 5px dotted blue;
이다.
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와 완전히 동일하다.
border-top-style: dotted;
border-top-width: 5px;
border-top-color: blue;
의 3개 속성을 축약한 단축 속성이
border-top: 5px dotted blue;
이다.
border-right-style: dotted;
border-right-width: 5px;
border-right-color: blue;
의 3개 속성을 축약한 단축 속성이
border-right: 5px dotted blue;
이다.
border-bottom-style: dotted;
border-bottom-width: 5px;
border-bottom-color: blue;
의 3개 속성을 축약한 단축 속성이
border-bottom: 5px dotted blue;
이다.
border-left-style: dotted;
border-left-width: 5px;
border-left-color: blue;
의 3개 속성을 축약한 단축 속성이
border-left: 5px dotted blue;
이다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0053 테두리 각각의 방향에서 설정하기 및 단축 속성.apkg
수정 2019-02-10 오후 3:38 4방향별 단축속성에 대하여 첨가하고 Ankilog에도 추가함
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기 (0) | 2019.02.04 |
|---|---|
| 0054 CSS 내용(content)영역 설정하기-width와 height (0) | 2019.02.02 |
| 0052 CSS 테두리 두께와 색 설정하기 (0) | 2019.01.28 |
| 0051 CSS 테두리 스타일 설정하기 (0) | 2019.01.26 |
| 0050 CSS 박스 모델(box model) (0) | 2019.01.25 |