728x90
1. 글꼴 관련 스타일
font-size
- px | rem | em | %font-style
- normal | italic | obliquefont-weight
- normal | bold | bolder | Lighterfont-family
: 웹 문서에 사용할 글꼴 지정
body{
font-family: "맑은 고딕", 돋음, 굴림
/* 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶는다 */
}
1.2 웹 폰트 사용
@font-face {
font-family: cheri;
src: url(../fonts/cheri.ttf);
}
.font-md{
font-family: cheri, '글꼴이름', serif;
font-size: 40px;
}
1.3 텍스트 관련 스타일
color
text-align
- left | right | center | justify | match-parenttext-decoration
- none | underline | overline | line throughtext-shadow
- <가로거리> <세로거리> <번짐정도> <색상>text-transform
- capitalize | uppercase | lowercasetext-indent
: 들여쓰기line-height
: 줄 간 간격letter-spacing
: 글자 간 간격word-spacing
: 단어 간 간격
1.4 목록 스타일
list-style-type
- none | circle | squarelist-style-image: url()
list-style-position
- inside (들여쓰기)
1.5 표 스타일
cation-side
: top | bottomborder-spacing
: 셀과 셀 사이의 여백 조절border-collapse
: 표와 셀의 테두리를 하나로 합쳐 표현
728x90
'WebUI > CSS3' 카테고리의 다른 글
[CSS] 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2023.07.07 |
---|---|
[CSS] CSS 박스 모델 (0) | 2023.07.07 |
[CSS] CSS 선택자 모음 (0) | 2023.07.07 |