Property | Description |
글자의 색상을 지정합니다. | |
문단 배경색상 지정하기 | |
문장의 가로 맞춤을 설정합니다. | |
문장의 세로 맞춤을 설정합니다. | |
텍스트 방향 / 쓰기방향을 지정합니다. | |
요소 내부의 공백을 처리하는 방법을 지정합니다. | |
텍스트의 대문자 사용을 제어합니다. | |
문자사이의 간격을 늘이거나 줄입니다. | |
텍스트에서 단어 사이의 간격을 늘리거나 줄입니다. | |
줄 높이를 설정합니다. | |
텍스트 블록에서 첫 번째 줄의 들여 쓰기를 지정합니다. | |
장식을 텍스트에 추가하도록 지정합니다. | |
텍스트에 추가 된 그림자 효과를 지정합니다. | |
direction 속성과 함께 사용하여 동일한 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정하거나 반환합니다. |
속성 | 설명 | 값 |
| 문단 관련 스타일 | ||
| text-align | 수평 정렬 | left,center,right,jusdtify |
| vertical-align | 수직 정렬 | baseline, top, middle, bottom, text-top, text-bottom,super,sub,실수 값+ 단위, % |
| line-height | 행간 | 실수 값+단위,% |
| letter-spacing | 자간 | 실수 값+단위,% |
| word-spacing | 단어와 단어 사이의 간격 | 실수 값+단위,% |
| text-indent | 들여쓰기 | 실수 값+단위,% |
| white-space | 공백, 탭, 줄 바꾸기에 대한 처리 | normal(자동개행),pre(pre태그효과),nowrap(자동 개행 안함) |
| 테두리 관련 스타일 | ||
| width | 넓이 | 실수 값+단위,%,auto |
| height | 높이 | 실수 값+단위,%,auto |
| margin | 바깥쪽 여백 | 실수 값+단위 |
| padding | 안쪽 여백 | 실수 값+단위 |
| border | 테두리 두께 | border:테두리두께 테두리스타일 테두리색) |
| 위치 관련 스타일 | ||
| position | 표시 방법 | static(기본값,지정 안 함), relative(상대 값 배치,absolute(절대값 배치,fixed(고정) |
| top | 시작점의 수직(y)좌표 | 실수 값+단위,% |
| bottom | 끝점의 수직(y)좌표 | 실수 값+단위,% |
| left | 시작점의 수평(x)좌표 | 실수 값+단위,% |
| right | 끝점의 수평(x)좌표 | 실수 값+단위,% |
| float | 그림이나 문단 정렬 | none,left,right |
H배경색을 지정하듯이 아래와 같은 형식으로 지정 가능 합니다.
Color | |
red | 색상이름 지정방식 |
#00ff00 | HEX값 지정방식 |
rgb(0,0,255) | RGB값 지정방식 |
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div.t1 { color: red;}
- div.t2 { color: #00ff00;}
- div.t3 { color: rgb(0,0,255);}
- </style>
- </head>
- <body>
- <div class="t1">글자색1</div>
- <div class="t2">글자색2</div>
- <div class="t3">글자색3</div>
- </body>
- </html>
결과)
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- span{background-color:#aaaaff;}
- </style>
- </head>
- <body>
- <span>글자색1</span>
- </body>
- </html>
결과
text-align | |
left | 왼쪽정렬 |
center | 중앙정렬 |
right | 오른쪽정렬 |
justify | 양쪽정렬 |
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div.t1 { text-align: left;}
- div.t2 { text-align: center;}
- div.t3 { text-align: right;}
- div.t4 { text-align: justify;}
- </style>
- </head>
- <body>
- <div class="t1">왼쪽정렬</div>
- <div class="t2">가운데정렬</div>
- <div class="t3">오른쪽정렬</div><p>
- <div class="t4">
- -------------아래의 글은 양쪽정렬이된 글입니다.------------<br>
- 아이들도 부모님들도 한자리에 모이게 되어 미니운동회를 진행했습니다. 풍선 터트리기, 밀가루 사탕 먹기, 2인 3각 등 다양한 프로그램을 통해 모두가 하나 되는 시간을 가졌습니다. 아이들은 한참을 웃고, 재잘대며 즐거운 한 때를 보냈습니다.<p>
- </div>
- <div>
- -------------아래의 글은 양쪽정렬이 되지 않은 글입니다.------------<br>
- 아이들도 부모님들도 한자리에 모이게 되어 미니운동회를 진행했습니다. 풍선 터트리기, 밀가루 사탕 먹기, 2인 3각 등 다양한 프로그램을 통해 모두가 하나 되는 시간을 가졌습니다. 아이들은 한참을 웃고, 재잘대며 즐거운 한 때를 보냈습니다.
- </div>
- </body>
- </html>
결과
text-align | |
top | 요소의 상단은 선상에서 가장 높은 요소의 상단과 정렬됩니다. |
middle | 요소는 부모 요소의 중간에 배치됩니다. |
bottom | 요소의 아래쪽이 선상의 가장 낮은 요소와 정렬됩니다. |
super | 요소가 위 첨자 인 것처럼 정렬합니다. |
sub | 요소가 첨자 인 것처럼 정렬합니다. |
baseline | 요소의 기준선을 부모 요소의 기준선에 맞춥니다. |
text-top | 요소의 상단은 부모 요소의 글꼴의 상단과 정렬됩니다. |
text-bottom | 요소의 하단은 부모 요소의 글꼴의 하단과 정렬됩니다. |
정수 | 지정된 길이만큼 요소를 올리거나 내립니다. 음수 값은 허용됩니다. |
% | "line-height"속성의 백분율로 요소를 올리거나 내립니다. 음수 값은 허용됩니다. |
initial | 이 속성을 기본값으로 설정합니다. |
inherit | 이 속성을 부모 요소에서 상속받습니다. 상속에 대해 읽으십시오. |
1. inline이나 inline-block 요소에만 적용됩니다.
2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않습니다.
3. table cell에 적용할 때는 내용에 영향을 미침니다.
4. vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬합니다.
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- p{
- font-size:20px;
- border:1px solid #ccc;
- }
- img.initial {
- vertical-align: initial;
- }
- img.top {
- vertical-align: top;
- }
- img.middle {
- vertical-align: middle;
- }
- img.bottom {
- vertical-align: bottom;
- }
- img.text_top {
- vertical-align: text-top;
- }
- img.text_bottom{
- vertical-align: text-bottom;
- }
- img.length{
- vertical-align: -40px;
- }
- img.percent{
- vertical-align: 40%;
- }
- </style>
- </head>
- <body>
- <p>이건 <img class="initial" src="post_title_img.gif" width="120" height="60" />initial 속성입니다</p>
- <p>이건 <img class="top" src="post_title_img.gif" width="120" height="60" />top 속성입니다</p>
- <p>이건 <img class="middle" src="post_title_img.gif" width="120" height="60" />middle 속성입니다</p>
- <p>이건 <img class="bottom" src="post_title_img.gif" width="120" height="60" />bottom 속성입니다</p>
- <p>이건 <img class="text-top" src="post_title_img.gif" width="120" height="60" />text-top 속성입니다</p>
- <p>이건 <img class="text_bottom" src="post_title_img.gif" width="120" height="60" />text_bottom 속성입니다</p>
- <p>이건 <img class="length" src="post_title_img.gif" width="120" height="60" />length 속성입니다</p>
- <p>이건 <img class="percent" src="post_title_img.gif" width="120" height="60" />percent 속성입니다</p>
- </body>
- </html>
