CSS 테두리 완벽 가이드: 단계별 튜토리얼

CSS의 border 속성은 HTML 요소의 테두리를 설정하는 데 사용됩니다. 이 속성은 border-width, border-color, border-style이라는 세 가지 하위 속성을 하나로 묶은 축약형입니다.

웹 페이지에서 요소 주위에 테두리를 추가하는 것은 웹 디자인에서 중요한 요소입니다. 테두리를 활용하면 웹 페이지의 콘텐츠를 깔끔하게 구분할 수 있어, 방문자가 페이지에 담긴 정보를 더 쉽게 이해할 수 있습니다.

CSS의 border 속성은 HTML 요소의 테두리를 지정합니다. 이 속성은 테두리의 스타일, 색상, 두께를 정의하는 세 가지 하위 속성의 축약형(shorthand)입니다.

이 튜토리얼에서는 CSS border 속성과 각 하위 속성을 사용해 HTML 요소에 테두리를 디자인하는 방법을 알아봅니다. 튜토리얼을 끝까지 읽고 나면 CSS로 테두리를 디자인하는 데 필요한 모든 지식을 갖추게 될 것입니다.

CSS 테두리 기본 개념

앞서 언급했듯이, CSS border 속성은 웹 요소 주위에 테두리를 지정하는 데 사용됩니다. 예를 들어 이미지, 박스, 웹 폼 등 다양한 요소에 테두리를 적용할 수 있습니다.

border 속성은 요소의 테두리에 특정 스타일을 적용하는 세 가지 하위 속성의 축약형입니다. 각 하위 속성은 다음과 같습니다:

border-width (테두리의 두께를 지정)
border-color (테두리의 색상을 지정)
border-style (테두리의 스타일을 지정)

테두리를 정의할 때는 border 속성 하나로 한 번에 지정하거나, 각 하위 속성을 개별적으로 사용할 수 있습니다. 이 글에서는 두 가지 방법을 모두 살펴보겠습니다.

CSS 테두리 하위 속성

앞서 설명한 것처럼 CSS에서 테두리를 정의하는 데 사용되는 하위 속성은 세 가지입니다. 지금부터 각 하위 속성을 자세히 살펴보고, 실제 동작 예제도 함께 확인해 보겠습니다.

CSS의 `border-style` 속성

border-style 속성은 웹 페이지에 표시할 테두리의 유형을 정의합니다. 즉, 테두리 선이 실선(solid), 점선(dotted), 파선(dashed) 등 어떤 모양으로 보일지 결정합니다.

border-style 속성에는 10가지 값을 지정할 수 있습니다. 아래는 각 스타일을 박스에 적용했을 때의 모습과 설명입니다:

이러한 웹 요소를 만들 때 사용한 CSS 코드는 다음과 같습니다:

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

코드에서 볼 수 있듯이, 지정 가능한 모든 값을 사용해 테두리를 스타일링했습니다.

CSS의 `border-width` 속성

border-width 속성은 CSS 테두리의 두께를 설정합니다. 테두리 두께는 CSS 길이 값(pt, px, em 등)으로 지정하거나, thin(얇게), medium(보통), thick(굵게)이라는 세 가지 미리 정의된 값 중 하나를 사용해 설정할 수 있습니다.

예를 들어 박스 주위에 5px 두께의 실선 테두리를 만들고 싶다면 다음 코드를 사용할 수 있습니다:

<style>
  .box {
	border-style: solid;
	border-width: 5px;
  }
</style>

<html>
  <p class="box">5px 두께의 실선 테두리</p>
</html>

이 코드는 solid(실선) 스타일에 두께 5px인 테두리를 생성합니다.

CSS의 `border-color` 속성

이름에서 알 수 있듯이, 색상 관련 속성은 색상을 지정합니다. border-color 속성은 CSS에서 테두리의 색상을 설정하는 데 사용됩니다. border-color 속성이 허용하는 색상 값은 다음과 같습니다:

