수정하기 - HTML에서 `<script>` 태그를 사용하여 외부 JavaScript 파일을 연결하는 방법은?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

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 파일을 연결할 때는 경로 지정, 태그 위치, 속성 사용 등을 고려해야 합니다. 이러한 요소들을 적절히 활용하면 웹 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다.