FE 하포리

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

Front-End 개발자/JavaScript 1

[실무예제] 비율에 상관없는 반응형 vimeo(iframe) 영상 만들기

업무 특성상 가끔 height 100% 의 전체화면에 꽉 차게 영상을 넣어야 하는 일이 종종 있었습니다. 그땐 dimension-fix 라는 무거운 라이브러리를 이용하여 영상 하나만 넣는 비효율적인 방법을 썼었습니다. 반응형에서 비율그대로 화면에 보이게 하는 방법은 많이 나와있고 쉽습니다.(css 로만 써도 충분) 부모요소에 padding-top으로 비율만큼 내려주고 자식 요소인 iframe 에 position:absolute를 이용하여 만들어주는 것인데요. 약간의 검색만으로 쉽게 찾아보실 수 있어서 포스팅은 나중에 하거나 하지 않을 예정입니다. 엊그제 갑자기 찾아온 마감인 프로젝트가 반응형은 아니지만 메인에 있는 한 레이어가 반응형처럼 보이게 해달라는 요청을 받았습니다. 심지어 내부 박스들의 비율도 자..

Front-End 개발자/JavaScript 2020.05.16
1
더보기
프로필사진

  • 분류 전체보기 (5)
    • Front-End 개발자 (1)
      • HTML , CSS (0)
      • JavaScript (1)
      • TypeScript (0)
      • React.js (0)
      • 강연, 강의 (0)
      • Portfolio (0)
    • 취미 생활 (1)
      • Tennis (1)
    • study room (3)
      • core javascript (3)

Tag

실행컨텍스트, this, core javascript, 코어 자바스크립트, execution context, data type, lexical environment, javascript this, 데이터 타입, javascript, js, 자바스크립트,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/10   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • 칠흑의이방인 님^ㅡ^

티스토리툴바