css 심화

1. Float

- 뜨다라는 의미

- 자식요소의 width 값 자체가 바뀌는게 아니라, 부모요소의 width 값 만큼 margin이 생기는 것

- margin을 없애버린다.

float 1과 float 2를 좌우로 붙여주기 위해서는?

div.pink, div.blue {
    float: left;
    }

 결과화면

2. clear

나오게 된 배경 : 페이지 Layout 짜다 보면 꼭 생기는 콘텐츠 범람 현상

- float로 없어진 margin 영역에 대응  

- float로 없어진 margin 영역을 무시하고 올라가지 않도록 처리

 

Clearfix : clear라는 속성으로 Layout을 바로잡는 기법

 

Clearfix 기법을 콘텐츠가 범람하는 <header> 에 적용하려면?

header::after {
	content: " ";
    display: block;
    clear: both;
    }

결과화면

3. Flex

- 가로배치를 해결

 

Flex 이전의 가로배치

Flexbox의 작동 원리

• flex container {display:flex;} 를 선언한 부모 요소.
• flex item flex container의 자식 요소. (배치를 원하는 요소)
• main axix 가로(row)배치의 주축; 세로(column)의 보조축
• cross axis 세로(column배치의 주축; 가로(row) 배치의 보조축

※ 부모 요소에 {justify-content: space-between;}을 추가한다면?

4. Position

static: 모든 요소의 디폴트 값 생성된 원래 위치

relative: 원래 위치를 기준으로 요소를 움직일 때 사용

absolute: position이 static이 아닌 가장 가까운 부모를 기준으로 함

fixed: 브라우저 창을 기준으로 고정된 위치

sticky: 스크롤로 특정위치에 도달하면 고정

5. Grid

- 페이지 레이아웃의 가이드 라인