WEBVTT

00:00:00.737 --> 00:00:06.762
이것처럼 기본적인 페이지는
HTML태그로 만들어져있어요

00:00:06.762 --> 00:00:09.180
웹페이지에
스타일을 주고 싶을 때

00:00:09.180 --> 00:00:12.180
CSS를
어떻게 넣을까요?

00:00:12.180 --> 00:00:14.397
태그를
추가하면 돼요

00:00:14.397 --> 00:00:17.349
그리고 브라우저가
'style'태그를 보면

00:00:17.349 --> 00:00:20.195
CSS 처리기를 써서
그 태그를 처리해요

00:00:20.195 --> 00:00:23.383
보통은 안에
태그를 넣어요

00:00:23.383 --> 00:00:27.352
왜냐하면 브라우저가
스타일을 처리할 때

00:00:27.352 --> 00:00:30.959
HTML태그가 오기 전에
처리하길 원하니까요

00:00:30.959 --> 00:00:35.326
만약 여기 아래에
을 넣으면

00:00:35.326 --> 00:00:37.927
'스.적.않.내'를
보게 돼요

00:00:37.927 --> 00:00:40.277
'스타일이 적용되지
않은 내용'을요

00:00:40.277 --> 00:00:44.726
그러면 사람들은 페이지가
벌거벗은 걸 보게 되잖아요!

00:00:44.726 --> 00:00:48.484
원래 있어야 하는 곳으로
돌려 놓을게요

00:00:48.484 --> 00:00:51.734
좋아요 이제 페이지에
스타일이 적용되었어요

00:00:51.734 --> 00:00:57.954
만약 인터랙티브하게 하려면
자바스크립트를 어떻게 넣으면 될까요?

00:00:57.954 --> 00:01:01.255
그러려면
태그를 넣으세요

00:01:01.255 --> 00:01:04.385
태그를
넣을 가장 좋은 곳은

00:01:04.385 --> 00:01:10.517
페이지의 가장 아래의
태그 바로 뒤에요

00:01:10.517 --> 00:01:15.150
여기에 넣었는데
이따가 설명해줄게요

00:01:15.150 --> 00:01:20.084
태그 안에는
무엇을 넣을 수 있을까요?

00:01:20.084 --> 00:01:25.354
유효한 자바스크립트를 넣어요
'var four = 2+2;' 처럼요

00:01:25.354 --> 00:01:27.854
하지만 아주
재미있지는 않아요

00:01:27.854 --> 00:01:30.176
페이지 상에는
아무 일도 일어나지 않으니까요

00:01:30.176 --> 00:01:31.732
칸 아카데미에서
공부하고 있다면

00:01:31.732 --> 00:01:35.026
4가 2 더하기 2라는 건
이미 알고 있을거에요

00:01:35.026 --> 00:01:37.982
이게 작동한다는 것을
보려면

00:01:37.982 --> 00:01:42.092
이 코드를
써야해요

00:01:42.092 --> 00:01:45.350
좋아요
아무 것도 안 보이죠?

00:01:45.350 --> 00:01:49.447
아마 이 함수를 본 적이
없기 때문일 거에요

00:01:49.447 --> 00:01:52.340
'console.log'는
특별한 함수인데

00:01:52.340 --> 00:01:54.720
많은 자바스크립트 환경에서
사용할 수 있어요

00:01:54.720 --> 00:01:56.326
브라우저를
포함해서요

00:01:56.326 --> 00:01:59.490
그러면 자바스크립트 콘솔에
뭔가가 나올 거에요

00:01:59.490 --> 00:02:01.651
여러분의 브라우저에서
이 콘솔을 찾을 수 있어요

00:02:01.651 --> 00:02:10.490
Cmd+Opt+i나
Ctrl+Opt+i를 누르면 돼요

00:02:10.490 --> 00:02:14.825
아니면 오른쪽 클릭해서
'요소 보기'를 눌러도 돼요

