Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 알고리즘스터디
- CSS
- 프로그래머스
- 알고리즘공부
- 프로그래머스코딩테스트
- 프로그래머스 Lv.0
- 프로그래머스코테
- 코테준비
- Redux-Toolkit
- 프로그래머스 알고리즘
- 코테스터디
- 1일1코테
- js
- 프로그래머스 코딩테스트
- 프로그래머스 코테
- 개발자
- html
- 프로그래머스알고리즘
- next.js
- 코딩
- next.js 에러
- 프로그래머스 레벨0
- 정처기기출
- 프로그래밍
- 정보처리기사
- 코테공부
- 알고리즘문제
- 코딩테스트
- 자바스크립트
- mysql
Archives
- Today
- Total
목록아이프레임 반응형 (1)
계발하는 개발자

웹페이지에 영상 원본파일을 넣게 되는 경우에 용량으로 인해 github에 push 가 제한되거나 하는 경우가 있기 때문에 되도록이면 iframe을 이용해서 외부 영상을 끌어오는 형태로 삽입하고 있다. 이때 아이프레임 반응형을 위해 넣는 정석같은 코드다. .vid_ifr_inner { position: relative; width: 100%; padding-bottom:52.25% } .vid_ifr_inner iframe { position: absolute; width: 100%; height: 100%; border: none; } 이렇게 넣게 되면 모바일~태블릿 사이즈에 대응하는 반응형 사이즈로 알아서 리사이즈된다.
📌 Language/CSS
2023. 10. 28. 16:16