색상 이름 (예: blue)
HEX (16진수 색상 값, 예: #000)
HSL (HSL 색상 값, 예: hsl(10, 100%, 25%))
RGB (RGB 색상 값, 예: rgb(102, 222, 95))
transparent (투명)

예를 들어 5px 두께의 파란색 점선 테두리가 있는 박스를 만들고 싶다면 다음 코드를 사용할 수 있습니다:

<style>
  .box {
    border-style: dotted;
	border-width: 5px;
	border-color: blue;
  }
</style>

<html>
  <p class="box">5px 두께의 파란색 점선 테두리</p>
</html>

하위 속성에 여러 값 지정하기

CSS border 속성의 각 하위 속성은 여러 개의 값을 받을 수 있습니다. 이를 활용하면 요소의 각 변마다 서로 다른 테두리를 설정할 수 있습니다.

요소의 각 변에 개별적인 테두리를 설정할 때 기억해야 할 규칙은 다음과 같습니다:

값을 하나만 지정하면 모든 변에 동일하게 적용됩니다.
값을 두 개 지정하면 첫 번째 값은 위/아래, 두 번째 값은 왼쪽/오른쪽에 적용됩니다.
값을 세 개 지정하면 첫 번째 값은 위, 두 번째 값은 오른쪽/왼쪽, 세 번째 값은 아래에 적용됩니다.
값을 네 개 지정하면 위, 오른쪽, 아래, 왼쪽 순서(시계 방향)로 적용됩니다.

예를 들어 위와 아래는 실선, 왼쪽과 오른쪽은 파선으로 된 테두리를 만들고 싶다면 다음 코드를 사용할 수 있습니다:

<style>
  .box { border-style: solid dashed; }
</style>

<html>
  <p class="box">위는 실선, 양옆은 파선 테두리</p>
</html>

이 코드에서는 두 가지 테두리 스타일을 지정해 조합 테두리를 만들었습니다. 이 요소는 왼쪽과 오른쪽 변에는 dashed(파선) 스타일이, 위와 아래에는 solid(실선) 스타일이 적용됩니다.

테두리 색상이나 두께를 변경할 때도 같은 방식을 사용하면 됩니다.

CSS 테두리 축약형

CSS에서 테두리를 정의하는 데 사용할 수 있는 하위 속성은 세 가지입니다.

앞선 예제에서는 각 하위 속성을 개별적으로 사용하는 방법을 살펴보았습니다. 하지만 모든 테두리 하위 속성을 하나의 속성에 한꺼번에 지정할 수도 있습니다. 이렇게 하면 코드를 더 짧고 간결하게 작성할 수 있습니다.

border 속성은 다음 구조로 CSS 테두리를 정의합니다:

border-width (선택 사항)
border-style (필수)
border-color (선택 사항)

예를 들어 텍스트 한 줄 주위에 5px 두께의 분홍색 실선 테두리를 만들고 싶다면 다음 코드를 사용할 수 있습니다:

<style>
  .box { border: 5px solid pink };
</style>

<html>
  <p class="box">5px 두께의 분홍색 실선 테두리</p>
</html>

코드에서 볼 수 있듯이, 세 줄에 걸쳐 각 하위 속성을 따로 지정하는 대신 한 줄로 테두리를 정의했습니다.

CSS 개별 변 테두리 설정

테두리 하위 속성과 border 속성은 웹 요소의 특정 변에만 개별적으로 적용할 수도 있습니다. 요소의 특정 면에 있는 테두리의 모양을 지정하고 싶다면 다음 속성들을 사용하세요:

border-left-[속성]
border-right-[속성]
border-top-[속성]
border-bottom-[속성]

[속성] 부분에 들어갈 수 있는 값은 다음과 같습니다:

style (테두리의 스타일 설정)
color (테두리의 색상 설정)
width (테두리의 두께 설정)
비워 둠 (테두리 축약형을 사용해 테두리 정의)

이 속성들은 사용하기 쉽고 기억하기도 간단하지만, 가능한 모든 조합을 정리하면 다음과 같습니다:

border-left-style / border-left-color / border-left-width
border-right-style / border-right-color / border-right-width
border-top-style / border-top-color / border-top-width
border-bottom-style / border-bottom-color / border-bottom-width

예를 들어 왼쪽에는 2px 두께의 실선 테두리, 위쪽에는 5px 두께의 점선 테두리가 있는 텍스트 박스를 만들고 싶다면 다음 코드를 사용할 수 있습니다:

<style>
  .box {
	border-left: 2px solid;
	border-top: 5px dotted;
  }
</style>

<html>
  <p class="box">혼합 테두리</p>
</html>

박스의 왼쪽에는 2px 실선 테두리가, 위쪽에는 5px 점선 테두리가 적용됩니다. 개별 테두리 속성을 사용하면 박스의 각 변마다 테두리가 어떻게 보일지 세부적으로 지정할 수 있습니다.

마무리

CSS에서 border 속성은 테두리를 만드는 데 사용되며, style(스타일), color(색상), width(두께)라는 세 가지 하위 속성을 통해 테두리의 각 요소를 개별적으로 커스터마이징할 수 있습니다.

이 튜토리얼에서는 몇 가지 예제와 함께 border 속성과 세 가지 하위 속성을 사용해 CSS에서 테두리를 만드는 방법을 알아보았습니다. 또한 개별 테두리 속성을 사용해 요소의 각 변을 스타일링하는 방법도 살펴보았습니다.

CSS 테두리에 대해 더 알고 싶다면, 테두리 이미지(border-image), 테두리 병합(border-collapse), 외곽선(outline)과 outline-offset, 둥근 모서리를 위한 border-radius, 그리고 시각적으로 매력적인 box-shadow 효과를 다루는 다른 튜토리얼도 확인해 보세요!