[ 2 ] 글꼴
1) font-style
: 기울기.
- 기본값
normal: 기울기 없음.- 설정값
italic: 이텔릭체.oblique: 기울어진 글자.
2) font-weight
: 두께.
- 기본값
normal/400: 기본.- 설정값
bold/700: 두껍게.- 100 ~ 900 : 100단위로 두께 조절
bolder: 부모 보다 두껍게.lighter: 부모 보다 얇게.
3) font-size
: 두께.
- 기본값
16px: 기본.- 설정값
- 단위 :
pxemvw...%: 부모 요소의 폰트 크기에 대한 비율.smaller: 부모 보다 작게.larger: 부모 보다 크게.xx-small~xx-large: 가장 작게 ~ 가장 크게, 7단계로 크기 설정.
4) line-height
: 한 줄의 높이.
: 한 줄의 높이가 폰트 크기 보다 클 경우 글자가 줄의 수직 가운데 위치.
- 기본값
normal: 기본.- 설정값
- 단위 :
pxemvw...- 숫자 : 폰트 크기의 배수 설정.
%: 요소의 폰트 크기에 대한 비율.
5) font-family
: 폰트 설정.
font-family : 글꼴a, "글 꼴@b", ...글꼴계열;
- 글꼴 계열
serif: 바탕체 계열.sans-serif: 고딕체 계열.monospace: 가로폭이 동등한 글자들을 가진 폰트 계열.cursive: 필기체 계열.fantasy: 장식 폰트 계열.
[ 3 ] 문자
1) color
: 색상.
- 기본값
rgb(0,0,0): 검정.- 설정값
- 색상 : 기타 설정 가능 색상.
2) text-align
: 정렬.
- 기본값
left: 왼쪽 정렬.- 설정값
right: 오른쪽 정렬.center: 가운데 정렬.justify: 양쪽 정렬.
3) text-decoration
: 장식 선.
- 기본값
none: 없음.- 설정값
underline: 밑줄.line-through: 취소선.overline: 윗줄.
4) text-indent
: 들여쓰기.
- 기본값
0: 없음.- 설정값
- 단위 :
pxemvw...%: 요소의 가로 너비에 대한 비율.
[ 4 ] 배경
1) background-color
: 배경색상.
- 기본값
transparent: 투명.- 설정값
- 색상 : 기타 설정 가능 색상.
2) background-image
: 배경 이미지 삽입.
- 기본값
none: 없음.- 설정값
url("경로"): 이미지 경로.
3) background-repeat
: 배경 이미지 반복 설정.
- 기본값
repeat: 수직 / 수평 반복.- 설정값
repeat-x: 수평 반복.repeat-y: 수직 반복.no-repeat: 반복 없음.
4) background-position
: 배경 이미지 위치 설정.
- 기본값
0% 0%: 0 ~ 100% 사이 값- 설정값
- 방향 : top / bottom / left / right / center
- 단위 :
pxemvw...예시 )
background-position: top right;
background-position: 10px 50px;
5) background-size
: 배경 이미지 크기 설정.
- 기본값
auto: 이미지 실제 크기.- 설정값
- 단위 :
pxemvw...cover: 요소의 더 넓은 너비에 맞춰 비율 유지하며 크기 설정.contain: 요소의 더 짧은 너비에 맞춰 비율 유지하며 크기 설정.
6) background-attachment
: 배경 이미지 스크롤 특성.
- 기본값
scroll: 이미지가 요소와 함께 스크롤.- 설정값
fixed: 이미지가 뷰포트에 고정.local: 요소 내 스크롤시 이미지가 같이 스크롤.
코딩을 배우는 비전공자 코린이!