https://www.inflearn.com/questions/64102
170
작성한 질문수 22
https://www.inflearn.com/questions/64102
이전 질문에서 설명해주신걸 보았으나 잘 이해가 가지 않아
다른 질문 드립니다!
height: 0;
padding-bottom: 60%;
을 주면 보이지 않던 이미지가 보이게 되는데 그 이유가 아직도 잘 이해가 안갑니다.
올려주신 이전 답변에서 padding bottom만 남고 height은 0이 되는데 어떻게 보이지 않던 이미지가 보이게 되는건지... 다시 설명을 부탁드리겠습니다 ㅠㅠ 감사합니다!
답변 1
0
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
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
131
1
수업자료 다운로드
0
135
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
151
1
css grid repeat() 에서 autofit 사용시
0
195
1
menu 아이템 반응형 변경
0
112
1
질문은 아니고.. 오타 발견..
0
127
1
웹에서 위치?값
0
228
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
526
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
316
1
flex-basis auto, 0 차이
0
726
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
614
1
animation forwards 관련 질문
0
499
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
567
1
flex-grow IE 질문드립니다.
0
634
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
441
1
Grid 수직정렬 문의
0
1081
1
card__item에 display:flex를 했을 때..
0
515
1
11vmin
0
427
1
header class 안에 div와 h2
0
582
1
grid 반응형 페이지 step1 질문있습니다~
0
287
1
반응형 페이지 step4 order
0
362
1
미디어쿼리 사이즈
1
293
1
figure + div
0
308
1
CSS Grid를 통한 정렬의 장점
0
256
1