📌 width:100% vs width: auto
✔ 공통점
컨테이닝 블럭(자신의 부모)을 기준으로 꽉 참
✔ 차이점
width: auto는 컨테이닝 블럭의 width값에 고정되어 알아서 padding과 margin이 적용되어 전체 크기에 변화가 없다. 반면에 width: 100%는 크기를 유연하게 조절할 수 있어 반응형 웹에 유용하며, 만약 padding 값이 적용되면 알파가 되면서 전체 크기가 커져 버린다.
📌 블럭레벨요소와 width
div처럼 블럭레벨요소가 width가 지정되면서 생기는 빈 공간은 div가 '사용 가능 공간'이다. (padding, margin 등)
📌 position: absolute;
✔ 인라인처럼 보이지만 블럭 레벨 요소임, 사용공간이 자기 크기만큼 줄어들게 됨(normal-flow가 아니면 블럭레벨이 된다~)
✔ top: 0; left:0; right:0; bottom:0;
사용공간이 좌우, 상하로 쭉쭉 늘어남(컨테이닝 블럭크기만큼)
단축속성 --> inset: 상/우/하/좌
✔ 부모에 position 설정이 없다면 뷰포트가 없다면 뷰포트 기준으로, 부모 positondl static(초기값)이 아니라면 부모 기준으로 움직이게 됨
📌 negative position (margin의 -px)
✔ 실제 보이는 것과 차지하는 공간을 다르게 가져간다.
✔ maring-left:-50px
시작점이 뒤로 밀림
✔ maring-right:-50px
시작점이 뒤로 밀림
✔ maring-right:-50px; margin-left:-50px
