CSS에서 이중 테두리를 만드는 6가지 방법

웹 디자인과 개발에서 테두리는 사용자 시선을 사로잡거나 웹 페이지 콘텐츠를 구분하는 데 중요한 역할을 합니다. HTML 요소의 네 테두리를 모두 동일하게 설정하려면 테두리 축약 속성을 활용할 수 있습니다.

반대로, 개별 테두리 색상, 스타일 및 너비를 지정하여 모든 테두리를 차별화할 수도 있습니다. 테두리 색상 속성을 사용하여 색상을 지정하고, 테두리 너비 속성으로 두께를 조절하며, 테두리 스타일 속성을 통해 실선, 점선, 이중선 등 다양한 형태를 적용할 수 있습니다.

또한, `border-block-start`나 `border-top`과 같은 속성을 사용하여 특정 테두리만 선택적으로 수정할 수도 있습니다.

이중 테두리는 HTML 요소를 둘러싼 두 개의 평행선으로 이루어져 있습니다. 이 두 선은 투명하거나 이미지, 배경색으로 채워진 간격으로 분리되어 있습니다.

예를 들어, 로그인이나 회원가입 버튼을 이중 테두리로 감싸 사용자 시선을 유도할 수 있습니다.

이중 테두리가 필요한 이유

분리 효과: 이중 테두리를 사용하여 웹 페이지 내 여러 HTML 요소를 시각적으로 분리하여 가독성과 정보 파악 능력을 향상시킬 수 있습니다. 예를 들어, 머리글, 본문, 바닥글 등을 구분하는 데 효과적입니다.
시각적 매력: 이중 테두리에 대비되는 색상을 사용하여 다양한 요소들을 더욱 매력적으로 만들 수 있습니다.
계층 구조 표현: 웹 페이지 내에서 중요한 요소와 덜 중요한 요소를 구분하여 시각적 계층 구조를 명확하게 표현할 수 있습니다.
맞춤형 디자인: 이중 테두리는 각 선의 색상이나 너비 등을 변경하여 독특하고 개성적인 디자인을 만드는 데 유용합니다.
강조 효과: 웹 페이지에서 특정 링크나 버튼에 사용자 시선을 집중시키기 위해 이중 테두리 속성을 사용할 수 있습니다.

다음은 CSS를 사용하여 이중 테두리를 생성하는 여러 방법입니다.

`border-style` 속성 활용

`border-style` 속성은 HTML 요소의 네 테두리 스타일에 적용됩니다. 여기서는 `double` 키워드를 사용하여 이중선 스타일을 설정합니다. `double` 키워드는 두 선 사이에 자동으로 여백을 생성합니다.

예시에서는 테두리 너비를 15px로 설정하고, 색상은 빨간색으로 지정했으며, 스타일은 이중선으로 적용했습니다.

HTML 코드:

      <div class="box"> <h2>테두리 속성</h2> </div>

CSS 코드:

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 350px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      border-width: 15px;
      border-color: red;
      border-style: double;
    }

결과 화면은 다음과 같습니다.

`linear-gradient()` 함수 활용

이 함수는 선형 그래디언트를 배경 이미지로 설정하여 직선을 따라 두 색상이 점진적으로 변하도록 합니다. `to` 키워드를 사용하여 그래디언트 선의 시작점을 설정할 수 있습니다. 별도로 지정하지 않으면 기본값은 아래쪽에서 시작됩니다.

아래 코드는 상자에 7px 두께의 테두리를 적용합니다. 그리고 상자의 각 면 배경 속성에 선형 그래디언트를 지정하여 이중 테두리처럼 보이도록 합니다.

HTML 코드:

      <div class="box"> <h2>linear-gradient() 함수</h2> </div>

CSS 코드:

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 350px;
      height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      border: 7px solid rgb(36, 85, 7);
      background: linear-gradient(to top, #8f0404 7px, transparent 1px),
      linear-gradient(to bottom, #8f0404 7px, transparent 1px),
      linear-gradient(to left, #8f0404 7px, transparent 1px),
      linear-gradient(to right, #8f0404 7px, transparent 1px);
    }

결과 화면은 다음과 같습니다.

`outline` 속성 활용

아웃라인은 요소의 테두리 외부에 그려지는 선입니다. 이 속성을 이용하여 이중 테두리 효과를 만들 수 있습니다. 테두리와 아웃라인 사이에 공간을 만들려면 `outline-offset` 속성을 사용해야 합니다.

HTML 코드:

    <div class="box"> <h2>아웃라인 속성</h2> </div>

CSS 코드:

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 350px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      border: 5px solid red;
      outline: 5px solid blue;
      outline-offset: -20px;
    }

결과 화면은 다음과 같습니다.

`box-shadow` 속성 활용

`box-shadow` 속성은 요소의 프레임 주위에 그림자 효과를 추가합니다. 여러 개의 그림자 효과를 쉼표로 구분하여 적용할 수 있습니다. 오프셋과 흐림 값을 0으로 설정한 후 그림자 크기를 조절하여 이중 테두리 효과를 낼 수 있습니다.

HTML:

    <div class="box"> <h2>박스 그림자 속성</h2> </div>

CSS 코드:

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 350px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      box-shadow:
      0 0 0 5px red,
      0 0 0 10px green;
    }

결과 화면은 다음과 같습니다.

`background-clip` 속성 활용

`background-clip` 속성은 배경이 요소 내에서 얼마나 확장되어야 하는지 결정합니다. `border-box`, `padding-box`, 또는 `content-box` 값으로 확장을 제어할 수 있습니다.

HTML 코드:

      <div class="box"> <h2>Background-Clip 속성</h2> </div>

CSS 코드:

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 350px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      border: 7px solid rgb(36, 85, 7);
    padding: 5px;
    background-clip: content-box;
    background-color: rgb(238, 152, 130);
    }

