[css 기초] width: auto 와 width: 100% 차이

얼핏보면 서로 같은 기능을 하는것처럼 보이는  width: auto 와 width: 100% 의 차이를 알아 보도록 하겠습니다. 

 

 

아래 코드를 통해 

위와 같은 두개의 사각형을 만들어 보았습니다. 

 

 

검은색 테두리(width: 400px)는 각 사각형(빨간사각형, 초록사각형)의 부모태그인데요.

각사각형의 배경색이 꽉찬걸 보아 auto, 100%는 부모태그 크기에 맞추는 기능을 하는 것처럼 보입니다.

 

하지만 여기서 차이가 발생하는 순간이 있는데요.

 

먼저 padding을 추가해보겠습니다.

 

각각 왼쪽에 30px씩 패딩을 추가 했습니다. 

 

결과는 어떻게 나올까요?

보시는것처럼 글자가 오른쪽으로 이동한걸 보아 padding이 둘다 잘 적용된것처럼 보이는데요.

100%는 padding이 적용된 크기만큼 부모를 뚫고 나오게됩니다..

 

이번엔 margin 을 추가해볼까요?

 

마찬가지로 auto를 적용할때는 margin이 적용되어도 부모의 크기를 넘어가진 않습니다. 

반면 100%는 margin이 적용된만큼 부모의 크기를 넘어가는걸 알 수 있습니다. 

 

 

주의 사항 :

엄밀하게 말하면 width:auto는 부모 태그 크기에 맞추는 기능을 하는것은 아닙니다.

위 예시는 div태그, 즉 block요소이기 때문에 그렇게 보이는것일 뿐입니다.

 

이해를 돕기 위해 예를 들어보죠.

 

아래와 같이 디폴트로 블록 속성을 가진 div태그에 display: inline-block을 지정함으로써 강제적으로 요소를 바꾸어 보았습니다.

결과를 보시면 width:auto;는 글자 크기만큼 색이 칠해진것을 알 수 있습니다.

(참고로 width를 입력하지 않은 디폴트 상태는 auto입니다.)

 

 

정리하자면 width:auto는 해당 태그 요소성질(inline or inline-bock or block ) 에 맞춰 자동적으로 정해지는 크기인것입니다.