Web Basic/HTML
CSS 몇가지 text 관련 style 속성들 알아보기
Hoplin
2022. 3. 10. 02:00
반응형
text-shadow
텍스트에 그림자 효과를 주는 속성이다. 아래와 같은 형식으로 작성한다.
text-shadow : <가로 거리 : 필수> <세로 거리 : 필수> <번짐 정도 : 필수x, 디폴트 0> <색상>
아래와 같이 텍스트에 그림자 효과가 적용된다,.
예시 코드는 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.shadow1{
color: red;
text-shadow: 1px 1px black;
}
.shadow2{
text-shadow: 5px 5px 3px #ffa500;
}
.shadow3{
color: #fff;
text-shadow: 7px -7px 20px black;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">JS</h1>
</body>
</html>text-transform
영문자 표기시 텍스트의 대소문자를 원하는대로 바꿀 수 있다. text-transform속성은 아래와 같다.
- capitalize : 첫번쨰 글자를 대문자로 바꾼다
- uppercase : 모든 글자를 대문자로 변경한다
- lowercase. : 모든 글자를 소문자로 변경한다.
예제 코드는 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.trans1{
/* 첫글자 대문자로 */
text-transform: capitalize;
}
.trans2{
/* 모두 대문자로 */
text-transform: uppercase;
}
.trans3{
/* 모두 소문자로 */
text-transform: lowercase;
}
</style>
</head>
<body>
<div>
<p class="trans1">html</p>
<p class="trans2">css</p>
<p class="trans3">JS</p>
</div>
</body>
</html>
letter-spacing
letter-spcing속성은 글자 사이 간격을 조절해 준다. px, em과 같은 단위나 퍼센트로 조절해 줄 수 있다. 예제 코드는 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.spacing1{
letter-spacing: 0.2em;
}
.spacing2{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div>
<p class="spacing1">CSS</p>
<p class="spacing2">CSS</p>
</div>
</body>
</html>text-decoration
text-decoration속성은 텍스트에 밑줄을 긋거나 취소선을 표시한다. <a>태그를 이용해 하이퍼링크를 만들면, 디폴트로 밑줄이 생기는데 text-decoration속성을 이용해서 없앨 수 있다. 사용할 수 있는 속성은 아래와 같다.
- none : 텍스트에 줄을 표시하지 않는다
- underline : 밑줄을 표시한다
- overline : 윗줄을 표시한다
- line-through : 취소선을 표시한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.text1{
text-decoration: none;
}
.text2{
text-decoration: underline;
}
.text3{
text-decoration: overline;
}
.text4{
text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<p><a href="#" class="text1">Test Hyperlink</a></p>
<p class="text2">underline</p>
<p class="text3">overline</p>
<p class="text4">line-through</p>
</div>
</body>
</html>
반응형