CSS 속성 정리 *유지보수중

HTML 태그의 배경색 설정

body { background-color : mistyrose; }

 

글자색 설정

h3 { color : purple; }

 

HTML태그의 테두리 설정

hr { border : 5px solid yellowgreen; }

 

HTML태그의 테두리 색

div { border-color : #6B8E23; }

 

폰트 사이즈 설정

span { color : blue; font-size : 20px; }

 

텍스트 들여쓰기

text-indent : <length>|<percentage>

.p1 { text-indent : 3em } // 3글자 들여쓰기

 

텍스트 정렬

text-align : left | right | center | justify (양쪽정렬)

.p1 { text-align : justify; }

 

텍스트 꾸미기

text-decoration : none | underline | overline (윗줄) | line-through (중간줄)

span { text-decoration : line-through; }

 

폰트 크기

font-size : 40px // 40픽셀 크기

font-size : medium // 중간크기. 크기는 브라우저마다 다름

font-size : 1.6em // 현재 폰트의 1.6배 크기

 

폰트 스타일

font-style : italic // 이탤릭 스타일로 지정

 

폰트 굵기

font-weight : 300; // 100~900범위

font-weight : bold; // 굵게, 700크기

 

 

CSS3 표준단위

단위	의미	사용 예
em	배수	font-size : 3em; /* 현재 폰트의 3배 크기 */
%	퍼센트	font-size : 500%; /* 현재 폰트의 500% 크기 */
px	픽셀 수	font-size : 10px; /* 10픽셀 크기 */
cm	센티미터	margin-left : 5cm; /* 왼쪽 여백 5cm */
mm	밀리미터	margin-left : 10mm; /* 왼쪽 여백 10mm */
in	인치, 1in = 2.54cm = 96px	margin-left : 2in; /* 왼쪽 여백 2인치 */
pt	포인터, 1pt = 1in의 1/72크기	margin-left : 20pt; /* 왼쪽 여백 20포인트 */
pc	피카소(picas). 1pc = 12pt	font-size : 1pc; /* 1pc 크기의 폰트 */
deg	각도	transform : rotate(20deg); /* 시계 방향으로 20도 회전 */