Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS text-decoration 속성 완벽 가이드: 텍스트 장식의 모든 것

웹 페이지에서 텍스트를 디자인하다 보면 텍스트에 장식을 추가하고 싶은 순간이 찾아옵니다. 중요한 단어에는 밑줄을 긋거나, 오래된 문구에는 취소선을 넣는 것이 대표적인 예입니다.

이럴 때 사용하는 것이 바로 CSS의 text-decoration 속성입니다. 이 속성을 활용하면 밑줄(underline), 윗줄(overline), 취소선(line-through) 등 다양한 장식을 텍스트 블록에 손쉽게 적용할 수 있습니다.

이 글에서는 예제와 함께 text-decoration 속성과 세 가지 하위 속성을 사용해 CSS로 텍스트에 장식을 추가하는 방법을 자세히 살펴보겠습니다. 글을 끝까지 읽고 나면 전문 웹 디자이너처럼 텍스트 장식을 자유롭게 다룰 수 있게 될 것입니다.

CSS 텍스트 장식(text-decoration)이란?

텍스트에 밑줄, 취소선, 윗줄을 추가하는 것은 웹 페이지에서 핵심 콘텐츠에 주목을 끄는 효과적인 방법입니다.

예를 들어 밑줄이 그어진 텍스트는 사용자에게 "읽을 가치가 있는 내용"이라는 신호를 전달합니다. 또한 텍스트 장식은 접근성 있는 웹 경험을 설계하는 데도 중요한 역할을 합니다.

색상만으로 시각적 정보를 전달하면 색약·색맹 등 시각 장애가 있는 사용자에게는 아무런 의미가 없을 수 있습니다. 밑줄이나 취소선 같은 장식을 함께 사용하면 어떤 부분이 강조되었는지 더 많은 사용자가 인지할 수 있습니다.

CSS에서 text-decoration은 단축(shorthand) 속성으로, 세 가지 개별 속성을 한 번에 지정할 수 있습니다:

  • text-decoration-line (필수)
  • text-decoration-color (선택)
  • text-decoration-style (선택)

이 속성들을 하나씩 따로 지정하는 대신, 아래 문법처럼 text-decoration 하나로 묶어 작성하면 코드가 훨씬 간결해집니다:

text-decoration: line color style;

값의 나열 순서에는 특별한 규칙이 없으므로 편한 순서대로 작성해도 됩니다.

기본 개념을 알았으니, 실제 예제를 통해 동작 방식을 확인해 보겠습니다. 이번 튜토리얼에서는 자체 웹사이트를 만들려는 지역 빵집을 예시로 들겠습니다.

CSS 텍스트 장식 예제

우리가 사이트를 제작 중인 빵집은 각 페이지의 제목을 강조해 달라고 요청했습니다.

예를 들어 '소개(About)' 페이지에서는 About Us라는 제목에 밑줄을 넣어 사용자의 시선을 끌어야 합니다. 모든 제목은 연한 파란색 실선 밑줄을 사용하고, 선의 두께는 2px로 지정하기로 했습니다. 다음 코드로 이러한 제목 스타일을 만들 수 있습니다:

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

HTML 코드에서는 <h1> 태그로 화면에 About Us라는 제목을 정의했습니다. 그다음 CSS 코드에서는 웹 페이지의 모든 <h1> 요소에 적용되는 규칙을 만들고, text-decoration 속성으로 다음과 같은 밑줄을 생성했습니다:

  • 연한 파란색 (lightblue)
  • 실선 한 줄 (solid)
  • 밑줄 스타일 (underline)

이것이 text-decoration 속성으로 만든 간단한 밑줄 예제입니다. 이제 이 속성을 구성하는 각 하위 속성을 하나씩 자세히 살펴보겠습니다.

text-decoration-line — 장식 선의 종류

text-decoration-line 속성은 텍스트에 표시될 선의 종류를 지정합니다. 사용할 수 있는 값은 다음과 같습니다:

  • underline: 텍스트 아래에 밑줄을 만듭니다.
  • overline: 텍스트 위에 윗줄을 만듭니다.
  • line-through: 텍스트 중앙을 관통하는 취소선을 만듭니다.
  • blink: 텍스트를 깜빡이게 합니다. (현재 폐기된(deprecated) 값입니다.)

이 속성만 단독으로 사용하면 기본적으로 검은색 실선 밑줄이 표시됩니다.

빵집 예제로 돌아가 이 속성이 실제로 어떻게 동작하는지 살펴보겠습니다. '제퍼슨 패밀리 베이커리(Jefferson's Family Bakery)'가 'About Us' 페이지의 텍스트 스타일링을 요청했고, 특정 문구에 밑줄을 넣어 달라고 했다고 가정해 보겠습니다.

