텍스트 꾸미기

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

줄바꿈되는 방식을 지정한다. 참고

코스 전체목록