100% 와 auto의 차이

1. width: 100% 와 width: auto 의 차이점

1.width: 100%

의미 : width: 100% 는 요소의 내용(content)이 부모 요소의 가용 너비를 완전히 차지하도록 설정한다. 

이때 가용 너비는 부모 요소의 패딩과 테두리(border)를 제외한 부분이다.

1-1. 특징

• 부모 요소의 패딩이나 테두리(border)가 있으면, 그만큼의 크기가 제외된다.
• 자식 요소가 부모 요소의 가용 영역을 완전하게 채운다.
• 반응형 디자인에서 종종 사용됨
• box-sizing의 속성에 따라 달라질 수도 있다.
  • content-box : width는 콘텐츠 너비만 포함
  • border-box : width는 패딩과 보더를 포함하여 전체 요소 너비를 지정

2. width: auto

의미: width: auto는 요소의 내용에 따라 자동으로 너비가 결정된다. 기본값으로, 요소가 차지할 수 있는 최대 너비까지 늘어날 수 있다.

2-1. 특징

• 요소의 콘텐츠 크기와 자식 요소의 크기에 따라 너비가 결정된다.
• 부모 요소의 패딩, 테두리, 마진을 모두 고려하여 너비가 조절된다.
• display 속성에 따라 다르게 동작한다.
  • block요소 : 부모의 가용 너비를 차지한다.
  • inline요소 : 콘텐츠 너비에 맞추어 조절된다.
• min-width, max-width가 적용될 수 있다.

3. 차이점 요약

width: 100%

• 부모 요소의 가용 너비를 모두 차지
• 패딩과 테두리 제외 후, 콘텐츠가 남은 영역을 가득 채움
• 반응형 디자인에 유리

width: auto

• 콘텐츠 크기나 자식 요소 크기에 맞추어 자동 조절
• 부모의 모든 여백과 패딩을 고려
• 기본적으로 블록 요소는 부모의 가용 너비에 맞춤 / inline 은 컨텐츠 너비에 맞춤