2011년 8월 16일 화요일

CSS 글꼴, 문단, 테두리, 위치 관련 스타일

------------------------ 글꼴 관련 스타일 -------------------------------
○ color : 글자색
- Navy, #FFFFCC
○ font-size : 글자크기
- 상대적으로 표현 : medium(기본 값), xx-small, x-small, small, large, x-large, xx-large
- 기준 글꼴 기준으로 표현 : smaller, larger
- 수치표현 : 20px, 20pt
- 비율 표현 : 20%, 80%
○ font-family : 글자체
- serif, cursive, fantasy, monospace, 굴림체, 돋움체, 궁서체
○ font-weight : 글자굵기
- 수치표현 : 100, 200, 300, 400(기본 값), 500, 600, 700, 800, 900
- normal(400과 같은 효과), bold, lighter(한 단계 아래), bolder(한 단계 위)
○ font-style : 글꼴모양
- normal(표준), oblique(이텔릭), italic(기울임)
○ text-decoration : 글꼴장식
- none(미지정), underline(밑줄), overline(윗줄), line_through(취소선)
○ text-transform : 대소문자 구분
- capitalize(첫 글자 대문자), lowercase(모두 소문자), uppercase(모두 대문자)
○ font-variant : 소문자크기
- small-caps
○ font-stretch : 글자폭
- condensed(좁게), expended(넓게)
------------------------------------------------------------------------

------------------------ 문단 관련 스타일 ------------------------
○ text-align : 수평 정렬
- left, center, right, justify(양쪽정렬)
○ vertical-align : 수평 정렬
- baseline, top, middle, bottom, text-top, text-bottom,super, sub, 실수 값+단위, %
○ line-height : 행간
- 실수 값+단위, %
○ letter-spacing : 자간
- 실수값+단위 %
○ word-spacing : 단어와 단어 사이의 간격
- 실수 값+단위%
○ text-indent : 들여쓰기
- 실수 값+단위%
○ while-space : 공백, 탭, 줄 바꾸기에 대한 처리
- normal(자동 개행), pre
태그효과, nowrap(자동 개행 안 함)
------------------------------------------------------------------------

------------------------ 테두리 관련 스타일 ------------------------
○ width : 넓이
- 실수 값+단이, %, auto
○ height : 높이
- 실수 값+단이, %, auto
○ margin : 바깥쪽 여백
- 실수 값+단위
○ padding : 안쪽 여백
- 실수 값+단위
○ border : 테두리 두께
- (border:테두리두께 테두리스타일 테두리색) 형식으로 표현
------------------------------------------------------------

------------------------ 위치 관련 스타일 ------------------------
○ position : 표시 방법
- static(기본 값, 지정 안함), relative(상대 값배치), absoulte(절대 값 배치), fixed(고정)
○ top : 시작점의 수직(y)좌표
- 실수 값+단위, %
○ bottom : 끝점의 수직(y)좌표
- 실수 값+단위, %
○ left : 시작점의 수령(x) 좌표
- 실수 값+단위, %
○ right : 끝점의 수령(x) 좌표
- 실수 값+단위, %
○ float : 그림이나 문단 정렬
- none, left, right

------------------------------------------------------------