[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: 그림자 색상

inset: 옵션, 요소 내부에 그림자 표현

box-shadow 속성으로 테두리 그리는 방법

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  /* border: 1px solid blue; */
  font-size: 3em;
  box-shadow: 0 0 0 1px red;
}

box-shadow로 테두리 그리기

 

테두리 왼쪽만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: -1px 0 0 0 red; /* 왼쪽(left) */
}

왼쪽만 그리기

테두리 오른쪽만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: 1px 0 0 0 red; /* 오른쪽(right) */
}

오른쪽만 그리기

 

테두리 위쪽만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: 0 -1px 0 0 red; /* 위(top) */
}

윗쪽만 그리기

 

테두리 아래쪽만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: 0 1px 0 0 red; /* 아래(bottom) */
}

아랫쪽만 그리기

 

테두리 좌우만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: -1px 0 0 0 red, 1px 0 0 0 red; /* 좌우(left, right) */
}

좌우만 그리기

테두리 위/아래만 표현해 보기

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid blue;
  font-size: 3em;
  box-shadow: 0 -1px 0 0 red, 0 1px 0 0 red; /* 위아래(top, bottom) */
}

위/아래만 그리기

 

여기서 주목! (Attention, please.)

box-sizing 속성을 사용하여 요소의 크기를 제어할 때, 특히 패딩(padding)과 테두리(border)를 포함하는 border-box;를 사용할 때 알아두면 유용한 점이 있습니다.

border, outline, box-shadow들의 속성을 사용하여 모두 선(line)을 표현할 수 있었는데요~

box-sizing: border-box; 에서의 테두리 포함에는 border만 이에 해당합니다. 모두 선(line)을 표현할 수 있지만 실제 요소의 크기에는 영향을 주지 않습니다.

• border: border는 요소의 외곽 경계를 형성하는 선입니다. box-sizing:border-box;를 사용하면 border의 두께가 요소의 크기에 포함됩니다.
• outline: outline은 요소 주위에 그려지는 테두리이지만, 실제 요소의 크기에는 영향을 주지 않습니다. 따라서 box-sizing 속성과는 관련이 없습니다. 저는 주로 요소의 크기나 범위를 확인하는 용도로 개발자도구에서 스타일에 선언하여 시각적으로 많이 활용하는 편입니다. 실제 요소의 크기에 영향을 주지 않기 때문이죠~
• box-shadow: box-shadow는 요소 주위에 그림자를 만드는 데 사용됩니다. 그림자는 요소의 크기에 영향을 주지 않으며, 따라서 box-sizing 속성과는 관련이 없습니다. 

 

 

 

이렇게 outline이나 border 속성이 아닌 box-shadow 속성으로 선을 그리는 방법에 대해서 알아보았습니다.

 

 

 

 

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

[git] README.md 파일 작성시, Markdown 문법(Syntax) 사용법

[Javascript] 다양한 방법으로 스타일 적용하기

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법