[CSS] 4. 텍스트 서식 지정





1. 텍스트 색상


텍스트의 색상을 변경할 때는 color 속성을 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body { color: blue; }
        </style>
    </head>
    <body>
        글자 색상 변경하기
    </body>
</html>
cs



2. 텍스트 정렬


텍스트 내용을 왼쪽, 오른쪽, 가운데 등으로 정렬하고 싶다면 text-align 속성을 사용한다.

속성 값으로는 left(왼쪽 정렬), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬)이 있다.


아래는 각각의 속성에 따라 어떻게 나타나는지 알아보기 위해 본문에 각기 다른 속성을 적용해 본 모습이다.



3. 텍스트 장식


text-decoration 속성을 사용하면 문자 위나 아래에 줄을 긋거나 이미 그어진 줄을 삭제할 수 있다.

속성 값으로는 none, underline, overline, lint-through가 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .d1 { text-decoration : none; }
            .d2 { text-decoration : underline; }
            .d3 { text-decoration : overline; }
            .d4 { text-decoration : line-through; }
        </style>
    </head>
    <body>
        <p class="d1">아무 효과 없는 텍스트를 표시한다.</p>
        <p class="d2">텍스트 아래에 줄을 긋는다.</p>
        <p class="d3">텍스트 위에 줄을 긋는다.</p>
        <p class="d4">텍스트 가운데에 줄을 긋는다.</p>
    </body>
</html>
cs



4. 텍스트 변환


text-transform 속성을 사용해 지정된 텍스트를 소문자나 대문자로 변환할 수 있다.

속성 값으로는 none(변환 안함), capitalize(첫 글자만 대문자로 변환), uppercase(모두 대문자로 변환), lowercase(모두 소문자로 변환)가 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .t1 { text-transform: none; }
            .t2 { text-transform: capitalize; }
            .t3 { text-transform: uppercase; }
            .t4 { text-transform: lowercase; }
        </style>
    </head>
    <body>
        <p class="t1">text-transform : none</p>
        <p class="t2">text-transform : capitalize</p>
        <p class="t3">text-transform : uppercase</p>
        <p class="t4">text-transform : lowercase</p>
    </body>
</html>
cs



5. 텍스트 들여 쓰기


문단에서 첫 번째 글자를 들여 쓰기 하려면 text-indent 속성을 사용한다. 

지정해준 값의 정도에 따라 들여 쓰기 정도가 지정된다.

참고로 음수 값을 지정해주면 글자가 왼쪽으로 들여 써진다.




6. 자간 조절


자간이란 문자와 문자 사이의 간격을 말하는데, 이 자간을 늘리거나 줄이기 위해서는 letter-spacing 속성을 사용한다.




7. 단어 간격 조절


단어와 단어 사이의 간격을 조절할 때는 word-spacing 속성을 사용한다.




8. 줄 사이 간격 조절


문단의 줄과 줄 사이 간격을 조절할 때는 line-height 속성을 사용한다.

픽셀 또는 숫자 값, %값을 사용할 수 있다.




9. 텍스트 그림자


text-shadow 속성을 사용해 텍스트에 그림자를 추가할 수 있다.

test-shadow: h-shadow(x방향 이동거리) v-shadow(y방향 이동거리) blur-radius(흐림 정도) color(색상)와 같은 형식으로 사용할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1 { text-shadow: 3px 3px 1px red; }
        </style>
    </head>
    <body>
        <h1>text shadow</h1>
    </body>
</html>
cs


만약 그림자를 두 개 이상 설정하고 싶다면 아래와 같이 콤마(,)를 이용하여 그림자를 구분하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1 { text-shadow: 3px 3px 1px red, -3px -3px 1px blue; }
        </style>
    </head>
    <body>
        <h1>text shadow</h1>
    </body>
</html>
cs



10. 공백 처리


white-space속성을 이용해 요소 내부의 공백을 처리할 수 있다.

 속성 값 

 설명 

 normal

 기본값으로, 공백을 여러 번 주어도 한 번만 입력한 것처럼 간주되고 공간에 따라 자동적으로 줄바꿈이 일어나게 된다.

 nowrap

 공백을 여러 번 주어도 한 번만 입력한 것처럼 간주되고 공간이 다 찼어도 절대 줄바꿈이 일어나지 않는다. <br>태그가 입력될 때 까지 텍스트가 계속 같은 줄에 표시된다.

 pre 

 <pre>태그와 같은 역할을 하는 것으로, 공백과 줄바꿈이 입력한 대로 일어난다.

 pre-line 

 공백을 여러 번 주어도 한 번만 입력한 것처럼 간주되고 입력한 대로 줄바꿈이 일어난다.

 pre-wrap

 공백을 준 만큼 공백이 표시되고 입력한 대로 줄바꿈이 일어난다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p { 
                border:1px solid black;
                width:300px;
            }
            p.c1 { white-space: normal;}
            p.c2 { white-space: nowrap;}
            p.c3 { white-space: pre;}
            p.c4 { white-space: pre-line;}
            p.c5 { white-space: pre-wrap;}
        </style>
    </head>
    <body>
        <p class="c1">공백 처리 방법 예시입니다.       white-space의 속성 값으로 여기서는 
normal을 사용했습니다.</p>
        
        <p class="c2">공백 처리 방법 예시입니다.       white-space의 속성 값으로 여기서는 
nowrap을 사용했습니다.</p>
        
        <p class="c3">공백 처리 방법 예시입니다.       white-space의 속성 값으로 여기서는 
pre를 사용했습니다.</p>
        
        <p class="c4">공백 처리 방법 예시입니다.       white-space의 속성 값으로 여기서는 
pre-line을 사용했습니다.</p>
        
        <p class="c5">공백 처리 방법 예시입니다.       white-space의 속성 값으로 여기서는 
pre-wrap을 사용했습니다.</p>
    </body>
</html>
cs


'프로그래밍 > 웹표준' 카테고리의 다른 글

[CSS] 6. 링크에 스타일 적용  (0) 2017.09.22
[CSS] 5. 폰트 설정하기  (0) 2017.09.18
[CSS] 3. 배경 설정하기  (0) 2017.06.27
[CSS] 2.CSS에서 색상 표현하기  (0) 2017.06.24
[CSS] 1.CSS 소개와 사용방법  (0) 2017.06.18
더보기

댓글,

violet quartz