Skip to content

Commit 90beb7f

Browse files
tonypark-cwViolet-Bora-Lee
authored andcommitted
[script 태그에 대한 설명] 수정
1 parent f098812 commit 90beb7f

File tree

1 file changed

+18
-24
lines changed

1 file changed

+18
-24
lines changed

1-js/02-first-steps/01-hello-world/article.md

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,26 @@
66

77
먼저, 웹 페이지에 스크립트를 삽입하는 방법에 대해 알아봅시다. 참고로 Node.js와 같은 서버 사이드 환경에서 스크립트를 실행하고 싶다면 `'node my.js'`와 같은 명령어를 사용하면 됩니다.
88

9-
109
## 'script' 태그
1110

12-
`<script>` 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 어느 곳에나 삽입할 수 있습니다.
11+
`<script>` 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있습니다.
1312

1413
예시:
1514

1615
```html run height=100
17-
<!DOCTYPE HTML>
16+
<!DOCTYPE html>
1817
<html>
18+
<body>
19+
<p>스크립트 전</p>
1920

20-
<body>
21-
22-
<p>스크립트 전</p>
23-
24-
*!*
25-
<script>
26-
alert( 'Hello, world!' );
27-
</script>
28-
*/!*
29-
30-
<p>스크립트 후</p>
31-
32-
</body>
21+
*!*
22+
<script>
23+
alert("Hello, world!");
24+
</script>
25+
*/!*
3326

27+
<p>스크립트 후</p>
28+
</body>
3429
</html>
3530
```
3631

@@ -40,16 +35,15 @@
4035

4136
`<script>` 태그엔 자바스크립트 코드가 들어갑니다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리합니다.
4237

43-
4438
## 모던 마크업
4539

4640
`<script>` 태그엔 몇 가지 속성(attribute)이 있습니다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있습니다.
4741

4842
`type` 속성: <code>&lt;script <u>type</u>=...&gt;</code>
49-
: HTML4에선 스크립트에 `type`을 명시하는 것이 필수였습니다. 따라서 `type="text/javascript"` 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있습니다. 모듈은 심화 내용이기 때문에 다른 파트에서 다시 이야기하도록 하겠습니다.
43+
: HTML4에선 스크립트에 `type`을 명시하는 것이 필수였습니다. 따라서 `type="text/javascript"` 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있습니다. 모듈은 심화 내용이기 때문에 다른 파트에서 다시 이야기하도록 하겠습니다.
5044

51-
`language` 속성: <code>&lt;script <u>language</u>=...&gt;</code>
52-
: 이 속성은 현재 사용하고 있는 스크립트 언어를 나타냅니다. 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색된 상황입니다. 더는 사용할 필요가 없어졌죠.
45+
`language` 속성: <code>&lt;script <u>language</u>=...&gt;</code>
46+
: 이 속성은 현재 사용하고 있는 스크립트 언어를 나타냅니다. 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색된 상황입니다. 더는 사용할 필요가 없어졌죠.
5347

5448
스크립트 전후에 위치한 주석
5549
: 아주 오래된 책과 가이드에서는 다음과 같이 `<script>` 태그 안에 주석이 존재하는 걸 볼 수 있습니다.
@@ -62,7 +56,6 @@
6256

6357
모던 자바스크립트에선 이런 트릭을 사용하지 않습니다. 태그 옆에 붙은 주석은 `<script>` 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었죠. 지난 15년간 출시된 브라우저는 `<script>` 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 코드라는 사실을 알 수 있습니다.
6458

65-
6659
## 외부 스크립트
6760

6861
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다.
@@ -99,8 +92,7 @@ HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가
9992
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.
10093
```
10194

102-
````warn header="`src` 속성이 있으면 태그 내부의 코드는 무시됩니다."
103-
`<script>` 태그는 `src` 속성과 내부 코드를 동시에 가지지 못합니다.
95+
````warn header="`src`속성이 있으면 태그 내부의 코드는 무시됩니다."`<script>`태그는`src` 속성과 내부 코드를 동시에 가지지 못합니다.
10496

10597
다음 코드는 실행되지 않습니다.
10698

@@ -120,7 +112,8 @@ HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가
120112
alert(1);
121113
</script>
122114
```
123-
````
115+
116+
```
124117
125118
## 요약
126119
@@ -130,3 +123,4 @@ HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가
130123
131124
132125
브라우저 환경에서의 스크립트, 스크립트와 웹 페이지의 상호작용에 대해서는 배울 것이 훨씬 더 많습니다. 하지만 본 튜토리얼의 이 파트는 자바스크립트라는 언어 자체에 초점을 맞추고 있기 때문에, 브라우저에서만 사용하는 코드에 주의를 뺏기지 않도록 하겠습니다. 브라우저는 온라인상에서 편리하게 자바스크립트를 실행할 수 있게 해주는 수단으로만 사용하도록 하겠습니다.
126+
```

0 commit comments

Comments
 (0)