Box Model / Sizing

html 내의 모든 요소들은 결국 css에서 박스로 표현된다.

content: 가로는 width, 세로는 height로 표현

padding: 안쪽 여백, 즉 content와 border 사이의 공간을 나타내는것

border: 테두리굵기/스타일/색상을 알려줘야 함 - border: 1px solid #000; 이런식
-> 만약 테두리를 주고싶지 않다면! border: none처리 해주면 된다
-> border-top/border-bottom 식으로 특정 부분만 처리해 줄 수도 있음.
-> border-radius: ~px 이건 테두리의 모서리를 둥글게 해 주는 역할
-> 참고로 원의 형태로 만들고 싶다면 border-radius를 50 줘버리면 된다(정사각형 기준)
-> border-top-left-radius / border-bottom-right-radius 이런식으로 특정 모서리에만 적용해 줄 수도 있음 !

margin: 바깥 여백, 요소와 요소 사이의 간격을 나타낸다
-> 마찬가지로 margin-bottom 이런식으로 박스 밑(또는 다른쪽)의 바깥 여백을 조절할 수 있음

속기형으로 적기 : top right bottom left (시계방향순)
padding: 10px 20px 30px 40px; 이렇게 한번에 쭉 네개 다 적어줄 수 있다

-> 만약 왼쪽의 여백과 오른쪽의 여백을 같에 해주고 싶다면, 오른쪽 여백만 적어줘도 왼쪽 여백이 오른쪽을 따라감.
-> 위의 여백을 밑의 여백과 같게 해주고 싶다면 위의 여백만 적어줘도 아래 여백이 위의 여백을 따라감

Box Sizing:

박스의 크기 범위를 지정하는 속성. 기본값은 content-box인데,
이렇게 되면 content박스 따로 패딩 따로..암튼 사이즈를 지정하기 복잡하고 어려워진다.
box의 width와 height을 지정할 때 직관적으로 원하는 크기대로 지정하기 위해서는
box-sizing: border-box;를 해줘야 편리한데
이는 box 크기 기준을 content, padding, border까지를 포함한 만큼으로 정하겠다는 뜻이다!(테두리 선 포함한만큼)

보통 css 맨 위에 이렇게 적고 들어가는데

* { /*전체적용 하겠다는 뜻*/
	box-sizing:border box;
}

이렇게 선언해버리고 시작하는 편이 좋을 것이다..