| 속성명 | 설명 | 형식 | 사용 예 |
|---|---|---|---|
| font-family | 웹 문서에서 사용할 글꼴 지정 | font-family : <글꼴 이름> [,<글꼴 이름>, <글꼴 이름> ] | body { font-family : "맑은 고딕", 돋움, 굴림; } |
| font-size | 글자 크기를 조절하는 속성 | font-size : <절대크기> | <상대크기> | <크기> | <백분율> - HTML의 P태그 기본 크기 : 16px / H1 태그의 기본 크기 : 32px - 1em = 16px - 단위 : 절대값 - px (픽셀단위), pt (1인치/72로 프린트할 컨텐츠에 사용) - 단위 : 상대값 - 100%는 1em으로, 이들은 부모 요소와의 상대적 크기를 나타냄. rem은 html 요소와의 상대적 크기를 가지므로, 요소의 중첩에 영향을 받지 않음 |
바깥 - body { font-size : 20px; }
안쪽 - body { font-size : 2em; }
안쪽 - body { font-size : 120%; }
안쪽 - body { font-size : 1rem; }
|
| font-weight | 글자 굵기를 조절하는 속성 | font-weight : normal | bold | bolder | lighter | 100 | 200 | ~ | 900 - 기본 값 : normal (일반적인 형태) - 400 = normal / 700 = bold |
body { font-weight : bold; } |
| font-variant | 작은 대문자로 표시하기 | font-variant : normal | small-caps - 기본 값 : normal (일반적인 형태) - small-caps : 작은 대문자로 표시 |
body { font-variant : small-caps; } |
| font-style | 글자 스타일 지정하기 | font-style : normal | italic | oblique - 기본 값 : normal (일반적인 형태) - italic : 이탤릭체로 표시 (기울어진 글꼴이 처음부터 디자인 되어 있음. - oblique : 이탤릭체로 표시 (원래 글꼴을 단지 기울어지게 표시할 뿐 |
body { font-style : italic; } |
| font | 글자 속성을 한꺼번에 묶어 표현하기 | font : <font-style><font-variant><font-weight><font-size / line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar - 기본 값 : normal (일반적인 형태) - caption (캡션에 어울리는 글꼴 스타일로 표시), icon (아이콘에 어울리는 글꼴), menu (메뉴에 어울리는), message-box(대화상자에 어울리는), small-caption (작은 캡션에 어울리는), status-bar(상태 표시줄에 어울리는) |
body { font : bold 16px/25px "맑은 고딕"; } |
| 속성명 | 설명 | 형식 | 사용 예 |
|---|---|---|---|
| color | 글자색 지정 | color : 색상 (keyword | RGB(A) | HEX | HSL(A)) - Keyword : 색상명 - 색상명 보러 가기 - 검색 : CSS Color MDN - RGB(A) : 빨강, 초록, 파랑색의 혼합. 그리고 알파값을 붙여 투명도 표현 - HEX : R, G, B, Alpha 값들을 16진수 형태로 표현 - HSL(A) : 색상, 채도, 명도, 알파밧으로 색상 조합 |
문단이나 제목 등의 텍스트에서 사용되는 글자색 변경 문단이나 제목 등의 텍스트에서 사용되는 글자색 변경 문단이나 제목 등의 텍스트에서 사용되는 글자색 변경 |
| text-decoration | 밑줄, 취소선, 물결선 등으로 글을 꾸며줌 | text-decoration : none | underline | line-through |
a { text-decoration : underline }
a { text-decoration : line-through; }
a { text-decoration : underline line-through overline; }
a { text-decoration : wave underline tomato; }
a { text-decoration : dotted underline overline #008000 4px; }
a { text-decoration : dashed line-through deeppink 2px; }
|
| text-transform | 알파벳의 대소문자 표시에 사용 | text-transform : none | capitalize | uppercase | lowercase |
capitalize uppercase lowercase |
| text-shadow | 텍스트에 그림자 주기/td> | text-shadow : none | <가로거리><세로거리><번짐정도><색상> |
text-shadow : 2px 2px lightgray text-shadow : 3px -3px 4px blue text-shadow : 3px 6px 17px red; |
| text-align | 텍스트 정렬방식 | text-align : start | end | left | right | center | justify | match-parent |
text-align : left; text-align : center; text-align : right; |
| letter-sapcing | 텍스트 자간 | letter-spacing : normal | <크기> |
letter-sapcing : 10px letter-sapcing : 20px |
| word-sapcing | 단어 간격 | word-spacing : normal | <크기> |
word-sapcing은 단어 간격 word-sapcing은 단어 간격 |
| direction | 글자 쓰기 방향 지정 | direction : ltr | rtl |
소년은 개울가에서 소녀를 보자 곧 윤 초시네 증손녀 딸이라는 걸 알 수 있었다. 소녀는 개울에다 손을 잠그고 물장난을 하고 있는 것이다. 서울서는 이런 개울물을 보지 못하기나 한 듯이. 벌써 며칠째 소녀는, 학교에서 돌아오는 길에 물장난이었다. 그런데, 어제까지 개울 기슭에서 하더니, 오늘은 징검다리 한가운데 앉아서 하고 있다. 소년은 개울둑에 앉아 버렸다. 소녀가 비키기를 기다리자는 것이다. |
| line-height | 줄 높이 조절 | line-height : normal | <숫자> | <크기> | <백분율> | inherit |
소년은 개울가에서 소녀를 보자 곧 윤 초시네 증손녀 딸이라는 걸 알 수 있었다. 소녀는 개울에다 손을 잠그고 물장난을 하고 있는 것이다. 서울서는 이런 개울물을 보지 못하기나 한 듯이. 벌써 며칠째 소녀는, 학교에서 돌아오는 길에 물장난이었다. 그런데, 어제까지 개울 기슭에서 하더니, 오늘은 징검다리 한가운데 앉아서 하고 있다. 소년은 개울둑에 앉아 버렸다. 소녀가 비키기를 기다리자는 것이다. |
| text-indent | 줄 높이 조절 | text-indent : <크기> | <백분율> |
text-indent 속성으로는 들여쓰기를 조절할 수 있습니다. 값으로 입력한 수치만큼 첫 줄이 안쪽으로 들어가죠. 글자크기와 같이 px, %, em 등의 단위들을 사용할 수 있고, 음수를 넣어서 내어쓰기를 할 수도 있습니다. |
| 속성명 | 설명 | 형식 | 사용 예 |
|---|---|---|---|
| 목록태그 | ul / ol / li | - |
|