padding-bottom : 60% 를 적용한뒤 이미지가 안보여여
783
작성한 질문수 162
카드 리스트를 만들던중 padding-bottom:60% 을 적용해도 이미지가 보이지 않아서여
.card-image {
height:0;
padding-bottom:60%
}
이렇게 하면 이미지가 넓이에 맞춰서 반응형이 된다는데 사실 무슨말인지 이해도 안가고 되지도 않아서여 한번 봐주시면 감사여
http://terecal-hyun.co.kr/skilnote2/myshortcut/css-flex-tutorial-terecal/7
답변 1
4
소스코드는 잘 작성하셨고, 해당 코드로 동작도 잘 되고 있습니다.
그림으로 보여드릴게요-
그림과 같이 padding은 %로 했을 경우, 상하좌우값 모두 부모의 width를 100% 기준으로 잡습니다.
즉 padding-bottom: 60%라는 의미는, 바닥의 패딩값을 부모 width의 60%로 잡겠다는 것이고, 부모의 width가 늘어나거나 줄어드는대로 같은 비율로 계속 유지가 되는 것이지요.
우리가 만든 .card-image는 width가 부모요소의 width에 꽉 차있기때문에
.card-image의 width는 부모 width의 100%,
.card-image의 height는 부모 width의 60%가 됩니다.
엘리먼트의 높이를 height 대신 padding-bottom으로 잡아주는 방식이기 때문에
아래 그림처럼 height를 따로 갖고 있으면 우리가 원하는 height보다 커지므로,
height는 명시적으로 0으로 해주는 것이고요.
올려주신 페이지에 참고로 걸어두신 링크(https://hyeonseok.com/blog/712)에 잘 나와있는 방법입니다.
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
119
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
138
1
css grid repeat() 에서 autofit 사용시
0
183
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
121
1
웹에서 위치?값
0
212
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
310
1
flex-basis auto, 0 차이
0
711
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
607
1
animation forwards 관련 질문
0
489
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
560
1
flex-grow IE 질문드립니다.
0
625
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1076
1
card__item에 display:flex를 했을 때..
0
513
1
11vmin
0
418
1
header class 안에 div와 h2
0
576
1
grid 반응형 페이지 step1 질문있습니다~
0
282
1
반응형 페이지 step4 order
0
356
1
미디어쿼리 사이즈
1
286
1
figure + div
0
300
1
CSS Grid를 통한 정렬의 장점
0
248
1