[CSS] box-shadow vs outline

• box-shadow vs outline

  • box-shadow랑 outline은 둘 다 border랑 달리, 물리적인 공간을 차지하지 않는다는 공통점이 있다. 즉 border는 2px 잡히면 그 만큼 다른 레이아웃에 영향을 주게 되는데, box-shadow랑 outline은 비슷한 시각적 효과를 주지만 다른 레이아웃에 영향을 주지 않는다.

  • 두 속성은 값의 형태가 좀 다르다. outline은 border와 거의 유사한 반면 box-shadow는 좀 어렵다.

          /* color| style | width */
          outline: green solid 3px;

          /* offset-x | offset-y | blur-radius | spread-radius | color */
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  • box-shadow는 그림자 속성이므로, offset-x는 수평축의 그림자를 의미한다. 그림자는 기본적으로 오른쪽, 아래쪽에 생긴다. 반대에 주고 싶으면 음수 값을 주면 된다.

  • offset-x만 10px 줬을 때
    

  • offset-y만 10px 줬을 때
    

  • inset 값을 주면 테두리가 움푹 들어간 것처럼 안쪽에 생기게 된다. 그리고 디폴트 방향과 반대로 생긴다. 예를 들어 inset offset-x만 10px 줬을 때는 왼쪽 안쪽에 생긴다.
    

  • inset offset-y만 10px 줬을 때 안쪽 위쪽에 생긴다.
    

  • blur-radius는 그림자가 얼마나 선명한지, 흐릿한지를 나타내며 값이 클수록 그림자의 경계가 흐릿해지고 영역도 커지는 효과가 있다.

  • spread-radius(확산 정도)는 양수값을 주면 그림자가 더 커지는 효과, 음수값을 주면 그림자가 작아지는 효과를 줄 수 있다.

    • spread-radius를 이용하면 거의 border 또는 outline과 비슷하게 보이게끔 할 수 있다. 다른 값을 모두 0을 주고 spread-radius만 3px를 주면 다음처럼 보인다. (안쪽에서 영역이 보이는 건 inset 값을 줘서이다)
      

  • 이게 outline이나 border에 비해 어떤 쓰임새가 있냐면, border와 달리 다른 레이아웃에 영향을 주고 싶지 않고, 또 border-radius도 같이 주고 싶을 때 사용하면 좋다. webkit에서 outline은 border-radius 적용이 되지 않는다.(관련 스택오버플로우) 단, 최근 브라우저에서는 적용이 된다. 크롬 94 이상 버전에서 outline은 border-radius 적용이 됐다. 하지만 유저가 어떤 버전의 브라우저를 쓸지 알 수 없기 때문에 안전하게 적용하기로 한다.

  • outline을 쓰면서 radius를 주려면 pseudo-elements를 사용하는 workaround가 있지만 이럴바에는 차라리 box-shadow를 적용하기로 한다.

  • box shadow를 border처럼 사용할 때는 inset을 주는 편이 편하다. 왜냐하면 바깥쪽에 그림자가 지면 다른 레이아웃에 영향을 미치지 못하기 때문에 다른 레이아웃에 가려서 안보이게 되기도 한다. 그러므로 여러 상황에서 안전하게 사용하려면 컴포넌트화 할 때 Inset을 활용하는 편이 좋다. (물론 만들기 나름)