텍스트 장식

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 22번째.

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

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으로 설정하세요.

직접 해보기

<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>