00:02:14.825 --> 00:02:18.839
이 프로그램을 멈추고
개발자 콘솔을 띄워서

00:02:18.839 --> 00:02:21.707
저 메시지가
나오는 걸 보세요

00:02:21.707 --> 00:02:24.599
해봤어요?
좋아요!

00:02:24.599 --> 00:02:26.656
이제 원하면
콘솔을 닫아도 돼요

00:02:26.656 --> 00:02:28.580
자리를 많이
차지하고 있으니까요

00:02:28.580 --> 00:02:32.962
약간 거슬릴 수도 있어요
쓰고있을 때 에러를 모두 보여주거든요

00:02:32.962 --> 00:02:35.515
하지만 디버깅할 때는
좋은 도구에요

00:02:35.515 --> 00:02:38.359
그러니까 도구 상자에
집어 넣어두세요

00:02:38.359 --> 00:02:42.325
이제 자바스크립트로
뭔가를 해볼거에요

00:02:42.325 --> 00:02:46.540
아직 무슨 뜻인지는 모르겠지만
몇 줄의 코드를 써볼거에요

00:02:46.540 --> 00:02:55.790
'document.body.innerHTML = 
"와! 네 페이지에 들어왔지롱!";'

00:02:57.091 --> 00:02:58.646
어떻게 됐는지
봤어요?

00:02:58.646 --> 00:03:03.128
페이지가 사라졌고
해커 메시지로 대체됐어요

00:03:03.128 --> 00:03:07.895
이 코드가 어떻게 작동하는지는
다음에 알아볼 거에요

00:03:07.895 --> 00:03:12.219
이 코드는 태그를 찾아서
그 속의 내용을 바꿨어요

00:03:12.219 --> 00:03:16.530
이 태그를 넣었을 때
무슨 일이 일어날까요?

00:03:16.530 --> 00:03:20.963
그리고 에
와 함께 넣는다면요?

00:03:20.963 --> 00:03:24.145
작동하지 않을 거에요
왜일까요?

00:03:24.145 --> 00:03:26.861
페이지는 태그를
먼저 검증하게 돼요

00:03:26.861 --> 00:03:29.093
태그를
보기 전에 말이죠

00:03:29.093 --> 00:03:35.208
그럼 페이지는 "앗 나는 아직
'document.body'를 보지도 못했어"

00:03:35.208 --> 00:03:38.494
"근데 이걸 수정하려고 하다니!
그런 건 안 돼" 라고 하겠죠

00:03:38.494 --> 00:03:43.762
그래서 태그를
페이지 마지막에 둬야해요

00:03:43.762 --> 00:03:46.861
그래서 웹페이지가
를 먼저 보고

00:03:46.861 --> 00:03:51.219
그 안의 내용을 모두 본 후
거기에다 뭔가를 하게 돼요

00:03:51.219 --> 00:03:54.809
먼저 웹페이지가
존재하게 해야하는 거죠

00:03:54.809 --> 00:03:56.672
그게 CSS와
다른 점이에요

00:03:56.672 --> 00:03:58.976
태그는
처음에 넣어야해요

00:03:58.976 --> 00:04:02.530
왜냐하면 CSS처리기가
스타일을 적용할 때는

00:04:02.530 --> 00:04:04.095
아직 없는 것에도
가능하기 때문이죠

00:04:04.095 --> 00:04:06.246
그게 보이면
적용할 거에요

00:04:06.246 --> 00:04:09.909
하지만 자바스크립트
DOM은 그렇지 못해요

00:04:09.909 --> 00:04:12.973
그러니까 여기 아래에
넣도록 해요

00:04:12.973 --> 00:04:16.357
에 추가하는 것은
다음에 해볼 거에요

00:04:16.357 --> 00:04:18.916
먼저 이걸 아래에
놓도록 해요

00:04:18.916 --> 00:04:24.245
그러면 제가 이 부분에 대해
더 많이 설명해드릴게요