텍스트 꾸미기

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 22번째.

CSS에서 text-decoration 속성은 HTML 요소 내의 텍스트에 장식을 추가하거나 제거하는 데 사용됩니다. 이 속성을 사용하면 텍스트에 밑줄(underline), 윗줄(overline) 또는 취소선(strike-through)을 그을 수 있어, 시각적 강조를 제공하거나 특정 상태를 나타낼 수 있습니다.

text-decoration의 일반적인 값은 다음과 같습니다:

none: 모든 텍스트 장식을 제거합니다. 이것은 기본값입니다.

underline: 텍스트에 밑줄을 추가합니다.

overline: 텍스트 위에 윗줄을 추가합니다.

line-through: 텍스트 중간에 선을 긋습니다 (취소선).

예를 들어:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

챌린지

쉬움

앵커(<a>) 요소를 포함하는 단락(<p>)과 디비전(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 text-decoration 속성을 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

모든 <a> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 기본 밑줄을 제거하기 위해 text-decoration을 none으로 설정하세요.
<p> 요소에 값이 "underline"인 class 속성을 추가하세요.
클래스가 underline인 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. text-decoration을 underline으로 설정하세요.
<div> 요소에 값이 "strike"인 class 속성을 추가하세요.
클래스가 strike인 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. text-decoration을 line-through로 설정하세요.

치트 시트

text-decoration 속성은 HTML 요소 내의 텍스트에 장식을 추가하거나 제거합니다.

일반적인 값:

none: 모든 텍스트 장식을 제거합니다 (기본값)
underline: 텍스트에 밑줄을 추가합니다
overline: 텍스트 위에 윗줄을 추가합니다
line-through: 취소선을 추가합니다

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

직접 해보기

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>