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 |
댓글,