[Head First HTML with CSS & XHTML] 5. Web2.0 스타일의 대표주자! Div & Span

* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

* Div & Span 엘리먼트
1. width 속성과 너비
 - width 속성은 오직 콘텐츠 영역의 너비만 명시
 - 왼쪽 마진의 너비 + 테두리 너비 + 왼쪽 패딩의 너비 + 콘텐츠 영역의 너비(width) + 오른쪽 패딩의 너비 + 테두리 너비 + 오른쪽 마진의 너비

2. 속성 상속
 - 특정한 엘리먼트로부터 전해 내려온 엘리먼트만을 선택하기 윈하는 원할 때 상속을 사용
 - div h2{ color: black;}
 - 부모 엘리먼트(div)와 자손 엘리먼트(h2) 사이에는 공백으로 분리
 - #MF h2{ color: black;}
 - id가 MF인 부모 엘리먼트와 자손 엘리먼트 h2의 상속관계
 - #MF blockquote h2{ color: black;} 와 같은 방식으로 더 많은 자손을 둘 수도 있음
 - 직계 상속 : #MF > h2와 같이 ">"를 사용해 MF라는 id를 가진 엘리먼트의 직계 자식만 선택할 수 있음

3. 속성 줄여쓰기
 - padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px;
 - padding: 0px 20px 30px 10px;

 - margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px;
 - margin: 0px 20px 30px 10px;

 - padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;
 - padding: 20px;

 - margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px;
 - margin: 0px 20px;

 - border-width: thin; border-style: solid; border-color: #007e7e;
 - border: thin solid #007e7e;
 - border의 경우 마진이나 패딩보다 훨씬 유연해서 원하는 순서대로 명시할 수 있음
 - border: solid thin; border: #007e7e solid; border: solid; 모두 가능

 - background-color: white; background-image: url(images/logo.gif); background-repeat: repeat-x;
 - background: white url(images/logo.gif) repeat-x;

 - font: font-style font-variant font-weight font-size/line-height font-family;
 - 위 형식 중 "font-style font-variant font-weight"는 반드시 font-size 앞에 와야함
 - font-size: small; font-family: Verdana, Helvetica, Arial, snas-serif; line-height: 1.6em;
 - font: small/1.6em Verdana, Helvetica, Arial, snas-serif;

4. 줄간격 속성
 - line-height : normal
 - 브라우저가 line-height를 위해 적당한 크기를 선택하도록 허용하며, 이는 폰트에 근거를 둔 크기임

5. font 속성
 - font-style: italic;
 - font-weight: bold;

6. span 엘리먼트의 너비 속성
 - span과 같은 인라인 엘리먼트의 모든 방향에 마진을 추가해도 왼쪽과 오른쪽에만 마진이 적용됨
 - 인라인 엘리먼트의 위 아래에 패딩을 추가할 경우, (패딩이 주위에 있는 다른 인라인 엘리먼트의 공간에 영향을 주지 않기 때문에) 다른 인라인 엘리먼트와 겹쳐지게 됨

7. pseudo-class(의사-클래스)
 - a:link { color: green; }
 - a:visited { color: red; }
 - a:hover { color: yellow; }

 - #MF a:hover { background: #f88396; color: #0d5353 }
 - 마우스를 링크위로 올릴 때 배경색을 변경하는 의사-클래스



* 캐스케이드(여러 스타일시트 중에서 어떤 스타일을 사용할 지 브라우자가 결정하는 방법)
1. 1단계 : 모든 스타일시트를 하나로 모은다.

2. 2단계 : 일치하는 모든 선언을 찾는다.
 - 브라우저 : h1{ color: black; }
 - 저자 : h1{ color: #efefef; }, h1.blueberry{ color:blue }
 - 독자 : body h1{ color: #cccccc; }

3. 3단계 : 일치하는 스타일들을 저자, 독자, 브라우저 순으로 정렬한다.
 - 저자 : h1{ color: #efefef; }, h1.blueberry{ color:blue }
 - 독자 : body h1{ color: #cccccc; }
 - 브라우저 : h1{ color: black; }

4. 4단계 : 특별성 점수를 계산하고, 각 그룹별로 점수에 따라 정렬한다.
(특별성 점수는 "선택자가 id가 있는가", "클래스(의사-클래스)가 있는가", "엘리먼트의 이름이 있는가"라는 3가지의 판단기준을 갖는데 각 조건에 맞을 때마다 해당위치의 값을 1씩 증가시킴)
 - 저자 : h1{ color: #efefef; } : 001(엘리먼트 이름만 존재)
 - 저자 : h1.blueberry{ color:blue } : 011(클래스와 엘리먼트 이름이 존재)
 - 독자 : body h1{ color: #cccccc; } : 002(엘리먼트 이름이 두 개 존재)
 - 브라우저 : h1{ color: black; } : 001(엘리먼트 이름이 한 개 존재)
 - 저자의 001, 011의 순서를 변경!

5. 5단계 : 개별적인 스타일 시트에 나타난 순서에서 충돌하는 규칙들을 정렬한다.
 - h1.blueberry{ color:blue }
 - h1{ color: #efefef; }
 - body h1{ color: #cccccc; }
 - h1{ color: black; }
 - 만약, 011의 스타일이 두 개가 있다면 가장 마지막에 보이는 규칙을 적용!

6. 요약
 - 처음에는 저자, 독자, 브라우저로 정렬
 - 그 정렬된 것들을 각각의 특별성 점수에 따라 다시 정렬
 - 같은 특별성 점수의 스타일은 스타일 시트 순서에 따라 정렬