강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

조욱희님의 프로필 이미지
조욱희

작성한 질문수

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

Sizing

w-auto와 h-auto는 어떻게 결정되나요?

작성

·

509

0

w-auto는 w-100과 같아서 부모 요소의 가로를 전부 차지하지만, h-auto은 부모의 높이와 전혀 관계없는듯 보입니다. 원리를 모르니 가르쳐 주시면 감사하겠습니다. 가로와 세로의 auto는 어떻게 결정되는지 궁금합니다.

퀴즈

Bootstrap에서 다양한 화면 크기(viewport)에 맞춰 웹사이트 레이아웃이 자동으로 조정되게 하는 중요한 개념이자 도구는 무엇일까요?

Gutter (거터)

Offset (오프셋)

Breakpoint (반응형 분기점)

Clearfix (클리어픽스)

답변 1

0

Self-coding님의 프로필 이미지
Self-coding
지식공유자

거의 비슷한 개념입니다.

 

다만 w-auto 클래스(즉, width: auto;)는 margin이나 padding 그리고 border를 포함하지 않구요,

w-100 클래스는(width: 100%;)는 포함되는 개념입니다.

 

이 두 개가 거의 같이 사용해도 별 차이가 없는 이유는

부트스트랩 css에 reset 개념으로

box-sizing: border-box; 클래스가 포함되어 있기 때문입니다.

 

디테일한 부분은 stackoverflow 아래 링크를 참조해주세요.

https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent

조욱희님의 프로필 이미지
조욱희

작성한 질문수

질문하기