text-decoration-line 속성을 사용하면 이 작업을 간단히 처리할 수 있습니다. 코드는 다음과 같습니다:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

코드를 분석해 보겠습니다. HTML 코드에서는 <p> 태그로 빵집 소개 문단을 작성했습니다.

문단 안에서 most well-known for our bagels와 come to Jeffersons 두 구절은 <span> 태그로 감싸져 있으며, 이 태그는 해당 텍스트를 문단의 나머지 부분과 구분하는 역할을 합니다.

CSS 코드에서는 underline 클래스를 가진 모든 요소에 적용되는 규칙을 정의했습니다. 두 <span> 태그 모두 underline 클래스를 갖고 있으므로 정의된 스타일이 적용되며, 결과적으로 강조하고 싶은 텍스트에 검은색 밑줄 한 줄이 추가됩니다.

text-decoration-color — 장식 선의 색상

text-decoration-color 속성은 텍스트 장식의 색상을 지정합니다. 앞선 예제에서 만든 밑줄을 초록색으로 바꾸고 싶다면 다음과 같이 스타일을 작성하면 됩니다:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

CSS 코드에 text-decoration-color: green; 규칙을 추가했습니다. 이 설정 덕분에 text-decoration-line으로 만든 밑줄이 초록색으로 표시됩니다.

참고로 선 스타일을 만들려면 text-decoration-line 값을 반드시 함께 지정해야 합니다.

text-decoration-style — 장식 선의 스타일

text-decoration-style 속성은 텍스트 장식 선의 모양을 결정합니다. 사용 가능한 값은 다음과 같습니다:

  • solid: 실선 한 줄을 만듭니다.
  • double: 이중선을 만듭니다.
  • dashed: 파선(dashed)을 만듭니다.
  • dotted: 점선(dotted)을 만듭니다.
  • wavy: 물결선을 만듭니다.

다시 빵집 예제로 돌아가 보겠습니다. 이번에는 'About Us' 페이지의 About the Jeffersons 제목에 연한 파란색 점선 밑줄을 추가해 달라고 요청받았습니다. 다음 코드로 구현할 수 있습니다:

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

코드에서는 먼저 text-decoration-line과 text-decoration-color로 밑줄을 정의하고 색상을 연한 파란색으로 지정했습니다. 그다음 text-decoration-style 속성으로 밑줄 모양을 점선(dotted)으로 설정했습니다.

하이퍼링크 밑줄 제거하기

text-decoration 속성은 전통적인 HTML 링크에 기본으로 표시되는 밑줄을 제거할 때도 자주 사용됩니다. 이 속성에 none 값을 지정하면 요소에 적용된 기본 텍스트 스타일이 제거되기 때문입니다.

<a> 태그로 링크를 만들면 기본적으로 밑줄이 표시됩니다. 하지만 모든 웹사이트가 링크 아래의 밑줄을 원하는 것은 아닙니다.

예를 들어 빵집 웹사이트에 Contact Us라는 라벨을 가진 하이퍼링크가 있고, 이 링크는 사이트의 /contact.html 페이지로 연결된다고 가정해 보겠습니다. 해당 링크의 HTML 코드는 다음과 같습니다:

<a href="/contact.html">Contact Us</a>

이 컴포넌트를 렌더링하면 링크가 파란색에 밑줄이 그어진 상태로 표시됩니다. 이 밑줄을 제거하려면 다음 코드를 사용하면 됩니다:

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

두 번째 예제에서는 링크 아래의 밑줄이 사라진 것을 확인할 수 있습니다. CSS 코드에서 text-decoration: none; 규칙을 모든 <a> 태그에 적용했기 때문입니다. 이 규칙은 적용된 요소의 모든 텍스트 장식을 제거합니다.

마무리

텍스트 장식은 웹 페이지에서 특정 텍스트에 주목을 끌고, 텍스트를 더 미적으로 보기 좋게 만드는 방법 중 하나입니다.

CSS의 text-decoration 속성과 관련 하위 속성들을 활용하면 웹 페이지의 텍스트 블록에 적용할 장식을 자유롭게 정의할 수 있습니다.

이 글에서는 예제와 함께 text-decoration 속성과 하위 속성들을 사용해 웹 페이지의 텍스트를 꾸미는 방법을 살펴보았습니다. 이제 여러분도 전문 웹 디자이너처럼 텍스트 장식을 시작할 준비가 되었습니다!