1. CSS 텍스트
- 색상, 정렬, 간격, 장식, 변형 등과 같은 다양한 텍스트 스타일을 매우 쉽고 효과적으로 정의할 수 있다.
2. color
- 텍스트 색상은 CSS color 속성에 의해 정의된다.
- color 속성은 CSS 텍스트의 일부인 것처럼 보이지만, 실제로는 CSS의 독립형 속성이다.
body {
color: #434343;
}
3. text-align
- 텍스트의 수평 정렬을 설정하는데 사용된다.
- 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤의 4가지 방법으로 정렬할 수 있다.
- justify의 속성 값의 경우 신문처럼 마지막 줄을 제외한 왼쪽과 오른쪽의 여백을 정렬할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Text Alignment using CSS</title>
<style>
h1 {
text-align: center;
}
p {
width: 300px;
text-align: justify;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</html> 
4. text-decoration
- 텍스트에서 장식을 설정하거나 제거하는 용도로 사용된다.
- underline, overline, line-through, none
- 방문자에게 혼란을 줄 수 있으므로 링크가 아닌 텍스트에는 밑줄을 사용하지 않는 것이 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Text Decoration using CSS</title>
<style>
h1 {
text-decoration:overline;
}
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
* 링크에서 기본 밑줄 제거
- text-decoration 속성은 HTML 하이퍼링크에서 기본 밑줄을 제거하도록 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Default Underline from HTML Links</title>
<style>
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
border-bottom: none;
}
</style>
</head>
<body>
<p>Place your mouse pointer <a href="#">over me!</a></p>
</body>
</html>
5. text-transform
- 텍스트는 종종 대/소문자가 혼합되어 작성된다. 그러나 특정 상황에서는 완전히 다른 대/소문자로 텍스트를 표시할 수 있다.
- text-transform을 사용하면 텍스트 내용을 대문자 또는 소문자로 변환하거나 원본 텍스트를 수정하지 않고 각 단어의 첫 글자를 대문자로 바꿀 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Text Transformation using CSS</title>
<style>
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html> 
6. text-indent
- 텍스트 블록 내에서 텍스트 첫 줄의 들여쓰기를 설정하는데 사용한다.
- 일반적으로 텍스트의 첫 번째 줄 앞에 빈 공간을 삽입하여 수행된다.
- 들여쓰기의 크기는 백분율(%), px, em 등을 사용하여 지정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Text Indentation using CSS</title>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<body>
<h1>CSS Text Indentation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</html>
7. letter-spacing
- 텍스트 문자 사이에 추가 간격을 설정하는데 사용된다.
- px, em 등의 길이 값을 가질 수 있으며 음수 값 또한 사용할 수 있다.
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
8. word-spacing
- 단어 사이에 추가 간격을 지정하는 데 사용된다.
- px, em 등의 길이 값을 허용한다.
- word-spacing은 text-align: center에 영향을 받을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting word spacing using CSS</title>
<style>
p.one {
word-spacing: 20px;
}
p.two {
width: 150px;
word-spacing: 20px;
text-align: justify;
}
p.three {
word-spacing: 20px;
white-space: pre;
}
</style>
</head>
<body>
<p class="one">This is a normal paragraph.</p>
<hr>
<p class="two">Note that spacing between the words of this paragraph are varying in order to justify the text even if the value of word-spacing property is set to 20px.</p>
<hr>
<p class="three">Note that spacing between the words
of this paragraph are higher than the normal spacing
even if whitespace are preserved.</p>
</body>
</html> 
9. line-height
- 텍스트 줄의 높이를 설정하는데 사용된다.
- '행간'이라고도 하며 일반적으로 텍스트 줄 사이의 거리를 설정하는데 사용된다.
- 숫자, 백분율(%) 또는 px, em 등이 속성 값으로 올 수 있다. (음수 값은 허용되지 않는다.)
- 값이 숫자인 경우 요소의 글꼴 크기에 숫자를 곱하여 줄 높이를 계산한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Line Height using CSS</title>
<style>
p {
line-height: 1.2;
border: 1px solid #00ff00;
}
div {
line-height: 200%;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<h1>Change the values to see how it works</h1>
<p>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using number.</p>
<div>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using percentage.</div>
</body>
</html>
'Language > CSS' 카테고리의 다른 글
| [CSS] CSS List (0) | 2021.02.03 |
|---|---|
| [CSS] CSS 링크 (0) | 2021.02.03 |
| [CSS] CSS 글꼴 (0) | 2021.02.03 |
| [CSS] CSS 배경 (0) | 2021.02.03 |
| [CSS] CSS 색상 (0) | 2021.02.03 |