글꼴 관련 CSS규약
font-family : 글꼴 지정하기(사용자 시스템에 설치된 글꼴)
{font-family: <글꼴이름>,<글꼴>....}
-
@font-face속성 : 웹 폰트 사용하기
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
.ng-font{
font-family: 'Nanum Gothic', 돋움;
} @font-face {
font-family: 'trana'; /* 글꼴 */
src: local('trana'),
url('trana.eot'),
url('trana.woff') format('woff'),
url('trana.ttf') format('truetype');
}
.w-font {
font-family:'trana', sans-serif; /* 웹 폰트 지정 */
}
-
font-size : 글자 크기 조절
| 속성 값 |
설명 |
| <절대 크기> |
브라우저에서 지정한 크기 xx-small, x-small, small, medium, large, x-large, xx-large |
| <상대 크기> |
부모 요소의 글자크기를 기준으로 더 크게 표시하거나 작게 표시 larger, smaller |
| <크기> |
브라우저와 상관없이 글자 크기 직접 지정 |
| <백분율> |
부모요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시 |
| 단위 |
설명 |
| em |
해당 글꼴의 대문자 M의 너비를 기준으로 크기조절 |
| ex |
해당 글꼴의 소문자 x의 높이를 기준으로 크기조절 |
| px |
픽셀 |
| pt |
포인트 |
| 속성 값 |
설명 |
| normal |
일반적인 형태로 기본값 |
| bold , light, bolder |
굵게, 원래 굵기보다 더 가늘게, 더 굵게 |
| 100~900 |
400은 normal, 700은 bold에 해당하며, 좀 더 세밀히 글꼴 두께 조절 가능 |
font-variant : 작은 대문자로 표시
| 속성 값 |
설명 |
| normal |
일반적인 형태로 기본값 |
| small-caps |
작은 대문자로 표시 |
| 속성 값 |
설명 |
| normal |
일반적인 형태로 기본값 |
| italic |
이탤릭체 표시(기울어진 글꼴이 디자인되어있음) |
| oblique |
이탤릭체 표시(글꼴을 기울어지게함) |
font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar
| 속성 값 |
설명 |
| font-* |
font-로 시작하는 글꼴 관련 속성 한꺼번에 나열 |
| caption |
캡션에 어울리는 글꼴 스타일로 표시 |
| icon |
아이콘에 어울리는 글꼴 스타일 표시 |
| menu |
드롭다운 메뉴에 어울리는 글꼴 스타일 표시 |
| message-box |
대화상자에 어울리는 글꼴 스타일 표시 |
| small-caption |
작은 캡션에 어울리는 글꼴 스타일 표시 |
| status-bar |
상태 표시줄에 어울리는 글꼴 스타일 표시 |
color : 글자색 지정 (rgb, 16진수, hsl)text-decoration : 텍스트에 줄 표시하기 / 없애기
| 속성 값 |
설명 |
| none |
밑줄을 표시하지 않는다. |
| underline |
밑줄을 표시합니다. |
| overline |
영역 위로 선을 그림 |
| line-through |
영역을 가로지르는 선을 그린다. |
text-transform " 텍스트 대/소문자 변환
| 속성 값 |
설명 |
| none |
변환하지 않는다. |
| capitalize |
시작하는 첫 번째 글자를 대문자로 변환 |
| uppercase |
모든글자 대문자 변환 |
| lowercase |
모든 글자 소문자 변환 |
| full-width |
가능한 모든 문자 전각문자(고정 폭 영문자 너비의 두 배 정도 너비의 문자)로 변환 |
text-shadow: none | <가로 거리> <세로 거리> <흐림 정도> <번짐 정도> <색상>
| 속성 값 |
설명 |
| <가로 거리> |
텍스트부터 그림자까지의 가로 거리(양수 오른쪽, 음수 왼쪽), 필수 |
| <세로 거리> |
텍스트부터 그림자까지의 세로 거리(양수 아래쪽, 음수 위쪽), 필수 |
| <흐림 정도> |
0이 디폴트 값으로 진한 그림자를 표시하며, 값이 커질 수록 그림자가 부드러워진다. |
| <번짐 정도> |
그림자가 번지는 정도. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나감. 음수는 그림자가 모든 방향으로 축소되어보임 |
| <색상> |
한 가지 이상색을 공백으로 지정할 수 있음 |
| 속성 값 |
설명 |
| normal |
여러 개의 공백을 하나로 표시 |
| nowrap |
여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음 |
| pre |
여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음 |
| pre-line |
여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈 |
| pre-wrap |
여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈 |
letter-spacing / word-spacing : 텍스트 간격 조정
text-align: start | end | left | right | center | justify(양쪽) | match-parent(부모 요소에 따라)
text-justify : 정렬 시 공백 조절
text-justify: auto | none | inter-word(단어사이 공백 조절) | distribute(인접한 글자 사이 공백 똑같이 맞춤)
text-indent: <크기> | <백분율>
line-height: normal | <숫자> | <크기> | <백분율> | <inherit>
text-overflow : 넘치는 텍스트 표기
text-overflow: **clip**(넘치는 텍스트 자르기) | ellipsis(말 줄임표로 잘린 텍스트 있다고 표시)
CSS 검사기
list-style-type : 목록의 불릿과 번호 스타일 지정
list-style-type: none | <순서 없는 목록의 불릿>|<순서 목록의 번호>|
- 순서 없는 목록의 불릿
- **disc**(●)
- circle(○)
- square(◼︎)
- none
- 숫자 바꾸기
- **decimal**(1로 시작하는 10진수)
- decial-leading-zero(01,02,03,...)
- lower-roman(소문자 로마 숫자)
- upper-roman(대문자 로마 숫자)
- lower-alpha or lower-latin(소문자 알파벳)
- upper-alpha or upper-latin(대문자 알파벳)
- armenian(아르메니아 숫자)
- georgian(조지 왕조시대 숫자)
list-style-image : 불릿 대신 이미지 넣기
list-style-image: none | <이미지> url("images.jpg")
list-style-position : 목록에 들여 쓰는 효과 내기
list-style-position: inside | outside
list-style : 목록 속성 한꺼번에 표시하기