0053 테두리 각각의 방향에서 설정하기 및 단축 속성(shorthand property)

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에도 추가함