텍스트 꾸미기

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

CSS에서 text-decoration 속성은 HTML 요소 내의 text에 decoration을 추가하거나 제거하는 데 사용됩니다. 이 속성을 사용하면 text에 underline, overline 또는 strike-through를 적용하여 시각적으로 강조하거나 특정 상태를 나타낼 수 있습니다.

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

none: 모든 텍스트 decoration을 제거합니다. 기본값입니다.

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

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

line-through: 텍스트 가운데를 가로지르는 선을 추가합니다(취소선).

예를 들어:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

챌린지

쉬움

HTML 문서가 주어집니다. 이 문서에는 앵커(<a>) 요소를 포함하는 paragraph(<p>)와 division(<div>)이 있습니다. 여러분의 과제는 text-decoration 속성을 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 다음 단계를 따르세요:

모든 <a> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 기본 underline을 제거하려면 text-decoration을 none으로 설정하세요.
<p> 요소에 값이 "underline"인 class 속성을 추가하세요.
underline class를 가진 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. text-decoration을 underline으로 설정하세요.
<div> 요소에 값이 "strike"인 class 속성을 추가하세요.
strike class를 가진 모든 요소를 대상으로 하는 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>