소낙눈 0

공간을 차지하지 않는 테두리를 구현하는 두 가지 방법을 알아보겠습니다.

border를 사용한 테두리는 공간을 차지할 뿐만 아니라

트게더는 기본적으로 box-sizing 옵션이 border-box로 지정되어 있어 테두리를 포함하여 요소의 사이즈가 지정됩니다.

모종의 사유로 border 속성을 사용하기 힘든 요소를 만난 경우나

종류가 다른 두 가지 테두리를 동시에 삽입하고 싶은 경우 해당 팁이 도움이 될 겁니다.

#0 : 요약

outline 속성 또는 box-shadow 속성을 사용하면 됩니다.

#1 : 커버형 테두리

outline 속성을 통해 넣는 테두리입니다.

outline 속성은 border 속성과 유사하기 때문에 사용하기 쉽습니다.

따라서 dashed나 dotted와 같이 border 속성에 적용되는 옵션을 동일하게 사용할 수 있습니다.

#1-1 : 전부 감싸는 테두리

border 속성의 경우 색상부터 두께까지 요소의 위/아래/좌측/우측을 각각 다르게 설정할 수 있습니다.

심지어는 none이나 hidden 값을 사용하면 각 테두리를 없애거나 숨길 수도 있습니다.

하지만 outline 속성은 그렇지 않습니다. 모든 값이 요소의 네 곳 모두에 동일하게 적용됩니다.

#1-2 : 구문 사용 방법

outline 단축 속성을 사용하는 방법을 익혀보겠습니다.

선택자 {

    outline: 스타일;

}

형태로 사용합니다.

아래에서 설명할 세 종류의 값은 위처럼 하나만 넣어도 되고

선택자 {

    outline: 색상 스타일 너비;

}

위처럼 세 개 전부 넣어도 됩니다. 단축 속성이니까요.

outline 단축 속성에 사용되는 값은 다음과 같습니다.

스타일 값 / 너비 값 / 색상 값

각 값은 각각 순서 상관 없이 사용할 수 있습니다.

#1-2-1 : 스타일 값

outline-style 세부 속성에 해당하며 외곽선의 모양을 바꿉니다. 

solid나 dotted와 같은 키워드를 사용합니다. 자세한 정보는 해당 MDN 문서를 참조하세요.

기본값이 none이기 때문에 외곽선을 표시하려면 반드시 키워드를 포함해야 합니다.

#1-2-2 : 너비 값

outline-width 세부 속성에 해당하며 외곽선의 두께를 바꿉니다.

기본값은 유저 에이전트마다 조금씩 달라¹ 고정된 값을 지정해야 합니다. 숫자와 함께 단위를 붙여 지정합니다.

1 유저 에이전트 스타일시트에 의해 설정됩니다. 여기서 다루지 않습니다.

#2 : 테두리형 그림자

box-shadow 속성을 통해 넣는 테두리입니다.

속성의 이름에서 알 수 있듯 box-shadow는 본래 요소에 그림자를 넣는 옵션입니다.

하지만 box-shadow의 사용법은 아주 무궁무진하며 이를 이용하면 테두리를 그릴 수도 있습니다.

#2-1 : 그림자 속성

원래 그림자를 넣는 속성이기 때문에 값을 넣는 방법이 border나 outline 속성과는 다릅니다.

당연히 dashed나 dotted와 같은 값도 사용할 수 없습니다.

#2-2 : 테두리 표시 방법

그림자 속성이기 때문에 테두리가 그려지는 위치(안쪽에서/바깥쪽에서)을 정할 수 있습니다.

테두리 표시 방법을 설정할 수 있다는 점은 outline과 구별되는 분명한 장점입니다.

다만 이 역시 4방향 별도의 테두리를 지정하기는 어렵습니다.

4방향 별도의 테두리를 지정할 수는 있지만. 상/하/좌/우를 각각 지정하는 방식이 아니라 번거로우며

기본적으로 테두리를 위해 투자한 값만큼 다른 방향(축)에서는 강제로 해당 값만큼의 테두리를 가져가야 하므로 섬세한 작업은 어렵습니다.

(좌측 3px + 우측 2px 테두리를 지정했다면, 상단과 하단은 이들의 합인 5px만큼의 테두리를 반드시 나누어 가져가야 함)

#2-3 : 바깥쪽 테두리에 대한 구문 사용 방법

상/하/좌/우 동일한 값을 갖는 테두리를 생성하는 box-shadow 속성의 사용 방법을 익혀보겠습니다.

선택자 {

    box-shadow: 0 0 0 테두리너비 색상;

}

이는 본래 아래와 같이 생성되는 그림자 박스에 대한 수치를 의미합니다.

선택자 {

    box-shadow: 가로위치 세로위치 블러 스케일 색상;

}

어떻게 해당 값이 그림자 대신 테두리를 생성해내는지 알아보겠습니다. 도움!

#2-3-1 : 가로위치/세로위치

그림자의 위치를 조정합니다. 둘 다 0이므로 그림자 박스는 요소의 완전히 정중앙에 위치해 겹쳐집니다.

#2-3-2 : 블러

그림자의 흐림 정도를 조정합니다. 0이므로 그림자 박스가 흐리게 보이지 않고 요소 박스의 모양과 완전히 동일합니다.

#2-3-3 : 스케일

그림자의 크기를 조정하며 해당 값은 4방향 전체에 적용됩니다.

해당 값이 지정된 만큼 그림자 박스가 요소 박스보다 커지며 → 이에 실제로 요소 박스 뒤로 보이게 됩니다.

따라서 요소 박스와 그림자 박스의 차이 = 스케일 값 만큼이 요소의 테두리로 지정됩니다.

#2-3-4 : 색상

그림자의 색상을 조정합니다. 그림자 박스의 색이 해당 색상으로 지정됩니다.

#2-4 : 안쪽 테두리에 대한 구문 사용 방법

더 나아가 해당 테두리를 요소의 바깥쪽이 아닌, 안쪽에 삽입하는 방법을 알아보겠습니다.

구문 자체는 위와 동일하며 inset 키워드를 구문의 마지막에 추가하면 됩니다.

선택자 {

    box-shadow: 0 0 0 테두리너비 색상 inset;

}