다음 스터디 전까지 스터디 과제를 완성해야 하는데
어제 스터디 때 딱 pc용 화면 구현하고 끝내서 오늘부터는 반응형을 구현해야 한다.
쉽지 않은 반응형.... 진짜 나는 항상 반응형을 제일 어려워했다.
ㅠㅡㅠ
반응형을 구현하다가 이미지가 자꾸 원래 큰 창에서 지정한 크기에 고정되어 있길래 머리가 아파서 구글링을 하기 시작했다.
그렇게 알게 된 코드가 있는데...
object-fit: ;이다.
이거 이용해서 이미지 비율을 맞추면서 반응형 페이지를 구현할 수 있다!
방법은 html에 <img> 태그 걸 때
style="width:100%; height:100%; object-fit:contain;" 걸어 주면 된다.
구글링하다 완전 정리 잘해두신 블로그를 찾았는데
w3schools에서 배운 거 정리해두셨던데
난 사실 이분이 정리하신 게 더 이해 잘 되어서 이분 링크를 건다..
https://blog.naver.com/jsy930609/222089319060
혹시 몰라서 w3wchoos 링크도 건다
https://www.w3schools.com/css/css3_object-fit.asp
- 스터디 결과물
또 동영상 재생 안되는 이슈로
링크 건다..
https://blog.naver.com/unong_story/223496892746
'코딩 공부 (frontend) > 스터디' 카테고리의 다른 글
24/06/30 Study Project 1(feat. HERA) (5) | 2024.07.14 |
---|