스타일시트에서 폰트관련 속성
| Style Sheet 스타일시트1. 폰트 관련 속성 |
| font-family | |
| 값 | fonts 폴더에 있는 폰트 이름 |
| 설명 | 화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다. |
| 예제 | P {font-family: Courier New} |
| 기타 | 만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 때 아주 유용하게 쓰인다. P {font-family: 굴림, Arial} |
| font-style | |
| 값 | normal, italic, oblique |
| 설명 | 화면에 나타나는 글씨의 모양을 설정한다. |
| 예제 | H1 {font-style: italic} |
| font-weight | |
| 값 | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| 설명 | 글씨의 굵기를 설정한다. 일반적인 폰트는 normal 또는 bold만을 지원한다고 생각하면 된다. |
| 예제 | H2 {font-weight: bold} |
| font-size | |
| 값 | 절대값: 포인트(pt), 센티미터(cm), 픽셀(px), 인치(in) 상대값: larger, smaller, 퍼센트값 등 |
| 설명 | 글씨의 크기를 설정한다. |
| 예제 | H3 {font-size: 9pt} |
색깔과 백그라운드 관련 속성 |
| color | |
| 값 | 색깔 이름, RGB값 |
| 설명 | 글씨의 색깔을 설정한다. RGB값을 그대로 사용할 수도 있고, 십진수로도 사용할 수 있다. 또는 색깔의 고유 이름으로도 사용할 수 있다. |
| 예제 | EM {color: red} EM {color: rgb(256,0,0)} |
| background | |
| 값 | transparent, 색깔 이름, URL, RGB값 등 |
| 설명 | 백그라운드 색깔 또는 백그라운드 이미지를 설정한다. |
| 예제 | P {background: transparent} BODY {background: red} BODY {background: url(pcline.gif)} |
텍스트 문자 관련 속성 |
| word-spacing | |
| 값 | normal, 길이 |
| 설명 | 단어와 단어 사이의 공간을 설정한다. |
| 예제 | H1 {word-spacing: 0.4cm} |
| letter-spacing | |
| 값 | normal, 길이 |
| 설명 | 글자와 글자 사이의 공간을 설정한다. |
| 예제 | H1 {letter-spacing: 0.4cm} |
| text-decoration | |
| 값 | none, underline, overline, line-through, blink |
| 설명 | 글자 또는 문자열의 속성을 설정한다. |
| 예제 | A:link {text-decoration: none} |
| text-indent | |
| 값 | 길이, 퍼센트값 |
| 설명 | 들여쓰기를 설정한다. |
| 예제 | P {text-indent: 3cm} |
| line-height | |
| 값 | 숫자, 길이, 퍼센트값 |
| 설명 | 행간을 설정한다. |
| 예제 | DIV {line-height: 1.2cm} |
박스(레이아웃) 관련 속성 |
| margin-top, margin-right, margin-bottom, margin-left, margin | |
| 값 | 길이, 퍼센트값, auto |
| 설명 | 해당하는 내용의 위, 오른쪽, 아래쪽, 왼쪽 등의 여백을 설정한다. |
| 예제 | BODY {margin-left: 3cm} |
| 기타 | 여백 속성을 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로 묶어서 설정할 수 있다. 이때 속성값은 네개를 가지는데, 순서는 top, right, bottom, left의 순서이다. 만일 속성값이 하나라면 상하좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 top과 bottom, 두번째 값은 right와 left의 값이 된다. BODY {margin: 1cm 2cm 3cm 4cm} |
| padding-top, padding-right, padding-bottom, padding-left, padding | |
| 값 | 길이, 퍼센트값, auto |
| 설명 | 텍스트나 이미지 등에 있어서 테두리(border)와 내용간의 빈 공간을 설정한다. |
| 예제 | H1 {padding-left: 1cm} |
| 기타 | margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할 수 있다. H1 {padding-left: 1cm} |
| border-top, border-right, border-bottom, border-left, border | |
| 값 | thin, medium, thick, 길이값, none, dotted, dashed, solid, double, groove, ridge, inset, outset |
| 설명 | 테두리(border)값을 설정한다. |
| 예제 | P {border: solid} |
| 기타 | margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할 수 있다. |
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
