1. span 태그 활용
텍스트는 태그가 아니라 컨텐츠이기에 텍스트를 꾸미기 위해선 텍스트를 감싸고 있는 태그가 필요합니다.
줄바꿈같은 것이 없이 일부 텍스트를 꾸며주기 위해선 꾸미기위한 텍스트를 "span" 태그로 감싼 후
여기에 효과를 넣어줍니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
세상이 그대를 속일지 몰라도, 나 자신은 <span style="color:blue"> 세상을<span style="color:green">
속이지</span>말자.
</body>
</html>
2. 색상
텍스트에 컬러를 줄때는 color효과를 사용합니다. css에서는 컬러를 지정하는 3가지의 방법이 있는데,
아래에 설명하였습니다.
|
Hex |
16진수로 색상을 표현. #ff000(빨간색), #00ff00(초록색), #0000ff(파란색) |
|
RGB |
빨간색,초록색,파란색의 색상들을 조합해서 색상 값을 표현합니다. RGB(255.0.0) RGB(0.255.0), RGB(0,0.255) |
|
별명 |
red,blue,green등의 컬러 코드들이 있습니다. *참고로 컬러코드는 다양합니다. |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
#hex {
color : # 00ff00;
}
#rgb {
color : # RGB(0,0,255);
}
#name {
color : blue;
}
</style>
</head>
<body>
<div id="hex">
hex (color:#00ff00)
</div>
<div id="rgb">
RGB (color:RGB(0,0,255)
</div>
<div id="name">
color Name (color:blue)
</div>
</body>
</html>
텍스트들을 정렬하기 위하여는 정렬하고자 하는 텍스트들을 태그로 감싸고 이 태그에 text-align효과를
설정한다. css에서는 4가지 유형의 정렬방법을 l사용합니다.
|
center |
가운데 정렬 |
|
right |
오른쪽 정렬 |
|
left |
왼쪽 정렬 |
|
justify |
양쪽 정렬 및 글자 간의 간격을 조정해서 행간격을 일치시킴 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
div {
margin: 15px;
width: 450px;
}
#left {
text-align: left;
#right {
text-align: right;
}
#justify {
text-align: justify;
}
#center {
text-align : center;
}
</style>
</head>
<div id="left">
사람이 살아가는데 가장, 필요한 것은
<br/>
무엇일까요?
<br/>
돈,그리고 사랑, 그리고 친구,차,집,건강
<br/>
우리 현실적으로 한번 이야기 해봅시다.
</div>
<div id="right">
사람이 살아가는데 가장, 필요한 것은
<br/>
무엇일까요?
<br/>
돈,그리고 사랑, 그리고 친구,차,집,건강
<br/>
우리 현실적으로 한번 이야기 해봅시다.
<br/>
</div>
<div id="center">
사람이 살아가는데 가장, 필요한 것은
<br/>
무엇일까요?
<br/>
돈,그리고 사랑, 그리고 친구,차,집,건강
<br/>
우리 현실적으로 한번 이야기 해봅시다.
<br/>
</div>
<div id="justify">
간지가 있는 사람은 뭘 입어도 멋있어 보이고, 간지가 없고 마른 사람은 뭘입어도
</div>
</body>
</html>
3. text-decoration
|
overline |
윗줄 |
|
line-through |
취소선 |
|
underline |
밑줄 |
4. line-height
행간의 간격을 지정한다.
5. letter-spacing
문자와 문자사이에 간격을 설정합니다.
6. vertical-align
텍스트의 수직정렬을 설정합니다.
7. white-space
줄바꿈이 되는 방식을 설정합니다.
'IT > CSS' 카테고리의 다른 글
| 링크와 표를 꾸미기 (0) | 2015.03.11 |
|---|---|
| 폰트(텍스트) 활용하기 (1) | 2015.03.10 |
| css 선택자의 조합 (1) | 2015.03.09 |
| css의 선택자의 사용 (0) | 2015.03.09 |
| css를 사용하기 (0) | 2015.03.09 |