📝 참고문서 : https://ossam5.tistory.com/73
1️⃣iframe이란?
inline frame 의 줄임말이며, 페이지에 Frame을 넣을 때 사용
즉, 웹페이지 안에 또다른 웹페이지를 삽입할 수 있는 태그
src 속성으로 불러울 HTML 링크를 설정한다.
아래는 내 티스토리 블로그 예시!
<body>
<h1>iframe</h1>
<iframe src="https://ella951230.tistory.com/"></iframe>
</body>보통은 iframe 태그는 Youtube 영상을 불러올때 많이 사용된다.
어떻게 확인하냐??
Youtube에서 내가 공유하고 싶은 동영상 공유를 클릭하면
아래와 같은 퍼가기 버튼이 나옴. 거기에 iframe주소가 나온다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/1I3hMwQU6GU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>속성을 살펴보자!
| 속성 이름 | 뜻 |
| src | 삽입 할 홈페이지 좌표 |
| name | 프레임 이름 |
| width | 프레임 가로 너비 |
| height | 프레임 세로 길이 |
| allow | iframe에서 허용할 기능들 지정 |
| autoplay=1 | 영상 자동재생 (mute 속성도 함께 표시해야 자동재생) |
| mute=1 | 음소거 |
| loop=1 | 반복재생 |
| controls | 컨트롤바 |
| start | 동영상에 재생될 시간을 설정 |
'프론트엔드 개발 > html' 카테고리의 다른 글
| Form validation) HTML 입력 유효성 검사 (0) | 2022.12.01 |
|---|---|
| Semantic Tag 시맨틱 태그 (부제: 언제까지 div 태그만 쓸거니?) (0) | 2022.08.31 |