0:00:00.737,0:00:06.762
이것처럼 기본적인 페이지는[br]HTML태그로 만들어져있어요

0:00:06.762,0:00:09.180
웹페이지에[br]스타일을 주고 싶을 때

0:00:09.180,0:00:12.180
CSS를[br]어떻게 넣을까요?

0:00:12.180,0:00:14.397
태그를[br]추가하면 돼요

0:00:14.397,0:00:17.349
그리고 브라우저가[br]'style'태그를 보면

0:00:17.349,0:00:20.195
CSS 처리기를 써서[br]그 태그를 처리해요

0:00:20.195,0:00:23.383
보통은 안에[br]태그를 넣어요

0:00:23.383,0:00:27.352
왜냐하면 브라우저가[br]스타일을 처리할 때

0:00:27.352,0:00:30.959
HTML태그가 오기 전에[br]처리하길 원하니까요

0:00:30.959,0:00:35.326
만약 여기 아래에[br]을 넣으면

0:00:35.326,0:00:37.927
'스.적.않.내'를[br]보게 돼요

0:00:37.927,0:00:40.277
'스타일이 적용되지[br]않은 내용'을요

0:00:40.277,0:00:44.726
그러면 사람들은 페이지가[br]벌거벗은 걸 보게 되잖아요!

0:00:44.726,0:00:48.484
원래 있어야 하는 곳으로[br]돌려 놓을게요

0:00:48.484,0:00:51.734
좋아요 이제 페이지에[br]스타일이 적용되었어요

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

0:00:57.954,0:01:01.255
그러려면[br]태그를 넣으세요

0:01:01.255,0:01:04.385
태그를[br]넣을 가장 좋은 곳은

0:01:04.385,0:01:10.517
페이지의 가장 아래의[br]태그 바로 뒤에요

0:01:10.517,0:01:15.150
여기에 넣었는데[br]이따가 설명해줄게요

0:01:15.150,0:01:20.084
태그 안에는[br]무엇을 넣을 수 있을까요?

0:01:20.084,0:01:25.354
유효한 자바스크립트를 넣어요[br]'var four = 2+2;' 처럼요

0:01:25.354,0:01:27.854
하지만 아주[br]재미있지는 않아요

0:01:27.854,0:01:30.176
페이지 상에는[br]아무 일도 일어나지 않으니까요

0:01:30.176,0:01:31.732
칸 아카데미에서[br]공부하고 있다면

0:01:31.732,0:01:35.026
4가 2 더하기 2라는 건[br]이미 알고 있을거에요

0:01:35.026,0:01:37.982
이게 작동한다는 것을[br]보려면

0:01:37.982,0:01:42.092
이 코드를[br]써야해요

0:01:42.092,0:01:45.350
좋아요[br]아무 것도 안 보이죠?

0:01:45.350,0:01:49.447
아마 이 함수를 본 적이[br]없기 때문일 거에요

0:01:49.447,0:01:52.340
'console.log'는[br]특별한 함수인데

0:01:52.340,0:01:54.720
많은 자바스크립트 환경에서[br]사용할 수 있어요

0:01:54.720,0:01:56.326
브라우저를[br]포함해서요

0:01:56.326,0:01:59.490
그러면 자바스크립트 콘솔에[br]뭔가가 나올 거에요

0:01:59.490,0:02:01.651
여러분의 브라우저에서[br]이 콘솔을 찾을 수 있어요

0:02:01.651,0:02:10.490
Cmd+Opt+i나[br]Ctrl+Opt+i를 누르면 돼요

0:02:10.490,0:02:14.825
아니면 오른쪽 클릭해서[br]'요소 보기'를 눌러도 돼요

0:02:14.825,0:02:18.839
이 프로그램을 멈추고[br]개발자 콘솔을 띄워서

0:02:18.839,0:02:21.707
저 메시지가[br]나오는 걸 보세요

0:02:21.707,0:02:24.599
해봤어요?[br]좋아요!

0:02:24.599,0:02:26.656
이제 원하면[br]콘솔을 닫아도 돼요

0:02:26.656,0:02:28.580
자리를 많이[br]차지하고 있으니까요

0:02:28.580,0:02:32.962
약간 거슬릴 수도 있어요[br]쓰고있을 때 에러를 모두 보여주거든요

0:02:32.962,0:02:35.515
하지만 디버깅할 때는[br]좋은 도구에요

0:02:35.515,0:02:38.359
그러니까 도구 상자에[br]집어 넣어두세요

0:02:38.359,0:02:42.325
이제 자바스크립트로[br]뭔가를 해볼거에요

0:02:42.325,0:02:46.540
아직 무슨 뜻인지는 모르겠지만[br]몇 줄의 코드를 써볼거에요

0:02:46.540,0:02:55.790
'document.body.innerHTML = [br]"와! 네 페이지에 들어왔지롱!";'

0:02:57.091,0:02:58.646
어떻게 됐는지[br]봤어요?

0:02:58.646,0:03:03.128
페이지가 사라졌고[br]해커 메시지로 대체됐어요

0:03:03.128,0:03:07.895
이 코드가 어떻게 작동하는지는[br]다음에 알아볼 거에요

0:03:07.895,0:03:12.219
이 코드는 태그를 찾아서[br]그 속의 내용을 바꿨어요

0:03:12.219,0:03:16.530
이 태그를 넣었을 때[br]무슨 일이 일어날까요?

0:03:16.530,0:03:20.963
그리고 에[br]와 함께 넣는다면요?

0:03:20.963,0:03:24.145
작동하지 않을 거에요[br]왜일까요?

0:03:24.145,0:03:26.861
페이지는 태그를[br]먼저 검증하게 돼요

0:03:26.861,0:03:29.093
태그를[br]보기 전에 말이죠

0:03:29.093,0:03:35.208
그럼 페이지는 "앗 나는 아직[br]'document.body'를 보지도 못했어"

0:03:35.208,0:03:38.494
"근데 이걸 수정하려고 하다니![br]그런 건 안 돼" 라고 하겠죠

0:03:38.494,0:03:43.762
그래서 태그를[br]페이지 마지막에 둬야해요

0:03:43.762,0:03:46.861
그래서 웹페이지가[br]를 먼저 보고

0:03:46.861,0:03:51.219
그 안의 내용을 모두 본 후[br]거기에다 뭔가를 하게 돼요

0:03:51.219,0:03:54.809
먼저 웹페이지가[br]존재하게 해야하는 거죠

0:03:54.809,0:03:56.672
그게 CSS와[br]다른 점이에요

0:03:56.672,0:03:58.976
태그는[br]처음에 넣어야해요

0:03:58.976,0:04:02.530
왜냐하면 CSS처리기가[br]스타일을 적용할 때는

0:04:02.530,0:04:04.095
아직 없는 것에도[br]가능하기 때문이죠

0:04:04.095,0:04:06.246
그게 보이면[br]적용할 거에요

0:04:06.246,0:04:09.909
하지만 자바스크립트[br]DOM은 그렇지 못해요

0:04:09.909,0:04:12.973
그러니까 여기 아래에[br]넣도록 해요

0:04:12.973,0:04:16.357
에 추가하는 것은[br]다음에 해볼 거에요

0:04:16.357,0:04:18.916
먼저 이걸 아래에[br]놓도록 해요

0:04:18.916,0:04:24.245
그러면 제가 이 부분에 대해[br]더 많이 설명해드릴게요