[DAY10-2]_개발일지: float, z-index

0. 목차

1. left, right
2. clear
3. z-index
4. 실습:2단 레이아웃

---

1. left, right

목차로 돌아갓!

• body 라는 부모 클래스를 기준으로 left, right 자식 클래스의 배치가 왼쪽 또는 오른쪽으로 배치가 되게 하는 것을 float 라고 한다.
• 스타일 상에서 먼저 float 적용되는 순으로 제일 끝에 배치된다!
• overflow 는 콘텐츠 안에 내용이 튀어나온 것을 생략하여 정리하는 것. (하지만 뒤에 내용이 보고 싶을 수 있기 때문에, overflow-y : scroll 을 써서 정리하는 것도 방법이다.

2. clear

목차로 돌아갓!

• float를 사용하면, float 프로퍼티를 정리하는 것이 예의(?) 라고 할 수 있다.
  (배치 스타일이 흐트러질 수 있기 때문에, 정리하는 거라고 한다)

• 보통 저렇게 clearfix 클래스 구간을 만들어서 clear:both 하곤 하지만, 가상 선택자(::after)를 사용하여 float를 정리하는 경우도 있다.

3. z-index

목차로 돌아갓!

• z-index 는 숫자가 높을수록, 화면에 보여지는 우선순위가 높아져서 맨 앞으로 나온다고 생각하면 된다.
• 해당 화면은 position:absolute 로 둘 다 적용되어 있기 때문에, 브라우저 기준으로 배치가 된다. 그래서 겹쳐서 보이는 것이다. 이를 z-index를 설정하여 고르게 보여지게 할 수 있다.

---

4. 2단 레이아웃

목차로 돌아갓!

• 먼저 모든 클래스를 가운데로 배치할 수 있게, margin: 0 auto.
• body 태그를 기준으로 주변 여백이 없게 padding: 0. ( * { margin + 0 auto; padding : 0; 이 합리적임 )
• header와 footer는 float 적용 안해도 됨
• 사이드바1과 본문은 float:left;, 사이드바2는 float:right;
• 사이드바2 끝나고 .clearfix 클래스를 통해서 clear:both; 처리하기!