1. 태그 <script>
HTML을 자세히 배우기 전에, 한 가지 멋진 것을 소개하고 싶어 — JavaScript라는 언어야.
JavaScript는 강력한 프로그래밍 언어로, 동적이고 인터랙티브한 웹페이지를 만들 때 사용돼. 사용자 액션에 반응하고, 웹 페이지 내용을 변경하고, 서버와 상호작용하고 등등, 사용자 경험을 향상시키는 방법이 아주 많아.
지금은 JavaScript를 공부하진 않을 건데, 간혹 예제에서 사용하게 될 거야. 그래서 어떻게 HTML 문서에 JavaScript를 삽입하는지 알려줄게.
<script> 태그는 HTML 문서에 JavaScript 코드를 삽입할 때 사용해.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 소개</title>
</head>
<body>
<h1>내 웹사이트에 온걸 환영해!</h1>
<script>
// 여기에 JavaScript 코드를 작성해봐 alert('안녕, 세상!');
</script>
</body>
</html>
이 예제에서는 <script> 태그를 사용해서 간단한 JavaScript 코드를 삽입했어. 그 코드는 사용자에게 "안녕, 세상!" 메시지를 보여주는 팝업창을 띄워.
2. 스크립트 연결하기
가끔은 JavaScript 코드를 별도의 파일에 저장하는 게 더 나을 때가 있어. 이렇게 하면 코드 관리를 더 쉽게 할 수 있고, 코드 재사용도 가능해져. 이런 JavaScript 파일을 연결하려면 마찬가지로 <script> 태그를 사용하고, src 속성으로 JavaScript 파일 이름을 지정하면 돼.
외부 JavaScript 파일 연결하기:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 소개</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>내 웹사이트에 온걸 환영해!</h1>
</body>
</html>
이 HTML 파일은 브라우저에 "script.js"라는 JavaScript 파일을 연결하라고 요청해. 이 파일은 이전 예제와 같은 코드를 포함할 수 있어:
//script.js:
// 여기에 JavaScript 코드를 작성해봐
alert('안녕, 세상!');
defer 속성은 브라우저에 HTML 문서가 완전히 로드되고 표시된 뒤 스크립트를 실행하라고 알려줘.
3. 인라인 코드
우리가 style 속성을 사용해서 CSS 스타일을 요소에 바로 작성했던 거 기억나?
<p style="color:red"> 빨강색</p>
JavaScript 코드도 똑같이 쓸 수 있어.
예를 들어, 사용자가 요소를 클릭했을 때 해당 요소의 색상을 파란색으로 바꾸고 싶다면, 다음과 같은 코드를 작성해야 해:
<p style="color:red" onclick="this.style.color = 'blue';">빨강색</p>
여기 녹색으로 표시된 부분이 JavaScript 코드야. 사용자가 <p> 요소를 클릭하면 실행돼. 정말 간단하지?
-
onclick: HTML 속성으로, 요소 클릭 시 실행되는 함수를 지정해. this: 클릭된 요소를 참조해.-
style.color: 요소의 텍스트 색상을 변경하는 CSS 속성이야.
GO TO FULL VERSION