font-family : 글꼴지정 속성
font-size : 글자 크기
font-style : 글자 스타일(normal, italic, oblique)
font-variant : 소문자를 작은 대문자로 변경(normal, small-caps)
font-weight : 글자 굵기(normal, bold, bolder, lighter, 100~900)
line-height : 행간 지정
color : 글자색
font : font에 관한 속성을 한꺼번에 지정
ex) font: 12px/1.5em bold sans-serif
TEXT
text-align : 정렬 방식(left, right, justify)
text-decoration : 텍스트의 장식(none, underline, overline, line-through, blink)
text-indent : 들여쓰기
text-transform : 대문자화(capitalize, uppercase, lowercase, none)
white-space : 문자사이 공백(normal, pre, nowrap)
vertical-align : 수직정렬(baseline, sub, super, top, text-top, middle, bottom, text-bottom)
letter-spacing : 글자간격
word-spacing : 단어간격
line-height : 줄간격
사용자 인터페이스
CURSOR
커서모양 변경(auto, crosshair, default, pointer, move, e-resize, ne-resize 등등)
CLASSIFICATION
<ol>,<ul>만으로 할 수 없는 글머리 기호의 위치 지정, 글머리 기호대신 이미지를 삽입
List-style-type : 글머리 번호, 기호의 형태를 지정
List-style-image : 글머리 번호, 기호에 이미지를 넣는 속성
예) ul {
list-style-image : url("/images/flower.png");
}
List-style-position : 글머리 번호, 기호의 문장에서의 위치를 지정
List-style : list에 관한 속성을 한꺼번에 지정
DISPLAY
화면에 보이기, 보이지 않기
Inline <--> Block으로 속성을 변경(레이아웃에서 상당히 중요한 역할)
inline : 인라인화
block : 블럭화
list-item : 목록화
table-header-group / table-footer-group : 컴퓨터 모니터상에서 출력할 목적으로 만든 속성이 아니라 한페이지가 넘는 여러페이지 분량의 Table을 프린터로 출력할때 매 페이지마다 테이블 머리말과 코리말을 넣어주기 위해 사용
none : 감추기(block:보이기)
BACKGROUND
background-color : 문서의 배경색을 지정(컬러색, transparent)
background-image : 문서의 배경을 이미지로 지정(none, url("파일경로"))
background-attachment : 배경이미지를 고정시키거나 scroll시킴(scroll, fixed)
background-repeat : 지정한 배경그림을 반복, 또는 반복을 없앰
background-position : 배경으로 지정한 그림의 시작지점을 지정(백분율, 길이값, 수평값, 수직값)
background : background에 관한 속성을 한꺼번에 지정(순서 X)
BOX MODEL옆에 나와있는 그림을 보면서 BOX에 관한 padding과 margin을 잘 구별해야 한다. 어려운 내용은 아니지만 실제로 레이아웃 디자인에 있어서 까다로운 부분이다.
마진과 패딩 모두 네 방향(top, right, bottom, left)을 가진다.
POSITIONING
포지셔닝 또한 시각적인 측면(레이아웃)에 있어 중요한 요소이다.
width, height : Box의 width와 height를 지정
position : 위치지정(static, realative, absolute 등)
- static : 기본값
- relative : top, left를 설정하여 박스 위치 지정
- absolute : 상위 박스의 top, left, right, bottom을 지정
- fixed : 항상 화면상의 지정된 위치 지정
top, right, bottom, left : 박스안에서 박스 위치 지정
overflow : content의 내용이 box를 넘었을 때 처리방법 지정(visible, hidden, scroll, auto)
float : 해당 박스를 고정시키고 다음 박스를 해당 박스 주변에 배열(left, right, none)
- left : 그림이나 box가 왼쪽에 배치되고 글씨는 box의 오른쪽으로 흐름
- right : 그림이나 box가 오른쪽에 배치되고 글씨는 box의 왼쪽으로 흐름
- none : 그림이나 box가 왼쪽으로 배치되고 글씨는 첫 줄만 box의 오른쪽으로 흐름
clear : float의 흐름을 멈춤(none, left, right, both)
clip : box를 지정하는 수치만큼 가려서 안보이도록 해주는 속성(auto, rect)
visibility : 객체를 보이게하거나 보이지 않게 하는 속성(visible, hidden)
z-index : 박스위에 박스를 얹음
