[css] width auto와 width %의 차이 정리

width auto

See the Pen css auto and % by Taejin Kim (@kimtaejin3) on CodePen.

위에서 block element를 하나 만들어 주고 안에 글자까지 채워 놓았다. body의 containg box만큼 가득찬 것을 확인할 수 있다

 

width 프로퍼티의 기본값이 auto이기 때문이고 width: auto의 의미는 부모의 containg box만큼의 영역을 다 채운다는 의미이다.

 

See the Pen auto and %02 by Taejin Kim (@kimtaejin3) on CodePen.

auto의 신기한 점은 위와같이 margin-left를 주면, margin 을 적용함과 동시에 부모영역을 벗어나지 않고 꽉채운다.

 

그렇다면 %는 어떨까?

 

See the Pen auto and %03 by Taejin Kim (@kimtaejin3) on CodePen.

width: auto와 동일해 보인다. 그렇다면 div selector에  margin-left를 추가해보자

그러면 부모의 영역을 벗어나는 것을 확인할 수 있다.

 

이는 %는 부모의 width 크기를 px값으로 받아오기 때문이다. auto처럼 유동적이지 않다는 것이다. 

%는 부모의 절반크기의 너비를 갖게 할 때 width: 50%를 쓰는 등 부모의 크기에 맞춰서 변화하는 요소에 필요할 것이다