[CSS] width: 100%, auto 차이

width: 100% (=쓸 수 있는 만큼 다 써라)

마진, 패딩, 보더 영역 모두 포함

포함하지 않는 방법은 box-sizing: border-box;

보더, 마진에 다라 스크롤바 생길 수 있음

 

width: auto (=알아서 적당히 조절해라)

블록 요소의 초기값으로 자동 설정됨

마진, 패딩, 보더영역 포함x. 보더, 마진 값을 조절하여 스크롤바 생성 x 

 

=> box의 display 값 or 요소가 사용된 맥락에 따라 달라짐

 

display 값에 따라 달라지는 경우

- block: 기본으로 100% 니까 auto=100%

- inline-block: 자신이 가진 컨텐츠 길이만큼 auto

- inline: widht 설정이 불가능하므로 항상 100%

 

맥락에 따라 달라지는 경우

-absolute, fixed, float:  자신이 가진 컴텐츠 길이 만큼 auto로 삼음

-flexbox:center : center로 설정했을 경우 자신이 가진 컨텐츠 길이 만큼 auto로 삼는다.

 

+)

100%: 자신의 부모를 기준으로 100%해라

auto: 자신의 자식을 포함하는 최소 크기

 

+)body > div에 대해 height: 100%; 를 적용해도 화면을 꽉 채우지 않는 이유?-div의 부모인 body나 html의 height가 auto로 되어 있으므로, div는 기준을 부모인 body로 잡고, body는 기준을 div로 잡아버림. 따라서 높이를 꽉 채우려면 뷰포트 기준인 vh로 쓰면 됨