HTML과 JavaScript의 관계, 쉽게 이해해보기
우리가 보는 웹페이지의 진짜 구성 이야기
웹 개발을 막 시작한 분들이라면 한 번쯤 이런 생각이 드셨을 거예요:
“웹페이지 소스를 보면 왜 HTML이랑 JavaScript가 섞여 있지?”
“HTML이 언어라는데 JavaScript는 또 뭐야?”
“같은 코드 안에 두 언어가 들어가는 게 맞는 걸까?”
오늘은 이런 궁금증을 정리해보고,HTML과 JavaScript가 어떻게 함께 작동하는지쉽고 명확하게 알아보겠습니다.
프론트엔드 개발을 처음 시작하면 가장 먼저 마주하게 되는 코드가 바로 아래와 같은 HTML과 JavaScript 조합입니다. 이 글에서는 HTML과 Javascript가 어떻게 상호작용을 하는 지 코드를 통해서 이해해보도록 하겠습니다!
처음 보면 복잡해 보일 수 있지만, 사실은 웹페이지에 "안녕하세요."라는 글자를 출력하는 아주 간단한 구조입니다. 이제 이 코드를 한 줄씩 뜯어보며 어떤 역할을 하는지 알아보겠습니다. 먼저 "안녕하세요" 라는 말을 출력을 하기 전에 앞에 body부터 시작해서 코드들이 많아서 헷갈리는 경우가 많았습니다. 코딩할 때 코드들은 필요없는데 있는 경우는 없고 나름대로의 의미를 가지고 있었습니다. 함께 어떤 의미인지 하나씩 보겠습니다.
<body> ... </body>란? (이건 HTML 코드! )
HTML 문서에서 <body> 태그는 화면에 실제로 표시되는 모든 요소가 들어가는 영역을 표시해주는 신호에요. - 이 부분은 html 코드에요.
- 웹페이지의 텍스트, 이미지, 버튼, 입력창 등은 모두 이 <body> 태그 안에 포함됩니다.
- 여기에서는 <p> 태그와 <script> 태그가 포함되어 있네요.
<p id="show"></p>의 역할은? (이것도 HTML 코드! )
이 줄은 다음과 같은 의미를 가집니다.
- <p>: 문단(paragraph)을 나타내는 HTML 태그로, 기본적으로 텍스트를 보여주는 용도입니다.
- id="show": 이 태그에 "show"라는 이름표(아이디)를 붙여줍니다.
- 이 id는 JavaScript에서 이 태그를 지정해서 조작하기 위한 주소와 같은 역할을 합니다. 지금은 비어 있지만, JavaScript를 통해 이 안에 글자를 넣을 수 있습니다.
<script> ... </script>는 무엇인가요? - 여기서부터 자바스크립트가 시작됩니다!
<script> 태그 안에는 JavaScript 코드가 들어갑니다.
브라우저는 이 안의 코드를 읽고 실행합니다.
자, 그 안의 코드를 하나하나 살펴볼까요?
let str1 = "안녕하세요.";
이 코드는 다음을 의미합니다:
- let: 변수를 선언할 때 사용합니다. "상자 하나 만들게!"라는 뜻이에요.
- str1: 변수 이름입니다. 마음대로 지을 수 있지만 의미 있게 짓는 것이 좋습니다.
- "안녕하세요.": 변수에 담긴 실제 문자열(텍스트)입니다.
- =: 변수에 값을 넣어주는 역할을 합니다. 즉, "안녕하세요."라는 문장을 str1이라는 변수에 담아두는 것이죠.
document.getElementById("show").innerText = str1;
이 줄은 조금 길지만, 동작은 단순합니다.
| document | 현재 웹페이지(HTML 문서) 전체를 가리킵니다 |
| .getElementById("show") | HTML 문서에서 id="show"인 요소를 찾아옵니다 |
| .innerText | 해당 요소 안에 들어갈 텍스트를 의미합니다 |
| = str1 | 앞에서 만든 "안녕하세요." 값을 넣어줍니다 |
결국 이 코드는 이렇게 해석됩니다: “웹페이지 안에 id="show"인 태그를 찾아서, 그 안에 "안녕하세요."라는 글자를 넣어줘!”
코드 전체 흐름을 간단히 정리해 볼게요:
- "안녕하세요."라는 문자열을 변수 str1에 저장
- <p id="show"></p> 태그를 JavaScript로 찾아냄
- 그 안에 str1의 값을 삽입해서 텍스트로 표시
HTML, CSS, JavaScript는 모두 다른 언어
웹페이지는 단 하나의 언어로만 만들어지지 않아요.
보통 3개의 언어가 서로의 역할을 나눠서 함께 작동합니다.
| HTML | 웹페이지의 구조(뼈대)를 만듭니다. |
| CSS | 구조에 스타일(색, 크기, 배치 등)을 입힙니다. |
| JavaScript | 웹페이지에 동작과 기능을 추가합니다. |
이렇게 나눠서 생각하면 헷갈리지 않아요.
HTML은 중심, JavaScript는 보조
웹 브라우저(크롬, 사파리 등)는 HTML을 중심으로 웹페이지를 해석합니다.
그래서 HTML 파일 안에 JavaScript를 "끼워 넣는 방식"으로 두 언어를 함께 사용하게 돼요.
즉,
HTML은 웹의 몸,
JavaScript는 웹의 행동(두뇌) 같은 역할을 해요.
이 코드엔 세 가지가 섞여 있어요:
- <p>와 <button>은 HTML (웹 구조)
- onclick="sayHello()"는 HTML에서 JavaScript를 호출하는 부분
- <script> 안의 sayHello() 함수는 JavaScript (동작)
버튼을 누르면 문장이 바뀌는 건 JavaScript의 역할이에요.
HTML 안에 JavaScript가 섞여 있는 이유는?
- HTML은 브라우저가 인식하는 기본 구조입니다.
- 그래서 웹페이지는 항상 HTML을 중심으로 시작합니다.
- 그 안에서 동작이 필요할 때, <script> 태그로 JavaScript를 끼워 넣습니다.
즉, HTML이 웹페이지라는 집이라면,
JavaScript는 그 안에서 움직이는 사람이나 전자기기 같은 존재죠.
그래서 자바스크립트는 동적언어! HTML은 정적인 언어라고 표현하기도 하는거에요.
마무리 요약
- HTML과 JavaScript는 별개의 언어지만, 웹 개발에선 함께 쓰입니다.
- 대부분의 웹페이지는 HTML 구조 안에 JavaScript 코드가 함께 포함되어 있습니다.
- HTML은 구조, JavaScript는 기능을 담당합니다.
- 초반에는 HTML 안에 JavaScript를 섞어서 배우는 것이 자연스럽습니다.