09. window Swap / main / 5

이 활동은 유튜브 드림코딩by엘리 채널의 html기초강의 제1강을 참고하여 시작한 학습방식입니다.

---

window Swap main페이지

특징

1. window Swap(이하 윈도스왑)은 세계 각국의 참여자들이 각자의 창 밖 풍경영상을 공유하는 사이트이다. 이국적 창밖 풍경으로 랜선 세계여행을 할 수 있다. 몇 개월동안 봤는데, 아직 한국 창문은 못 봤다. 미국쪽 창문이 많이 등장했다.
2. open버튼을 누르면, pc기준으로 새 창이 뜨면서 세계 각국의 창밖풍경 영상이 재생된다.
   • 비디오 프레임을 전체 창에 할애했는데, iframe태그를 썼다. 수 많은 참여자들의 비메오 영상을 수시로 바꿔 넣기 위해서, JS를 활용했을 것이다.
     
     • html의 iframe태그와 관련된 DOM인터페이스는 HTMLIframeElement
       
       • iframe 요소의 레이아웃과 출력 내용을 조작하는 기능을 한다.
       • 윈도스왑은 이 기능을 활용했을 것으로 예상한다. 제출된 영상 중 선택하여 html의 iframe태그의 src(source)에 연결하고, 그 영상들의 제목과 위치 등을 함께 화면에 띄우는 작업!

---

 

dom인터페이스, html과 js연결은 현재 막 학습중인 부분이다.

실습 위주 온라인 수업을 통해 학습 중인데, 예시 몇 가지 보고 실습 몇 번 해봤다고, 사이트를 분석할 때 "이 부분은 JS로구나"하고 눈에 띄는 게 신기하고 웃기다. 아기가 한글 처음 배우고 길 나서면 길가에 간판 다 읽어보려 하는 그런 느낌 ㅋㅋㅋㅋㅋ