[ Font 관련 스타일]
- font "값들만“ : 대표속성- font-family : 글꼴, 글꼴 이름은 쉼표(,)로 구분, 글꼴 이름이 두 단어 이상이면 큰 따옴표로 묶는다. 브라우저는 앞에 있는 글꼴 부터 보여준다.- font-style "normal, italic, oblique" : 기울임꼴을 적용- font-variant "normal, small-caps" :small-caps 크기가 작은 대문자- font-weight "normal, bold, 100~900" : 글자 굵기normal=400, bold=700, 숫자는 인식 못하는 경우 있음- font-size "숫자em(상위 element 크기에 배수), 숫자pt" : 글자 크기 유전되지 않음 [Text 관련 스타일]- line-height "normal, 숫자, 숫자em, %“ : 줄간격- text-indent "숫자em, 퍼센트, 숫자“ : 들여쓰기, 음수사용시 내어쓰기- text-align "left, right, center, justify" : 텍스트나 이미지 수평정렬- text-decoration “none, underline, overline, line-through" : 줄 긋기 유전되지 않음- letter-spacing "normal, 숫자em, 숫자“ : 글자 간격- text-transform "capitalize, uppercase, lowercase, none" : 영문자 변환 첫글자만 대문자 소문자․ vertical-align "baseline, sup, sub, middle, text-top, - top, text-bottom, bottom" :텍스트나 이미지 수직정렬
[색상과 배경에 관련된 스타일]
- color "영문자, RGB“ : 글자 및 밑줄 색
- background-color "영문자, RGB, transparent" : 배경색
- background-image "none, url(파일위치)“ : 배경 그림
- background-repeat "repeat, repeat-x, repeat-y, no-repeat" : 배경이미지 반복 여부
- background-attachment "scroll, fixed" : 화면이 스크롤 될 때 이동여부
- background-position "top, bottom, left, center, right, 가로% 세로%“ : 이미지 반복 여부 가로p 세로p(음수 사용됨)
margin: 요소의 테두를 기준으로 바깥쪽 여백
margin: 0 0; 마진의 세로값 가로값
margin:0 0 0; 위 좌우 아래
margin: 0 0 0 0; top right bottom left
margin-top, margin-right, margin-bottom, margin-left 하나하나 마진을 적용할때
*****두개요소의 마진값이 중복이 될때 큰값이 적용됨.
padding:요소의 테두를 기준으로 안쪽 여백
padding: 0 0; 패딩의 세로값 가로값
padding:0 0 0; 위 좌우 아래
padding: 0 0 0 0; top right bottom left
padding-top, padding-right, padding-bottom, padding-left 하나하나 패딩을 적용할때
*****패딩은 안쪽 여백이므로 값이 요소의 가로값, 세로값에서 벗어나면 요소가 크기가 변화됨