widget

다음 스터디 전까지 스터디 과제를 완성해야 하는데

어제 스터디 때 딱 pc용 화면 구현하고 끝내서 오늘부터는 반응형을 구현해야 한다.

쉽지 않은 반응형.... 진짜 나는 항상 반응형을 제일 어려워했다.

ㅠㅡㅠ

 

반응형을 구현하다가 이미지가 자꾸 원래 큰 창에서 지정한 크기에 고정되어 있길래 머리가 아파서 구글링을 하기 시작했다.

그렇게 알게 된 코드가 있는데...

object-fit: ;이다.

이거 이용해서 이미지 비율을 맞추면서 반응형 페이지를 구현할 수 있다!

 

방법은 html에 <img> 태그 걸 때

style="width:100%; height:100%; object-fit:contain;" 걸어 주면 된다.

 

구글링하다 완전 정리 잘해두신 블로그를 찾았는데

w3schools에서 배운 거 정리해두셨던데

난 사실 이분이 정리하신 게 더 이해 잘 되어서 이분 링크를 건다..

https://blog.naver.com/jsy930609/222089319060

 

css 이미지 비율 맞추기 유지면서 줄이기 반응형 object-fit 오브젝트 채우기

CSS object-fit 속성은 컨테이너에 맞게 <img> 또는 <video>의 크기를 조정하는 방법을 지...

blog.naver.com

혹시 몰라서 w3wchoos 링크도 건다

 

https://www.w3schools.com/css/css3_object-fit.asp

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

  • 스터디 결과물

또 동영상 재생 안되는 이슈로

링크 건다..

https://blog.naver.com/unong_story/223496892746

 

 

 

 

'코딩 공부 (frontend) > 스터디' 카테고리의 다른 글

24/06/30 Study Project 1(feat. HERA)  (5) 2024.07.14
widget

 

프론트엔드 부트 캠프 시작한 지 얼마 안 되어서

스터디가 만들어졌길래 혹해서 바로 들어갔었다.

조금씩 틀을 잡다가 실행을 한 건 오늘부터였다.

 

 

  • 스터디 방식

약 5~6시간 동안 디스코드에서 서로 화면공유하면서 진행을 했으며

헤라 사이트 클론 코딩이 주제였다.

각자 파트를 나눠서 했고 일주일 동안 다 완성시켜오는 것이 과제였다.

 

나는 헤더에서 버튼을 누르면 다른 링크로 넘어가는 창을 구현하는 역할이었다.

스터디 시간 동안 큰 창은 다 구현을 했고 반응형은 평일에 강의랑 과제 일찍 끝나면 수업 시간에 해야지... ㅎㅎ

 

 

  • 오늘 스터디 결과물

header 부분은 다른 분이 코딩하시고 넘겨주신 거 내 거에 끼워서 했다.

아주 잘 돌아감! 성공적!

비상.. 동영상 복사 안된다 진짜 큰일 났다 사진으로 복사된다ㅠㅡㅠ

링크로 대체한다.

https://blog.naver.com/unong_story/223496504231

 

 

 

 

 

 

 

 

'코딩 공부 (frontend) > 스터디' 카테고리의 다른 글

24/07/01 Study Project 1(feat. HERA)  (2) 2024.07.14

+ Recent posts