[CSS] outline이나 border 속성이 아닌 box-shadow 속성으로 선을 그리는 방법 (feat. box-sizing: border-box;)
CSS의 box-shadow 속성은 그림자 효과를 만들 때 주로 사용됩니다. 그러나 이 속성을 활용하여 선을 그릴 수도 있습니다. 이번 포스트에서는 outline이나 border 속성이 아닌 box-shadow를 사용하여 선을 그리는 방법에 대해 알아보겠습니다. box-shadow 속성 이해하기 box-shadow의 기본값은 none입니다. 이 속성은 수평 오프셋, 수직 오프셋, 흐림 정도, 퍼지는 정도, 색상 등을 지정하여 사용합니다. box-shadow: h-offset v-offset blur spread color inset; h-offset: 그림자의 좌우 위치 설정 v-offset: 그림자의 상하 위치 설정 blur: 그림자의 흐림 정도 spread: 그림자가 퍼지는 정도, 크기 color: ..
2024.02.28