선택자순위, 단위, 기타 css

출처 : 웹표준 핵심 가이드 북

선택자들의 우선 순위

선택자	사용 예시	개별성
Type 선택자	p , div , table 등등	1
Class 선택자	.wrap	10
Id 선택자	#gnb	100
Inline 선택자	style="color:red;"	1000
가상 요소	:first-child, :before, :after	1
가상 class	:link, :visited, :hover, :focus	10

CSS 단위

절대 단위	상대 단위
pt, cm, mm, pc, in	px, ex, em, %

기타 

ㅇ IE에서 호환 모드 Quirks Mode 에서 렌더링이 될 경우 padding 속성에 지정된 값을 width에 포함시켜 계산하기 때문에 의도한 것보다 박스가 작게 출력될 수가 있다.

ㅇ 마진 겹침 현상 margin collapsing : 위쪽 마진과 아래족 마친이 겹칠 경우 두개의 마친값 중에서 큰 값으로 적용한다.

ㅇ font-weight : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600 ,700 ,800, 900

ㅇ font : [ font-weight | font-style | font-variant ] | [ font-size ] | [ /line-height ] | [font-family ]

ㅇ text-transform : none, uppercase, lowercase, capitalize

ㅇ letter-spacing :  (글자 간격 조정)

ㅇ background-attachment : scroll, fixed, inherit (배경 이미지를 항상 같은 위치에 고정시키는지의 여부)

ㅇ background : background-color | background-image | background-repeat | background-position | background-attachment | inherit

ㅇ list-style-type : 목록의 앞의 아이콘 형태 정함

ㅇ list-style-position : 목록 앞 아이콘 자리

ㅇ list-style-image : 목록 앞의 아이콘을 이미지로

ㅇ border-collapse : separate , collapse, inherit  (separate는 테이블 border가 2줄 나오는거, collapse는 1줄만 나오는것)

ㅇ overflow : visible, hidden, scroll, auto (scroll은 칸을 벗어나든 상관없이 스크롤바가 생성, auto는 넘어갈때만 생성)

ㅇ display : none 의 경우에 스크린 리더기에 따라서 display none을 사용한 컨텐츠를 읽거나 무시하곤한다. 따라서 적절히 생각해가면서 써야한다.

ㅇ display : block 을 하면 block요소로, inline으로 하면 inline요소로 처리된다.

ㅇ visibility : hidden 은 display none 과는 달리 아예 없는것처럼 선언하는 것이 아니라 화면에서만 보이지 않게 투명하게 되며 그 영역이 확보된다는 점이 차이점이다.

ㅇ z-index : 숫자가 커질수록 가장 위쪽에, 작은수록 아래쪽에 겹쳐진다. 

reset.css : HTML 기본 속성값을 초기화해주는 역할, 모든 페이지에 적용

base.css : 웹사이트 전체에 적용되는 기본설정값, 기본 글꼴, 배경, 제목 요소등 스타일 가이드에 맞추어 만들어서 웹사이트 컨텐츠에 통일성 부여 (common.css로 하기도함)

layout.css : 웹사이트 레이아웃용

reset.css ( meyerweb 에서 가져옴)

보통 

* {margin:0; padding:0 } 이렇게 주는 경우가 많은데 이렇게 주면 쓸데 없는 부분에 대해서도 다 적용이 되어버려서 느려질수가 있다고 함.

딱히... 그럴까 싶긴한데 책에서 그렇다고 하니깐..

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}