[CSS] box model, box sizing, display

box model

content , padding, border, margin으로 이루어져있다.
content : width(가로), height(세로)
padding : content 와 border 사이의 공간을 나타낸다.
border : 테두리. 굵기, 스타일, 색상 세 property를 명시해야함 border : 1px solid #000; 혹은 테두리를 없앨 때 border : none;
- border-radius : 50%
- border-top-left-radius : 10px;
- outline : border와 유사해보이지만 box 내부에서 영역을 차지하지 않고 border 영역 밖에 있는 라인이다. button, input, textarea 가 focus 혹은 active 될때 주로 보인다. 원하지 않을때에는 outline: none; 을 설정한다.
1 2 3 4 5 6 7 8 button:active, button:focus, input:active, input:focus, textarea:active, textarea:focus { outline: none; }
margin : 요소와 요소 사이의 간격을 나타낸다.
개발자 도구 > Elements> computed 에서 확인 가능
shorthand style : top - right - bottom - left
- top & bottom, right & left는 세트라고 생각하면 된다.
- margin top & bottom : 20px, right & left: 40px -> margin: 20px 40px

box sizing : border-box; margin, padding으로 따로 설정된 사이즈를 포함 실제 화면에 노출되는 사이즈를 component width, height으로 한계를 지어준다.
content-box : default value가 content-box 로 설정되어있다. component width, height에 margin, padding값을 더해 화면에 보여준다.
css를 구현할 때 전체 선택자로 border-box 설정을 해주기도 한다.

  
* {
  box-sizing: border-box;
  margin: 0;
}

//margin 을 0으로 설정하면 각기 다른 요소들의 default margin을 고려하지 않아도 되서 편하다.

같은 행에 다른 component가 못 들어오게 막는다. 따로 width를 선언하지 않은 경우 width = 부모 contentbox의 width. width를 선언하고 그 길이가 부모 contentbox의 width보다 작다면 남은 공간은 margin으로 채운다.
margin : 0 auto;를하면 가운데 정렬되는 이유가 이것이다. margin-left :auto, margin-right:auto 로 빈 공간을 왼쪽 오른쪽 반반씩 나누기 때문에 content가 가운데로 정렬된다.
child의 height을 설정하고 parent의 height을 따로 설정하지 않는다면 child height의 총합 = parent의 height

같은 행에 다른 component가 들어오도록 한다. 행에 공간이 부족하다면 다음 행에서 보여준다.
span, a, strong 기본 display가 inline이다.
width, heigth, padding(top & bottom), border(top & bottom), margin(to & bottom) 사용 불가. 영역으로 취급을 안해주고 덮어씌우는 것과 같은 모양을 보여줌. inline의 구현 목적에 어긋나기 때문에 사용하지 않는 것을 추천함
padding, border, margin이 적용되지 않는다 싶으면 꼭 display가 inline인지 확인하기!!
img tag는 inline이지만 display를 바꾸지 않아도 예외적으로 사이즈를 변형할 수 있다. css display inline 참조 display : block;을 적어서 display 상태를 명시해주는 것이 좋다. </strong>

💡 display:none; 인 요소는 display : block;으로 화면에 노출시킬 수 있다.