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 |
Tags
- 프로그래머스코딩테스트
- 프로그래머스 레벨0
- next.js 에러
- 프로그래머스코테
- mysql
- 1일1코테
- 정처기기출
- 코딩테스트
- 코딩
- 자바스크립트
- 개발자
- CSS
- 프로그래머스알고리즘
- Redux-Toolkit
- 코테스터디
- 알고리즘스터디
- 알고리즘문제
- html
- next.js
- 코테공부
- 코테준비
- js
- 알고리즘공부
- 프로그래머스 Lv.0
- 프로그래머스 알고리즘
- 프로그래머스 코테
- 정보처리기사
- 프로그래밍
- 프로그래머스 코딩테스트
- 프로그래머스
Archives
- Today
- Total
목록iframe 넣기 (1)
계발하는 개발자
[CSS] 유튜브 영상 iframe(아이프레임) 반응형 넣기
웹페이지에 영상 원본파일을 넣게 되는 경우에 용량으로 인해 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