Box Model

1. box model 구성요소

content < padding < border < margin < position

2. 여백 설정 (padding , margin 동일)

padding:00px 00px; 상=하 , 좌=우
padding: 00px; 4면이 모두 동일
margin-left:auto;  margin-right: auto; 좌우 간격 자동 맞춤

3. 사이즈 지정 (content)

- `width / height`
- `min/max-width/height`
- `overflow: 00000`		//내용이 넘치는 경우 기능
    - `visible;`  
    - `hidden;`
    - `scroll;`  	scroll은 내용이 넘치지 않아도 스크롤이 표시됨
    - `auto;`  

4. box-sizing

`content-box;` 기본값 → `border-box;`

5. backgroud

- `background-repat:`
    
    `no-repeat; repeat-x; repeat-y;`
    
    `repeat;` 가로 세로 모두 반복
    
    `space;` 모두 반복 후 남는 공간은 이미지간 여백으로 배분
    
    `round;` 모두 반복 후 남는 공간은 이미지 확대를 통해 배분
    
- backgroud-size:
    
    `auto;` `cover;` `30px 50px;`
    
    `contain;`  가로 세로중 먼저 채워지는 쪽에 맞추어 출력;
    
- background-position:
    
    이미지의 중심을 지정하는 명령어
    
    화면비율을 줄여 이미지가 잘릴때 어느지점을 중심으로 남느냐를 결정함
    

6. 포지셔닝

- `static` 포지셔닝이 되지 않은 기본값
- `relative` 원래 위치 기준
- `fixed` 브라우저 윈도우가 기준
- `absolute` 가장 가까운 포지셔닝된 상위 요소가 기준 (static은 제외)

7. float

float / clear

8. 반응형 웹

`@media (min-width 770px){` 웹페이지 너비가 770이 넘어가면

`div{` div전체에 해당 내용 적용

`}`

`#div1{`

`}`

`h1{font-size: 50px}` h1의 폰트 사이즈를 50px 로 변경해라.

`}`