마치영화처럼

CSS 속성

font 속성

font-family -  글꼴을 설정합니다
font-size:- 글꼴의 크기
font-style - 글꼴의 스타일
font-weight -글꼴의 두꼐
font-variant - 글꼴의 소문자를 대문자로 지정
font-spacing - 글자사이의 간격을 지정
font-height - 줄간격을 지정
color - 글꼴의 색상 지정

font-size 속성

IN - 글자크기를 인지 단위로 표시
CM- 글자크기를 센티미터 표시
MM - 글자크기 밀리미터 단위로 표시
PT -글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위
PC - 글자크기를 파이카 단위로 표시 1파이카는 12포인트
madium - 글자크기를 약12포인트정도의 크기로 표시
small - 글자크기를 madium로 1.5배 작은 크기로 표시
x-small - 글자크기를 madium로 3배 작은 크기로 표시
xx-small - 글자크기를 madium로 4.5배 작은 크기로 표시
larage - 글자크기를 madium로 1.5배큰 크기로 표시
x-larage - 글자크기를 madium로 3배큰 크기로 표시
xx-larage - 글자크기를 madium로 4.5배큰 크기로 표시

em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정
ex - 기준 글꼴 문자의 영문 소문자 높이르 기준으로 글꼴 크기 지정
% - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정
px - 글꼴의 크기를 픽셀 단위로 표시
larger - 기준 글꼴보다 크게 표시
smaller - 기준 글꼴보다 작게 표시

font-style 속성
normal - 아무런 효과를 주지 않음
itailc - 글자를 이텔릭 체로 표시
oblique - 글자에 기울림 속성

font-variant 속성
normal - 아무런 효과를 주지않음
small-caps - 소문자를 대문자로 바꾸는 표시

font-weight속성
normal - 아무런 효과를 주지않음
bold - 글자에 html의 <b>태그를 준것과 같은 두꼐로 굵게표시
bolder - 글자를 조금 더 굵게 표시
lighter - 글자를 조금 더 얇게 표시
100-900 - 100(아주얇게)부터 900(아주두껍게)사이의 숫자를 100단위로 지정할수 있다

lettr-spacing 속성
글자와 글자사이의 간격을 조정
H2 {lettr-spacing:170%}

line-height속성
줄간격을 설정
body {line-height:170%}

color속성
글자색상지정
body{ color:darkgray;}
h2 {color:#ffa500;}

문단모양 바꾸기
text-align - 문단의 정렬방식을 지정
text-decoration - 글꼴의 선을 긋습니다
text-indent - 문장의 들여쓰기
vertical-align - 문단의 수직 정렬 방식을 지정

CSS 테두리 제어하기
테두리종류
border-style 전체 테두리 모양지정
border-top-style - 위쪽 테두리 모양을 지정
border-bottom-style - 아래쪽의 테두리 모양을 지정
border-left-style 왼쪽의 테두리의 모양을 지정
border-right-style -오른쪽 테두리의 모양을 지정

none - 테두리를 보이지 않음
dotted - 테두리 점선 표시
dashed - 테두리를 좀 더 긴 점선으로 표시
solid - 테두리를 직선으로 표시
doubole - 테두리 이중 실선 표시
groove - 테두리를 오목한 실선으로 표시
ridge- 테두리 볼록한 실선으로 표시
inset - 테두리를 내용이 오목한 모양으로 표시
outset - 테두리를 내용이 볼록한 모양으로 표시

테두리 색상지정
border-color -전체 테두리의 색상지정
border-top-color -위쪽 테두리의 색상지정
border-bottom-color -아래쪽의 테두리 색상지정
border-left-color -왼쪽의 테두리 색상지정
border-right-color -오른쪽의 테두리 색상지정

테두리 두꼐 지정
border-width - 전체 테두리의 두꼐를 지정
border-top-width - 위쪽 테두리 두꼐 지정
border-bottom-width -아래쪽 테두리 두꼐지정
border-left-width - 왼쪽 테두리 두꼐 지정
border-right-width - 오른쪽의 테두리 두꼐를 지정

margin 속성
margin - 모든 방향의 여백을 지정
margin-top - 위쪽의 여백 지정
margin-bottom - 아래쪽 여백 지정
margin-left - 왼쪽여백 지정
margin-right - 오른쪽여백 지정

padding 속성
padding-top - 위쪽의 여백 지정
padding-bottom - 아래쪽 여백 지정
padding-left - 왼쪽여백 지정
padding-right - 오른쪽여백 지정