22-05-17 TIL

베니·2022년 5월 17일
0

TIL

목록 보기
97/100
post-thumbnail

🤪 5월 목표

  • 코어 자바스크립트 읽기
  • 리액트를 다루는 기술 읽기
  • 유데미 리액트 강의 보기
  • 유데미 타입스크립트 강의 보기
  • 프로그래머스 고득점 Kit(해시, 스택/큐, 힙, 정렬, 완전탐색, 깊이/너비 우선탐색) 풀기

🚩 오늘 한 일

  • 반응형 웹

🚩 내일 할 일

  • 프로젝트
  • HTML
  • 헬스

🚩 느낀점

오늘은 반응형 웹에 관해 공부를 해보았다. 왜냐면 요즘 채용공고를 자주 보고 있는데 자격 요건에 REST API와 자주 보이는게 반응형 웹이었다. 그냥 반응형이라고 하면 미디어쿼리만 사용하면 되는 줄 알았기에 포트폴리오를 만들기전에 자세히 공부하고 싶다고 생각하게 되어서이다. 반응형을 만드려고 하면 텍스트에 경우 em, rem 을 이용하고 박스에는 vw, vh, vmin, vmax, %(가변 그리드) 등을 사용했다. 그리고 이미지와 동영상을 반응형으로 만들때는 em, vw %등을 사용할 수 있다라느 것을 배웠다. 그런데 유튜브에서 영상을 가져와서 넣으면 iframe은 반응형으로 작용하지만 콘텐츠는 작용하지 않는 경우가 있었다. 이 경우에는 iframe을 감싸는 요소를 하나 만들어 그 요소에 콘텐츠에 종횡비만큼 padding-top에 %로 값을 주고 absoulte로 적용시켜주면 해당 문제를 해결할 수 있었다. 마침 포트폴리오에 영상을 하나 넣을려던 참이였는데 좋은 학습 기회가 되었다. 내일은 HTML을 다시 복습해보려고 한다. 왜냐하면 요즘 stlyed-components를 사용해 스타일을 주고 있는데 사용하기 전보다 시맨틱적인 마크업을 하고 있다는 느낌이 안들어서 HTML을 한번 더 보며 시맨틱의 의미를 상기시키려고 한다.

profile
안녕하세요~

0개의 댓글