섹션 7. Grid - 실습 예제 관련 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
섹션 7. Grid - 실습 예제에 쇼핑몰 상품 리스트를 따라하고 있는데 세로가 긴 사진 말고 가로가 긴 사진을 넣으면 레이아웃이 높이가 제각각으로 되는데
가로가 긴사진 세로과 긴사진 섞어서 쓸려면 어떻게 해야 하는지 문의 드립니다.
답변 2
0
심재화님 안녕하세요.
우선, 섞어서 쓴다는 부분이 아마 다양한 사이즈의 이미지를 뿌리고자 할때, 한 아이템 (셀)의 크기가 일정했으면 좋겠다는 의미로 파악됩니다.
그렇다면 아마 예제를 따라하시니까 이렇게 되어서 질문을 주신 것 같습니다. 음. 사실 상황에 따라 어떻게 처리를 할지 경우의 수는 많습니다만...
img {
width: 100%;
height: 350px;
object-fit: cover;
}
현재 HTML 구조를 변경하지 않는다는 가정하에, 이렇게 이미지에 직접 사이즈를 지정하시고, object-fit 속성을 추가해보세요.
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
특정 비율 (?)로 고정하고 싶으시다면, aspect-ratio 속성을 써보세요.
푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?
0
8
0
장치 의존성과 CSR
0
22
1
순수 함수 / 순수 컴포넌트
0
13
1
css box-sizing 관련 질문
0
25
2
여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?
0
17
1
node.js 설치 (LTS버전)
0
23
1
Cursor & Antigravity 소개 및 설치
0
26
2
뉴스페이퍼 테마 관련
0
32
1
지우지 말아야할걸 지운상태로 저장해버렸어요....
0
30
1
24번 수업에 나온 창은 무슨 프로그램인가요
0
31
1
Desktop모드-header영역 제작에서 제공해드린 폰트와 이미지
0
26
1
span 태그에 여백이 들어간 것 같은데 왜 그런건가요?
1
53
5
1-2 주가 데이터 수집 (OHLCV) 강의 질문 드려요
0
42
2
뉴스페이퍼 스킨을 꼭 사야하나요? 링크주소도 못찾겠어요
0
43
2
자료실
1
39
2
저는 일단 워드프레스로 블로그를 만들어 보려고
0
27
2
cafe24에서 했다가 fastcomet으로 변경하려 하는데요 문제가 생겼습니다
0
31
2
html / css 기초는 있습니다..
0
50
2
ReactScriptExample 관련 질문
0
40
1
class 이름을 section__title이라고 짓는 것에 대해서
0
52
2
수업자료와 노션 공유 문제
0
65
3
'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.
0
60
2
한꺼번에 잡는 단축키
0
310
1
flex-basis lorem을 했을 때 100px로 고정되서 출력됩니다.
0
356
3