※Iframe
HTML Inline Frame 요소이며 inline frame의 약자입니다.
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.
1) iframe 속성
- src : 삽입할 홈페이지 url
- name : 프레임에 이름
- width : 프레임에 가로나비
- height : 프레임에 세로 길이
- frameborder : 프레임 테두리 선 (0으로 설정하면 프레임의 테두리선 x, 1로 설정하면 프레임의 테두리선 o)
- scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes로 설정하면 스크롤 바 무조건 표시, auto는 자동 표시)
- align : 정렬, left 왼쪽, right 오른쪽, middle 중앙, absmiddle 줄 중간 정렬이 있다.
- seamless : 경계선 없이 문서의 일부인 것처럼 화면에 렌더링 한다.
- srcdoc : 직접 태그소스를 iframe으로 표시할 수 있다.
2) target 속성
a 태그 속성 중 target 속성은 링크가 걸린 문서가 나타날 프레임을 설정하는 것으로 새로운 창으로 링크를 호출할 수도 있고 현재창에 보여줄 수 도 있다.
그리고 부모 프레임 영역에 나타날 수 도 있고 프레임을 지정하여 원하는 프레임에 링크를 실행할 수 도 있다.
_blank 새창에서 열기
_self 내용을 현재 프레임 영역에서 열기(포커스가 있는 프레임 / 기본값)
_parent 내용을 부모 프레임 영역에 열기
_top 내용을 무조건 전체 영역에 열기
프레임명 해당 이름을 가진 프레임 영역에 열기
* 새창에서 (여는것)
<iframe target="_blank" src="주소"></iframe>
* 내용을 현재 프레임 영역에서 (여는 것)(포커스가 있는 프레임 / 기본값)
<iframe target="_self" src="주소"></iframe>
* 내용을 부모 프레임 영역에 (여는것)
<iframe target="_parent" src="주소"></iframe>
* 내용을 무조건 전체 영역에 (여는것)
<iframe target="_top" src="주소"></iframe>
* 해당 이름을 가진 프레임 영역에 (여는것)
<iframe target="프레임명" src="주소"></iframe>
- iframe을 지원하지 않는 브라우저의 경우 대체 콘텐츠를 제공할 수 있는데, 이 경우 <iframe>과 </iframe> 태그 사이에 대체 콘텐츠를 입력하면 해당 브라우저에서는 대체 콘텐츠가 표시되게 된다고 한다.
- width, height, frameborder: iframe내부에서 높이, 너비, 보더 등을 설정할 수 있는 기능을 제공하지만, MDN 공식 문서에서는 CSS를 통해 제어하는 것을 권장하고 있습니다.
- src: 불러올 페이지의 URL() 주소를 의미합니다.
여기서 주의할 점은 아무 URL이나 입력한다고 해서 iframe이 해당 URL을 무조건 렌더링 하는 것은 아니라는 사실입니다.
다음 단락에서 자세하게 살펴보겠지만, iframe은 XSS(cross site scripting)등의 보안 이슈들을 야기할 수 있기 때문에 이를 차단하기 위해서 서비스 공급자 (여기서는 www.naver.com )에서 http헤더를 통해 페이지 렌더링 여부 등을 제한할 수 있다고 합니다.
서비스 공급자는 해당 사이트가 iframe에 표시되는 것을 막기 위해 header설정을 통해 페이지의 도메인과 frame의 도메인이 같은지 여부를 확인하도록 하고, 둘이 다르다면 에러를 리턴하도록 한 것 일 겁니다.
# 위와 같이 iframe으로 다른 사이트를 가져올 수 있다.
하지만 이런 소스코드가 막혀있는 사이트는 갖고 올 시 '에러'표시가 생길 것입니다.
# 보통 이렇게 갖고 온 것에 css를 적용할 수 없다. 왜냐하면 html구조가 나한테 직접적으로 없기 때문이다.
그래서 보통 이런 걸 갖고 와서 사용할 시는 해당 본문의 header 부분과 footer 부분을 나의 header, footer 를 띄워서 그 아래에다가 안보이게 감추고 내 header,footer 부분에 css적용해 새로운 header,footer 부분을 만들 수 있습니다.
(그런데 잘 안 쓰는 방법이라고 합니다.)
※ Irame유튜브 속성
get 방식으로 url에? 와 & 를 이용
1) rel: 재생 종료 후에 관련영상 표시 여부
0 - 안 보여줌
1 - 보여줌 (기본값)
2) fs: 풀스크린 여부 결정
0 - 버튼 안보여줌
1 - 보여줌(기본값)
3) controls: 컨트롤 패널
0 - 패널 안보여줌
1 - 보여줌(기본값)
4) disablekb - 키보드 컨트롤
0 - 컨트롤 가능(기본값)
1 - 막기
5) modestbranding: youtube 로고 없앰
*controls 살아 있을 때만 사용 가능
0 - 나타남(기본값)
1 - 안 나옴
6) loop: 반복재생
*7) 번 속성과 같이 써야 함
0 - 반복 안 함(기본값)
1 - 반복
7) playlist: 이어서 나올 영상의 id를 나열
8) autoplay: 자동재생
유튜브 정책상 막힘
0 - 재생 안 함(기본값)
1 - 자동재생
#보통 이렇게 유튜브 영상을 갖고 올 시
- "해당 동영상 > 공유 > 퍼가기 > 동영상 퍼가기" 이런 식으로 주소를 갖고 와 src에 적용해 준다.
iframe에 동영상 갖고 올 시 의 부모 박스의 크기를 잘 조절하여 위아래 검은색 여백이 잘 가려지게 해줘야 한다.
보통 부모박스에 height에 vw를 사용하여 해당 동영상 사이즈를 잘 맞춰줘야 한다.
- 위에 속성사용 시 src에 경로주소 다음에 '&' 를이용해 속성을 이어서 적용할 수 있다. ("속성=값"&"속성=값") 이런 식으로
연이어 사용가능하다.
※Iframe 지도 갖고 오기
# 보통 google은 무료로 갖고 올 수 있고, naver이나 kakao는 developers 등록해서 로그인마크나 지도 갖고 와 쓸 수 있다.
- 쓸 지도 찾아서 "공유-> 지도 퍼가기 -> 소스코드 복사" 후 src 경로에다가 적용해 사용가능하다.(기존지도에 적용된 width*height 값 지우고 css로 크기조절가능합니다.
'국비교육' 카테고리의 다른 글
| 국비지원 26일차 (0) | 2023.08.24 |
|---|---|
| 국비지원 25일차(반응형 웹) (0) | 2023.08.22 |
| 국비교육 animation실습 (0) | 2023.08.19 |
| 국비지원 23일차 (animation) (0) | 2023.08.18 |
| 국비지원 22일차 (0) | 2023.08.17 |