[Head First HTML with CSS & XHTML] 6. Where am I?! 레이아웃과 포지셔닝!

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

* 엘리먼트
1. 인라인 엘리먼트
 - 두 개의 인라인 엘리먼트가 옆으로 인접해 있을 때, 두 개의 왼쪽/오른쪽 마진을 더한 것 만큼의 공간이 생김

2. 블록 엘리먼트
 - 두 개의 블록 엘리먼트가 위/아래로 인접해 있을 때, 두 개의 마진중 큰 마진의 높이만큼 공간이 생김

3. 인라인 엘리먼트의 마진?
 - 인라인 엘리먼트도 마진을 가질 수 있음
 - 이미지의 경우, 마진 뿐만 아니라 테두리와 패딩도 설정할 수 있음

4. 엘리먼트 중첩
 - 바깥 엘리먼트의 내부에 중첩된 엘리먼트들의 경우, 내부 엘리먼트의 마진이 합쳐짐
 - 바깥쪽에 있는 엘리먼트가 테두리를 가지고 있고, 마진을 건드리지 않는다면 내부 엘리먼트의 마진은 합쳐지지 않음
 - 만약, 바깥쪽 엘리먼트의 테두리를 제거하면 내부 엘리먼트의 마진은 다시 합쳐짐



* 레이아웃과 포지셔닝
1. 점선 링크넣기
 - a:link { border-bottom: thin dotted #b76666; }

2. footer & sidebar
 - footer를 항상 sidebar의 밑에 위치시키고, footer위에서 오른쪽으로 떠다니는 엘리먼트(float)를 없애기 위해서는?
 - clear 옵션을 사용!
 - #footer{ clear: right; }

3. liquid & frozen -> jello 레이아웃
 - 항상 가운데로 정렬되는 레이어 설정법 : 콘텐츠 영역의 너비 고정, 마진 auto 설정
 - #main{ width: 800px; margin-left: auto; margin-right: auto; }

4. 포지셔닝
 - absolute : #sidebar{ position: absolute; }
 - static : 디폴트 포지션 속성
 - fixed : 브라우저 윈도우의 상대적인 장소에 엘리먼트를 위치시킴, 절대 움직이지 않음
 - relative : 엘리먼트를 가져가 일반적인 흐름같이 페이지에서 그것을 흐르게 함
 - position에 %값을 이용해 위치를 설정할 수 있음

5. float vs. absolute
 - absolute의 경우, float와는 달리 clear속성을 적용할 수 없기 때문에(흐르는 엘리먼트가 absolute 엘리먼트 주위를 감싸는 것이 아니라 뒤로 가려짐!) sidebar가 footer 위로 내려올 수 있음!

6. 레이아웃 정리
 - 떠있는 레이아웃 : footer에 clear 속성을 적용해 float속성을 사용(스크린 리더기 같은 다른 브라우저를 사용할 경우, sidebar가 먼저 출력될 수 있음!)

 - jello 레이아웃 : 페이지 내의 모든 컨텐츠 주위에 고정된 크기의 div태그를 적용하고, 마진을 auto로 설정할 경우 항상 가운데 정렬을 할 수 있음!

 - absolute 레이아웃 : 원하는 위치에 엘리먼트를 위치시키는 liquid 레이아웃을 가지기는 했으나, clear 속성을 사용하지 못함, 브라우저가 넓어질 때 footer가 sidebar밑으로 들어감
(이를 방지하기 위해서는 footer를 sidebar까지 확장하지 말고 메인 페이지 까지만 위치하게 여백을 설정함)

7. z-index
 - #present{ position: absolute; z-index: 99; }

8. fixed
 - #fixed_div{ position:fixed; top:100px; left:-100px; }

9. relative
 - .relative_div{ position:relative;  left:100px; }
 - 가장 가깝게 포함된 블록으로부터의 절대적인 좌표가 아니라 엘리먼트의 실제 위치로부터의 오프셋처럼 명시됨
 - 이미지를 div엘리먼트의 가장자리에 걸쳐지게 하면서 텍스트 컨텐츠를 가리지 않기를 원할 경우!

10. 유용한 디자인 소스
 - http://headfirstlabs.com/books/hfhtml/chapter12/cssdesign.html