"HTML만으로도 괜찮다고요?
그럼 지금 누르고 있는 이 버튼은 어떻게 반응하죠?"
HTML은 구조이고, CSS는 스타일입니다. 하지만 웹에 생명을 불어넣는 건 JavaScript죠.
단순한 연결을 넘어, 이제는 <script> 하나로 사용자와 소통하는 시대입니다.
오늘은 HTML과 JavaScript를 올바르게 연결하고 활용하는 법을 이야기합니다.
기초부터 실전까지. 지금부터 함께 살펴보죠.
오늘 배울 내용은
HTML에서 JavaScript 연결과 활용입니다.
<script>
alert("배웠다 말았다 다시 시작했다!");
</script>
이건 가장 기본적인 방식입니다. <script> 태그 안에 직접 JS 코드를 작성하면 HTML 문서가 로드될 때 해당 스크립트가 실행됩니다.
하지만 실제 서비스에서는 이런 방식보다는 외부 파일 분리 방식이 더 선호됩니다.
<script src="main.js"></script>
src 속성을 사용하면 외부 JavaScript 파일을 연결할 수 있습니다.
코드 분리, 캐싱, 관리 효율성 등 모든 면에서 이 방식이 낫습니다.
특히 코드량이 많아질수록 JS는 HTML에서 분리하는 것이 모범 구조입니다.
<script src="main.js" defer></script>
defer는 HTML 파싱이 끝난 후 스크립트를 실행하라는 의미입니다. <head> 안에 JS를 넣을 때 자주 사용되며, DOM이 준비되지 않은 상태에서 실행되는 문제를 예방할 수 있습니다. async와의 차이도 중요하니 아래에서 살펴볼게요.
<script src="analytics.js" async></script>
async는 HTML과 병렬로 JS를 불러오고, 로드가 끝나면 바로 실행합니다.
주로 트래킹 코드나 광고 스크립트처럼 DOM에 의존하지 않는 스크립트에 사용됩니다.
두 속성의 차이를 기억하세요:
defer = DOM 후 실행, async = 먼저 끝나는 쪽이 실행.
<button onclick="alert('버튼 클릭됨!')">클릭</button>
onclick은 HTML에서 직접 이벤트를 처리하는 방법입니다.
간단한 테스트용으로는 괜찮지만, 실제 운영에서는 JS 파일에서 이벤트를 등록하는 것이 좋습니다.
구조 분리와 유지보수가 편해지기 때문이죠.
// main.js
document.getElementById("myBtn").addEventListener("click", function() {
alert("자바스크립트로 연결된 버튼");
});
<button id="myBtn">JS로 제어된 버튼</button>
<script src="main.js" defer></script>
addEventListener를 이용하면 HTML은 깔끔하게 유지되면서 JS 코드로 동작을 완벽히 제어할 수 있습니다.
이게 바로 ‘HTML은 구조, JS는 동작’이라는 웹의 철학을 실현하는 방식입니다.
<form id="loginForm">
<input type="text" placeholder="아이디">
<input type="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
// main.js
document.getElementById("loginForm").addEventListener("submit", function(e) {
e.preventDefault();
console.log("폼 제출 이벤트 가로채기");
});
폼 이벤트도 JS로 제어할 수 있어야 유효성 검사, API 요청 등 실질적인 기능을 구현할 수 있습니다.
기본 동작을 막고, 원하는 대로 동작시키는 것. 웹 상호작용의 기본 중 기본이죠.
💡 팁: 스크립트는 항상 </body> 바로 위에 두거나 defer를 사용하세요.
그렇지 않으면 아직 DOM이 그려지지 않아 null 에러가 발생합니다.
초보자도 구조를 지키면 에러 없이 갑니다.
마무리하며 🌿
HTML과 JavaScript는 역할이 다른 두 축이지만, 그 연결 방식이 제대로여야 코드 전체가 안정됩니다.
이벤트, 로딩 타이밍, DOM 제어… 작은 실수가 UI 전체를 무너뜨릴 수 있어요.
기본부터 명확하게 정리해두면, 그 위에 아무 기능이든 얹을 수 있습니다.
👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com
배웠다 말았다 다시 시작했다😎
흥미로운 나만의 홈페이지를 만들기 위한 공간입니다. #Pixel #Art #HTML #CSS #JAVASCRIPT
jjaeho.tistory.com
'HTML,CSS,JavaScript > HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| 🎯 심심풀이 코인 투자 오늘의 운세 웹사이트 만들기 (GPT, CoinMarketCap) (5) | 2025.04.24 |
|---|---|
| [HTML] 이것만 알아도 실수를 줄일 수 있다. (1) | 2025.04.08 |
| [HTML] label 왜 쓰냐고?? (0) | 2025.04.06 |
| [HTML] Hidden 활용으로 숨기기 (0) | 2025.04.06 |
| [HTML] CSS 추가하기 (1) | 2025.04.05 |
