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

김윤식

작성한 질문수

CSS Flex와 Grid 제대로 익히기

Flex UI #7 - 카드 리스트

https://www.inflearn.com/questions/64102

작성

168

https://www.inflearn.com/questions/64102

이전 질문에서 설명해주신걸 보았으나 잘 이해가 가지 않아

다른 질문 드립니다!

height: 0;

padding-bottom: 60%;

을 주면 보이지 않던 이미지가 보이게 되는데 그 이유가 아직도 잘 이해가 안갑니다.

올려주신 이전 답변에서 padding bottom만 남고 height은 0이 되는데 어떻게 보이지 않던 이미지가 보이게 되는건지... 다시 설명을 부탁드리겠습니다 ㅠㅠ 감사합니다!

HTML/CSS flex

퀴즈

Flexbox를 사용하여 메뉴 항목을 가로로 배치할 때, 부모 요소에 적용하는 가장 기본적인 속성은 무엇일까요?

flex-direction: row

display: flex

align-items: center

justify-content: space-between

답변 1

1분코딩

지식공유자

padding값 자체가 엘리먼트의 width를 기준으로 한답니다.
즉 폭이 100px이라면, padding-bottom: 60%는 100px의 60%인 60px이 됩니다.
브라우저 너비가 바뀌어서 폭이 500px이 되었다면, padding-bottom: 60%은 500px의 60%인 300px이 되겠지요~
padding이 이런 원리로 동작하기 때문에, 가변폭에서 비율을 맞춰 높이를 조정하는 용도로 자주 쓰인답니다.

인터넷 익스플로러를 고려하지 않아도 되는 상황이라면, aspect-ratio를 사용하시는 것도 좋습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

김윤식

작성한 질문수

전체 Q&A

질문하기