HTML 페이지에 인라인 JavaScript를 포함하는 방법

인라인 JavaScript란 무엇인가?

JavaScript를 HTML 문서에서 사용하는 가장 일반적인 방법은 <script>...</script> 태그를 활용하거나 외부 JavaScript 파일을 불러오는 것입니다. 그런데 이 두 가지 방법 외에도, HTML 페이지 내부에 JavaScript 코드를 직접 작성하는 인라인(inline) 방식이 존재합니다.

onClick 이벤트 속성에 코드 직접 작성하기

일반적으로 HTML의 이벤트 속성(event attribute)은 script 태그 안에 미리 정의해 둔 함수를 호출하는 용도로 사용됩니다. 하지만 굳이 별도의 함수를 만들지 않고, onClick 같은 이벤트 속성 안에 JavaScript 코드를 곧바로 넣을 수도 있습니다.

아래 예제는 링크를 클릭하면 'Hello World'라는 경고창(alert)이 뜨도록 onClick 속성에 코드를 직접 작성한 인라인 방식입니다.

<p>
   <a href="#" onClick="alert('Hello World');">
      Click
   </a>
</p>

위 코드를 실행한 후 'Click'이라는 링크를 누르면, 별도의 함수 정의 없이 즉시 경고창이 화면에 나타나는 것을 확인할 수 있습니다.

인라인 JavaScript 사용 시 주의사항

참고: 인라인 JavaScript는 코딩 표준(coding standards) 측면에서 좋은 practice로 여겨지지 않습니다. HTML 구조와 동작 로직이 섞여 유지보수가 어려워지고, 코드 재사용성도 떨어지기 때문입니다. 따라서 실무에서는 이 방식을 따르기보다, script 태그에 함수를 정의하거나 외부 파일로 분리하는 방식을 사용하는 것이 바람직합니다.