📌 box 모델

html 코드는 네모난 상자를 기준으로 그려진다. (모든태그 포함 ex)h1, span, div)
margin: 상자 바깥쪽 여백
border: 테두리
padding: 상자 안쪽 여백
content : 상자안의 내용

📍 border

width 속성 (max-width, min-width) 텍스트
가로길이를 설정하는 속성
height 속성 (max-height, min-height)
세로길이를 설정하는 속성

(가로길이, 세로길이를 설정하지 않으면 ??)

📍In-line vs Block

in-line 의 경우에는 가로길이, 세로길이 내용물의 크기,
inline 의 경우 가로길이, 세로길이를 설정한다고 하더라도
내용물의 크기만큼만 차지하게 된다

: 가로 세로길이를 설정할수 없고, 다음요소가 옆에 붙어서 나온다.

(ex. span tag)

block 의 경우에는 가로길이는 전체가로길이, 세로길이 내용물의 크기,
block 태그의 경우 가로길이를 설정한다고 하더라도 나머지 부분은
마진으로 설정이 되기 때문에 결과적으로 가로길이 통채를 차지하게 된다. 따라서 다음 요소는 아래쪽에 붙어있게 된다.

** 세로길이,가로길이 설정 가능**
    width, height

:가로 세로길이는 설정할수 있으나 요소가 다음 줄에 나오게 된다
(ex. div tag)

📍 Inline-block

inline의 성질( 다음 요소가 옆에 나온다)과
block의 성질(가로 세로길이를 설정할수있다)을
모두 갖춘 형태

📍 display 속성

inline :인라인 요소로 보여줘 (가로세로 길이 없는데, 옆에 요소가 붙게 할래)
block : 블록요소로 보여줘 (가로세로길이가 있게 만들고, 옆에 요소가 붙지않게 할래)
inline-block :가로세로 주고, 요소가 옆에 붙게할래
none : 화면상에 안보이게 해줘

📍 가로 세로의 기준?

box-sizing -기본으로는 content-box로 설정되어있음.
(content-box) : 기본은 내용물의 가로길이 세로길이
(border-box) : 테두리를 기준으로 가로길이 세로길이 설정