span 태그
텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다.
1
2
3
4
5
6
7
8
9
| <!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등 칼러코드 참고 |
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
| <!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 | 양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴 |
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <!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> |
댓글 없음:
댓글 쓰기