Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML 페이지에 인라인 JavaScript 코드를 작성하는 방법

인라인 JavaScript 코드란?

인라인(Inline) JavaScript 코드란 HTML 파일 안에 별도의 외부 파일을 불러오는 src 속성 없이, <script> 태그 사이에 JavaScript 코드를 직접 작성하는 방식을 의미합니다. 즉, HTML 문서 자체에 스크립트가 포함되어 있으면 그것이 바로 인라인 JavaScript입니다.

기본 사용 예시

<!DOCTYPE html>
<html>
<body>
  <h1>인라인 JavaScript 예제</h1>
  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = "안녕하세요!";
  </script>
</body>
</html>

위 예제처럼 <script></script> 태그 사이에 실행하고 싶은 코드를 작성하면, 브라우저가 HTML을 해석하는 시점에 해당 스크립트가 함께 실행됩니다.

인라인 JavaScript의 특징

  • 간편함: 별도의 .js 파일을 만들거나 연결할 필요 없이 HTML 문서 하나만으로 바로 동작합니다.
  • 빠른 테스트에 적합: 간단한 기능 확인이나 학습용 예제를 작성할 때 유용합니다.
  • 유지보수의 한계: 코드가 길어지면 가독성이 떨어지고 관리가 어려워지므로, 규모가 큰 프로젝트에서는 외부 .js 파일로 분리해 사용하는 것이 권장됩니다.

정리

HTML 파일에 src 태그 없이 JavaScript 코드를 직접 추가하는 것이 바로 인라인 JavaScript 코드입니다. 이 개념 하나만 기억하면 됩니다. 간단한 스크립트에는 인라인 방식으로 충분하지만, 코드량이 많아지면 외부 파일 분리를 고려하는 것이 좋습니다.