결과 화면은 다음과 같습니다.

의사 요소 활용

::before 및 ::after 선택자로 표시되는 의사 요소를 사용하면 웹 디자이너는 HTML 코드에 추가 마크업을 삽입하지 않고도 HTML 문서의 특정 부분을 꾸밀 수 있습니다.

다음 코드를 통해 의사 요소를 사용하여 이중 테두리를 만드는 방법을 살펴봅니다.

HTML 문서

      <div class="box"> <h2>의사 속성</h2> </div>

CSS

  *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      padding: 15px;
    }
    div{
      width: 150px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      background-color: brown;
    }
    box{
    background-color: rebeccapurple;
    position: relative;
    border: 8px solid red;
    }
    .box::before{
    content: " ";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 8px solid green;
    border-width: 6px;
    border-color: green white green white;
    width: 150px;
    height: 100px;
  }

결과 화면은 다음과 같습니다.

이중 테두리 CSS의 실제 사용 예시

이중 테두리 CSS 속성은 많은 웹사이트에서 활발히 사용되고 있습니다. 최적의 결과를 위해서는 이중 테두리 속성을 다른 CSS 속성과 함께 활용해야 합니다. 다음은 이중 테두리 효과가 적용된 두 가지 실제 예시입니다.

Amazon의 "장바구니" 버튼

Amazon은 전자상거래 분야에서 가장 큰 기업 중 하나입니다. Amazon의 "장바구니" 버튼은 시각적 효과를 높이고 사용자 액션을 유도하기 위해 이중 테두리 CSS를 사용하고 있습니다.

사용자가 "장바구니" 버튼에 마우스를 가져가면 이중 테두리가 나타납니다. 테두리는 Amazon의 탐색 메뉴에서도 마우스를 올리면 확인할 수 있습니다.

Mailchimp 버튼

Mailchimp는 이메일 마케팅 서비스로 사용자가 캠페인을 생성, 시작, 추적할 수 있도록 돕습니다. Mailchimp 웹사이트는 여러 부분에서 이중 테두리 효과를 사용하고 있습니다. 가입 및 로그인 버튼에 이중 테두리를 적용하여 사용자가 웹사이트를 탐색할 때 긴장감을 '만들어냅니다'.

마우스를 가져가면 버튼의 아래쪽 테두리가 두꺼워지는 것을 확인할 수 있습니다.

이중 테두리 CSS 효과 사용 시 모범 사례

이중 테두리 효과를 사용하다 보면 과도하게 적용하고 싶을 수 있습니다. 그러나 최종 목표는 사용자가 웹사이트를 쉽게 탐색하고 주요 영역을 강조하는 데 있다는 것을 기억해야 합니다. 다음 모범 사례를 참고하십시오.

일관성 있는 스타일 사용: 이중 테두리를 사용할 경우 스타일이 모든 요소에서 일관성을 유지해야 합니다. 예를 들어, 탐색 메뉴, CTA 버튼, 로그인/가입 버튼 등에 일관되게 적용할 수 있습니다. 가능하면 이중 테두리를 사용하는 요소 간에 색상과 여백 두께를 동일하게 유지하는 것이 좋습니다.
다양한 기기에서 확인: 스마트폰, PC, 태블릿 등 다양한 기기에서 웹사이트를 확인해야 합니다. 이중 테두리 효과가 다양한 화면 크기에서 예상대로 표시되는지 테스트해야 합니다.
적절하게 사용: 특정 CSS 효과를 처음 접하고 나면 남용하고 싶어질 수 있습니다. 하지만 이중 테두리 효과는 웹 페이지의 모든 요소에 적합한 것은 아닙니다. 디자인 가치를 더할 수 있는 영역에만 이 속성을 적용하는 것이 좋습니다.

결론

CSS에서 이중 테두리를 만드는 데 활용할 수 있는 여러 방법을 살펴보았습니다. 어떤 방법을 선택하느냐는 이중 테두리를 통해 달성하고자 하는 목표와 선호도에 따라 달라집니다. 또한, 동일한 페이지에서 여러 이중 테두리 스타일을 조합하여 사용할 수도 있습니다.

캐스케이딩 스타일 시트에 대해 더 자세히 알고 싶다면 관련 CSS 자료를 참고하시기 바랍니다.