[CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자

728x90

SMALL

1. text-decoration

텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
none : 텍스트 효과 없애기
underline: 텍스트 밑줄
line-through: ~~텍스트 취소선~~
overline: 텍스트 윗줄

2. text-transform

텍스트에 포함된 영문자에 대한 대소문자를 설정
lowercase: 텍스트 소문자 설정
uppercase: 텍스트 대문자 설정
capitalize: 앞글자를 대문자로 설정

3. font-variant

소문자를 작은 대문자로 변경(small-caps)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML</title>
    <style>
        a:link { text-decoration:  none;}
        a:visited {text-decoration: none;}
        a:hover {text-decoration: underline;}
        a:active {text-decoration: underline;}

        h2 { font-size: 50px;}

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

        .variant { font-variant: small-caps;}
    </style>
</head>
<body>
    <h2>HTML</h2>
    <p>귀도 반 로섬(네덜란드어: <span class="variant">Guido van Rossum</span>, 1956년 1월 31일 ~)은 네덜란드 출신의 소프트웨어 엔지니어이다. 프로그래밍 언어인 파이썬을 개발한 것으로 유명하다. 2005년부터 2012년까지 구글에서 일했으며, 2013년부터 2019년 10월까지 드롭박스에서 일하고 있었다. <span class="through">은퇴하였다가</span> 2020년 11월 13일 MS에 다시 입사하였다</span></p>
    <p><a href="https://ko.wikipedia.org/wiki/%EA%B7%80%EB%8F%84_%EB%B0%98_%EB%A1%9C%EC%84%AC">출처</a></p>
</body>
</html>

📄 HTML 파일

17_css텍스트3.html

0.00MB

728x90

LIST

'Web > CSS' 카테고리의 다른 글

[CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow (0)	2023.03.30
[CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 (0)	2023.03.30
[CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이 (0)	2023.03.30
[CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 (0)	2023.03.30
[CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 (0)	2023.03.30