섹션 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 속성을 써보세요.
검색엔진 차단 noindex
0
34
2
파트9 강의는 언제 오픈하시나요
0
34
2
ZIP 파일
0
29
2
26강 13F 강의 불일치 및 질문 요청
0
38
3
state 객체로 묶기
0
27
1
XAMPP에서 Apache, DB 재기동 시 접속안되는 문제
0
19
1
Breadth (등락 비율) 분석
0
24
1
26 .강의 프롬프트와 프롬프트파일(part3) 내용이 차이가 있어요.
0
31
2
6-6
0
31
1
Json 플러그인 사용시 variable collection 없음
0
35
2
배리어블 목록 없음
0
44
3
Token 등록 방법 문의
0
28
1
6-6 실습 문의
0
34
2
섹션5 노션링크 는 따로 없나요?
0
37
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
41
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
37
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
34
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
73
2
claude plugin 방법 자세히 부탁드려요
0
43
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
47
2
최근 코테, 과제 테스트 트렌드
0
93
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
46
2
한꺼번에 잡는 단축키
0
288
1
flex-basis lorem을 했을 때 100px로 고정되서 출력됩니다.
0
337
3