Q1: HTML에서 외부 JavaScript 파일을 연결하려면 어떤 태그를 사용하나요?
A1: ``
Q3: ``
Q5: 외부 JavaScript 파일을 연결할 때 태그는 닫아야 하나요?
A5: HTML5에서는 ``)를 포함해야 합니다. 따라서 `` 형태로 작성해야 합니다.
Q6: 외부 파일 경로가 상대경로일 때 주의할 점은?
A6: `src` 경로는 HTML 파일이 위치한 기준으로 상대경로를 지정해야 하며, 정확한 경로를 설정하지 않으면 파일을 불러오지 못합니다.
Q7: HTML ``
---
요약 예시
```html
외부 JS 연결 예제
안녕하세요
```
HTML 문서에서 외부 JavaScript 파일을 연결하는 방법은 <a href='https://sangseek.com/sangseeks/`<script>`/ko'>`<script>`</a> 태그를 사용하는 것입니다. 이 방법은 웹 페이지의 기능을 확장하고, 코드의 재사용성을 높이며, 페이지 로딩 속도를 개선하는 데 유용합니다. 아래에서는 외부 JavaScript 파일을 연결하는 방법에 대해 자세히 설명하겠습니다. 1. 기본 구조 HTML 문서에서 외부 JavaScript 파일을 연결하려면 `<script>` 태그의 `src` 속성을 사용합니다. `src` 속성에는 연결할 JavaScript 파일의 경로를 지정합니다. 기본적인 구조는 다음과 같습니다: ```html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>외부 JavaScript 연결 예제</title> <script src="path/to/your/script.js"></script> </head> <body> <h1>안녕하세요, 세계!</h1> </body> </html> ``` 위의 예제에서 `path/to/your/script.js`는 연결할 JavaScript 파일의 경로입니다. 이 경로는 상대 경로 또는 절대 경로일 수 있습니다. 2. <a href='https://sangseek.com/sangseeks/경로 지정/ko'>경로 지정</a> - 상대 경로 : 현재 HTML 파일의 위치를 기준으로 경로를 지정합니다. 예를 들어, HTML 파일과 JavaScript 파일이 같은 디렉토리에 있을 경우 `src="script.js"`로 지정할 수 있습니다. - 절대 경로 : 웹 서버의 루트 디렉토리부터 시작하는 경로를 지정합니다. 예를 들어, `src="/scripts/script.js"`와 같이 사용할 수 있습니다. - URL : 외부 서버에 호스팅된 JavaScript 파일을 사용할 경우 URL을 직접 지정할 수 있습니다. 예를 들어, `src="https://example.com/script.js"`와 같이 사용할 수 있습니다. 3. `<script>` 태그의 위치 JavaScript 파일을 HTML 문서에 연결할 때 `<script>` 태그의 위치는 중요합니다. 일반적으로 두 가지 위치에서 사용할 수 있습니다: - <a href='https://sangseek.com/sangseeks/`<head>`/ko'>`<head>`</a> 섹션 : `<head>` 섹션에 `<script>` 태그를 추가하면, 페이지가 로드될 때 JavaScript가 먼저 로드됩니다. 그러나 이 경우 DOM이 완전히 로드되기 전에 스크립트가 실행될 수 있으므로, DOM 요소에 접근할 때 문제가 발생할 수 있습니다. 이를 방지하기 위해 <a href='https://sangseek.com/sangseeks/`defer`/ko'>`defer`</a> 또는 `async` 속성을 사용할 수 있습니다. ```html <head> <script src="script.js" defer></script> </head> ``` - <a href='https://sangseek.com/sangseeks/`<body>`/ko'>`<body>`</a> 섹션의 끝 : `<body>` 태그의 끝 부분에 `<script>` 태그를 추가하면, HTML 문서의 모든 요소가 로드된 후 JavaScript가 실행됩니다. 이는 DOM 요소에 안전하게 접근할 수 있는 방법입니다. ```html <body> <h1>안녕하세요, 세계!</h1> <script src="script.js"></script> </body> ``` 4. `defer`와 `async` 속성 - `defer` : 이 속성을 사용하면 스크립트가 비동기적으로 로드되며, HTML 문서가 완전히 파싱된 후에 실행됩니다. 여러 개의 스크립트가 있을 경우, 순서대로 실행됩니다. ```html <script src="script1.js" defer></script> <script src="script2.js" defer></script> ``` - `async` : 이 속성을 사용하면 스크립트가 비동기적으로 로드되며, HTML 문서의 파싱과 동시에 실행됩니다. 여러 개의 스크립트가 있을 경우, 로드된 순서에 따라 실행되므로, 실행 순서가 보장되지 않습니다. ```html <script src="script.js" async></script> ``` 5. 결론 HTML 문서에서 외부 JavaScript 파일을 연결하는 것은 웹 개발에서 매우 중요한 부분입니다. `<script>` 태그를 사용하여 JavaScript 파일을 연결할 때는 경로 지정, 태그 위치, 속성 사용 등을 고려해야 합니다. 이러한 요소들을 적절히 활용하면 웹 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다.
