box-shadow로 inline border 만들기

요소의 크기

웹 프론트 개발을 하다보면 각 요소들이 고정 크기를 가져서 width나 height를 지정핼줄때도 있지만, 간변적인 크기의 성질을 가져서 width와 height를 지정하지 않을때도 있습니다. 그런 경우 요소들은 box-model에 의해서 컨텐츠의 크기, padding, margin등에 의해서 크기와 영역이 결정됩니다.

마찬가지로 border의 크기도 box-model 영역 계산에 포함이 되기때문에, border가 있고 없느냐에 따라 요소의 크기가 달라지게 되고 이로인해 예상치못한 디자인 사이드 이펙트가 발생할 수 있습니다.

border로 인한 wrap 발생

이런 사이드 이펙트를 방지하기 위해서 요소에게 항상 동일한 border-width를 가지도록 할수 있지만, 그렇게되면 매번 디자인 작업을 할때마다 border를 신경써야해서 번거로울수 있습니다. 그렇다면 border대신 요소의 테두리를 표현할 수 있는 다른 방법은 없을까요?

box-shadow

CSS box-shadow에 대한 공식 문서를 살펴보면 box-shadow는 box-model 영역에 영향을 미치지 않는다고 되어있습니다. 즉, 그림자의 크기가 어떻게 되든 width, height의 크기에는 영향을 주지 않는다고 볼 수 있습니다.

A box-shadow does not impact box model dimensions.

 

그렇다면 box-shadow로 테두리를 표현할 수 있다면 어떨까요?

.Tag {
  display: inline-flex;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 0 1px black inset; // 테두리 표시
}

.Tag-selected {
  color: white;
  display: inline-flex;
  padding: 0.5rem 1rem;
  background: black;
}

 

[box-shadow 사용법에 대해 알고싶다며 클릭]

 

box-shadow 설정에서 그림자의 위치와 blur 및 크기 속성값을 모두 0으로 지정하면 요소와 그림자의 크기가 동일해져서 그림자가 노출되지 않는데, 이때 그림자의 크기(네번째 length값)를 키우면 마치 테두리가 생긴것처럼 표현할 수 있습니다.

 

그리고 실제 크기가 커지진 않았지만 그림자때문에 요소가 더 커보이므로 inset 속성을 사용하여 그림자를 요소 안쪽에 나타나도록 함으로써 마치 요소 안쪽으로 테두리(inner border)가 생성된것처럼 표현할 수 있게됩니다.

 

이러한 방식으로 box-shadow를 활용하면 크기변화로 인한 사이드 이펙트 없이 요소의 테두리를 표현할 수 있습니다.

box-shadow 사용으로 wrap발생 안함