생활코딩 WEB1 부록 - 코드의 힘 : 동영상 삽입 > HTML

생활코딩 | WEB1 부록 - 코드의 힘 : 동영상 삽입

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

예 제가 처음 살 코딩 홈페이지로 시작한 open torso ig 를

만들기 시작한 것은
동영상 수업을 잘 정리 정돈 하기 위해서였습니다
자 그럼 지금부터 동영상 서비스 s2 의 의 동영상을 우리 웹사이트에
포함시키는 방법을 살펴보겠습니다
전 유튜브를 이용 하겟지만 모든 동영상 서비스는 사용 방법이 거의
비슷하기 때문에 여러분이 이걸 보시면 다른 동영상을 삽입하는 것도
가능해질 겁니다 자 지금 보고 계신 화면은 유튜브에 화면인데요 예 여기
보시면 동영상 밑에 쉐어 공유 라고 되어 있는 부분이 있습니다
자 이걸 한번 클릭해 볼게요 자 그럼 여기 여러가지 공유 버튼들이 있고
아마 여러분들은 이걸 써 보셨을 가능성이 큰데요
그중에 보시면 인베 d
예 한국말로는 퍼가기 로 되어 있을 겁니다
예 그리고 예전엔 요기 여기에 뭐라고 적혀있어 냐 면 소스 라고 적혀
있었어요
사람은 소스 가 뭔가요 코드 줘
만약에 여기 소스 라고 적혀 있다면 여러분이 소스 가 무엇인지를 알기
전에는 아마 눈앞에 소스 라는 단어가 있어도 여러분은 이 단어를 그냥
지나쳤을 겁니다
눈앞에 있어도 없는거나 다름 없는 것이죠
그런데 여러분이 소스 가 무엇인지를 알게 된 순간
여러분이 여기에 소스 라고 적혀있으면 소스에 관심을 갖게 됩니다
혁명적 편하죠 자 그럼 여기잇는 인 배들을 한번 둘러보겠습니다
이렇게 눌렀더니 요렇게 생긴 화면이 됩니다
예 그리고 잘 보니까 이게 뭐라는 걸 알 수 있어요
태그 란 걸 알 수 있죠 그 태그 중에 뭐 아이프레임 이라는 태그 란
것을 알 수 있습니다
우리가 아이프레임 이 뭔지 배우지 않았지만 여러분은 이게 html 코드
이고 op 코드가 2위 에 있는 동영상을 의미한다. 라는 것을 안다면
여러분은 이 코드를 카피해서
자신의 동영상 페이지 에다가
한번 추가해 볼까요
자 저는
탈락을 의미하는 p 태그로 감싸 보겠습니다 자 요렇게 코드를 추가했습니다
자 그리고 한번 리로드를 해볼까요
페이지를 리로드 하면 보시는 것처럼 동영상이 웹 페이지에 추가된 것을
볼수가 있습니다
뭐 우 회 이게 무슨 뜻인지
어떤 의미인지 롤 곰곰히 한번 집어 볼 까요
음 저 개인적으로는 현 시점에서 약 3000개 정도의 동영상 수업 을
만들어서 그 학습자들에게 제공하고 있구요
어 약 1800만 정도 의 조 s 를 가지고 있습니다
만약 제가 직접 동영상을 서비스해 따면
전옥 얼마나 많은 돈을 써야 했을 까요
아마도 수억을 사용했다고 해도 이상하지 않을 겁니다
저희 이런 서비스를 이용해서 한 푼도 쓰지 않고 동영상 수업을 많은
사람에게 제공할 수 있게 되었습니다
누군가는 이런 동영상 서비스가 잘 동작하도록 하기 위해서 엄청난 자본을
쏟아붓고 있고 또 누군가는 자신의 전문가 인생을 예 여기에다가 갈아 놓고
있습니다
이런 엄청나게 거대한 부품을
우리는 아이프레임 이라고 하는 단 한 줄의 코드로 우리 웹페이지에 합성할
수 있게 되는 겁니다 이건 엄청난 일입니다
단지 익숙할 뿐 이예요 우리가 단지 소비자로 살 것이라면 이런 사실을
그냥 당연하게 이렇게 해도 될 거라고 생각해요
하지만 우리도 생산자가 되어서 이런 서비스를 또는 이런 가치를 만들려고
한다.면 이러한 사실을 낯설게 바라볼 필요가 있다고 생각합니다
이 맥락에서 html 이라는 컴퓨터 언어 가 하는 역할은
어 일종의 본드 라고 할 수 있습니다 우리는 이 본드를 이용해서 작게는
h1 태그와 같은 작은 부품을
크게는 이런 동영상과 같이 비싸고 거대한 부품을 합성해서
어 새로운 제품을 새로운 웹페이지를 만들 수 있게 되는 것이죠
바로 이것이 코드의 힘입니다
그 심에 공감 하셨으면 좋겠습니다
그러면 코드의 힘을 곰곰히 여러분들 곱십어 보시길 바라면서
어이 수업은 여기까지 하겠습니다.