[JS]JS는 왜 필요한가? HTML/CSS만으로 안 되는 것들

🌟 JS는 왜 필요한가?
─ HTML/CSS만으로는 할 수 없는 것들

웹 퍼블리셔로 시작하면 처음에는 HTML과 CSS만으로도 꽤 많은 걸 만들 수 있습니다
레이아웃도 짜고, 버튼도 만들고, 반응형 디자인도 할 수 있죠

하지만… 어느 순간, 한계가 찾아옵니다
예를 들어 이런 질문이 생기기 시작하죠

“버튼을 눌렀을 때 팝업을 띄우고 싶은데… CSS로만 되나?”
“스크롤 내리면 요소가 부드럽게 등장하면 좋겠는데… 어떻게 하지?”
“사용자가 입력한 값을 실시간으로 확인하려면?”

이럴 때 등장하는 게 바로 JavaScript입니다

📌 HTML/CSS와 JS의 역할 구분

구분	역할	예시
HTML	구조	제목, 이미지, 버튼, 입력창 등
CSS	스타일	색상, 폰트, 여백, 애니메이션 등
JS	동작 & 상호작용	버튼 클릭 시 동작, 팝업, 자동 슬라이드 등

🛠️ HTML/CSS만으로 안 되는 대표적인 예

① 버튼을 눌렀을 때 팝업 띄우기

<!-- HTML -->
<button id="openBtn">팝업 열기</button>
<div id="popup" style="display: none;">이건 팝업이에요!</div>

// JS
document.getElementById('openBtn').addEventListener('click', function() {
  document.getElementById('popup').style.display = 'block';
});

② 실시간 입력값 표시

<input type="text" id="nameInput" placeholder="이름을 입력하세요" />
<p>안녕하세요, <span id="userName"></span>님!</p>

document.getElementById('nameInput').addEventListener('input', function(e) {
  document.getElementById('userName').textContent = e.target.value;
});

③ 스크롤 시 애니메이션 실행

사용자가 페이지를 내릴 때 특정 요소가 페이드인처럼 등장하는 효과는
IntersectionObserver, scroll 이벤트, class 추가 등의 JS 동작이 필요합니다

📌 마무리

HTML과 CSS만으로도 멋진 정적 웹사이트를 만들 수 있지만,
웹사이트가 더 살아 움직이게 하려면
JavaScript는 필수 도구입니다

앞으로 글에서는 퍼블리셔가 실무에서 자주 마주치는 예제를 중심으로
HTML, CSS, JS가 어떻게 어울려 동작하는지 함께 다뤄보겠습니다!