[CSS] 웹사이트의 레이아웃

✔ 박스 모델

- 요소를 감싸는 큰 세가지 축을 의미 (박스처럼 감싸고 있는 형태)

 

- content : 요소

- padding : content와 border 사이의 공백 => border 안

- border : 경계

- margin : content의 가장 바깥 공백 => border 밖

 

✔ margin과 padding의 차이

- 여백을 만드는 공간 비교

 

- margin-left

    - border 바깥쪽에서 왼쪽에 여백을 만듦

- padding-left

    - border 안쪽에서 왼쪽에 여백을 만듦

    - 공간이 여백을 포함한 크기로 변경되는 점 유의

 

✔ margin과 padding 작성 방법

- top right bottom left 순서로 한 줄에 작성 가능