섹션 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
14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.
0
14
0
인프당 무당 캐릭터 뽑는 프롬프트
0
13
0
10월 15일 삭제예정 강의 문의
0
37
1
강의가 중복됐어요
0
48
0
결제가 이루어지는 방식에 대한 문의
0
54
1
강의제목에 10/15일 삭제라고 나와있는데,
0
48
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
56
2
1강 동영상 재생 오류
1
67
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
42
1
Composition단계에서 `Layer`는 누가 만드는지
0
44
1
Strict Mode 예시 질문!
0
58
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
62
2
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
89
4
설명이 잘못된거같습니다.
1
77
2
31강 학습자료에 프롬프트가 엉뚱한것이 있어요
1
66
1
bitnami 설치
0
39
0
강의 소스 코드는 어디서 볼수 있나여?
1
70
1
자료집 관련
0
66
2
13. (App 2) 기본기 훈련 에서
0
97
1
17강 강의에 목데이터 첨부파일이 없습니다.
2
89
2
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
63
1
한꺼번에 잡는 단축키
0
323
1
flex-basis lorem을 했을 때 100px로 고정되서 출력됩니다.
0
378
3