span 태그
텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다.
example1.html - (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> 할지라도 그들의 관현악이며, 사는가 있음으로써 <span style="color:red">생명</span>을 힘있다. </body> </html>
색
텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다.
| Hex | 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑) |
| RGB | 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255) |
| 별명 | red, blue, green등 칼러코드 참고 |
example2.html - (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
#hex {
color: #FF0000;
}
#rgb {
color: RGB(255,0,0);
}
#name {
color: red;
}
</style>
</head>
<body>
<div id="hex">
hex (color:#ff0000)
</div>
<div id="rgb">
RGB (color:RGB(255,0,0))
</div>
<div id="name">
Color Name (color:red)
</div>
</body>
</html>
정렬
텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.
| left | 왼쪽 정렬 |
| right | 오른쪽 정렬 |
| center | 가운데 정렬 |
| justify | 양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴 |
example3.html - (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
div {
margin: 30px;
width: 500px;
}
#left {
text-align: left;
}
#right {
text-align: right;
}
#justify {
text-align: justify;
}
#center {
text-align: center;
}
</style>
</head>
<body>
<div id="left">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="right">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="center">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="justify">
바도 급하고 꾀꼬리 김첨지는 하여간 전에 같이 몰랐다. 자기를 흐리고 없이 말은들었었는데. 왈칵 무시무시한 움푹한 옷도 하나 기다리고 예끼 돈을 대었다. 상판을딱딱 없으니, 그 멈춘 다니는 메이었다. 하고 달려들며 내기를 눈길을 같이 대한 벌었단 슬근슬근 높아졌다. 왜 가락이 바다 하고 제 언땅에 아니로되, 정거장까지 듯하였다. 만일 하고 남대문 정거장에서 꼬리를 붙었어, 정말 모르리라. 붙은 궂은 흘릴 알아 어찌할 울렸다. 염려를 전을 자식뻘밖에 문을 전이 살려준 모르리라. 운수가 그 빌어든 나를 걱정을 구워지는 남을 듯싶다. 너비아니 김첨지를 발길은 벌써 하고 치삼이와 하였다.
</div>
</body>
</html>
텍스트 장식
text-decoration
| overline | 윗줄 | 예제 |
| line-through | 취소선 | |
| underline | 밑줄 | 예제 |
line-height
행간격을 지정한다. 참고
letter-spacing
문자와 문자사이의 간격을 지정한다. 참고
vertical-align
텍스트의 수직 정렬을 지정한다. 참고
white-space
줄바꿈되는 방식을 지정한다. 참고
