TIL - 20260411

juni·2026년 4월 11일

목록 보기

319/468

0411 웹 개발 기초 최종 정리: HTML, CSS, JavaScript의 상호작용

현대적인 웹 페이지는 세 가지 핵심 기술의 조합으로 만들어집니다. 이들의 역할을 명확히 분리(Separation of Concerns)하고, 각자의 역할에 충실하게 한 후 협력하도록 만드는 것이 유지보수하기 좋은 코드를 작성하는 첫걸음입니다.

기술	역할	설명	비유
HTML	구조 (Structure)	웹 페이지의 뼈대를 잡고, 콘텐츠의 의미를 정의합니다.	건물의 골조, 사람의 뼈
CSS	스타일 (Presentation)	HTML로 만들어진 구조에 디자인과 레이아웃을 입힙니다.	건물의 인테리어, 사람의 옷
JavaScript	동작 (Behavior)	사용자의 상호작용에 반응하고, 콘텐츠를 동적으로 변경합니다.	건물의 엘리베이터, 사람의 움직임

[HTML] 구조 설계:
- 먼저 웹 페이지에 어떤 콘텐츠가 들어갈지 구상하고, 시맨틱 태그(<header>, <main>, <footer> 등)를 사용하여 의미론적으로 올바른 HTML 구조를 작성합니다.
- 각 요소에는 CSS와 JavaScript에서 쉽게 선택할 수 있도록 적절한 id나 class를 부여합니다.
[CSS] 스타일링:
- 작성된 HTML 구조를 바탕으로, CSS 선택자를 사용하여 각 요소를 선택하고 스타일을 적용합니다.
- Flexbox나 Grid와 같은 현대적인 레이아웃 시스템을 사용하여 전체적인 페이지 레이아웃을 구성합니다.
- box-sizing: border-box;를 적용하여 예측 가능한 레이아웃을 만듭니다.
[JavaScript] 동적 기능 구현:
- 정적인 HTML/CSS 페이지에 상호작용을 추가합니다.
- DOM API (querySelector)를 사용하여 동작을 추가할 HTML 요소를 선택합니다.
- 이벤트 리스너 (addEventListener)를 등록하여 사용자의 행동(클릭, 입력 등)을 감지합니다.
- 이벤트가 발생하면, DOM을 조작하여(textContent, classList 등) UI에 즉각적인 피드백을 주거나, fetch API를 사용하여 서버와 통신합니다.

DOM 선택: document.querySelector() 등을 사용하여 조작하고 싶은 HTML 요소를 JavaScript 변수에 할당합니다.
이벤트 리스닝: element.addEventListener('click', handlerFunction)을 사용하여, 특정 요소에 발생하는 이벤트(e.g., 'click')를 감지하고, 이벤트 발생 시 실행될 함수(핸들러)를 등록합니다.
이벤트 핸들러 함수 실행: 이벤트가 발생하면, 등록된 핸들러 함수가 실행됩니다. 이 함수 내에서 다음과 같은 작업이 이루어집니다.
- UI 변경: 요소의 텍스트(textContent), 클래스(classList), 스타일(style) 등을 변경하여 사용자에게 즉각적인 시각적 피드백을 줍니다.
- 서버 통신 (AJAX): fetch API와 async/await를 사용하여, 페이지 새로고침 없이 서버로부터 데이터를 가져오거나(GET) 서버에 데이터를 전송(POST)합니다.
- 데이터 렌더링: 서버로부터 받은 데이터(JSON 형식)를 기반으로 새로운 HTML 요소를 생성(createElement)하고, 화면에 추가(appendChild)하여 콘텐츠를 동적으로 업데이트합니다.

[HTML] 댓글 입력창(<input>), 전송 버튼(<button>), 댓글 목록(<ul>)을 작성합니다.
[JavaScript] querySelector로 위 세 요소를 모두 선택합니다.
[JavaScript] 전송 버튼에 click 이벤트 핸들러를 등록합니다.
[JavaScript] 클릭 이벤트 핸들러 함수가 실행되면:
a. 입력창의 값(input.value)을 가져옵니다.
b. (서버 통신) fetch를 사용하여 서버의 "댓글 생성 API"에 입력값을 POST 방식으로 전송합니다.
c. (DOM 조작) 서버로부터 성공 응답을 받으면, createElement('li')로 새로운 <li> 요소를 만듭니다.
d. 새 <li>의 textContent를 입력값으로 설정하고, 댓글 목록 <ul>에 appendChild하여 화면에 즉시 새로운 댓글을 추가합니다.
e. 입력창의 값을 비웁니다.

웹 프론트엔드 개발은 HTML로 구조를 만들고, CSS로 스타일을 입힌 후, JavaScript로 동작을 구현하는 과정입니다.
JavaScript는 DOM API를 통해 HTML 요소를 선택하고 조작하며, 이벤트 리스너를 통해 사용자의 상호작용을 감지합니다.
AJAX (fetch API) 기술을 사용하여 페이지 새로고침 없이 서버와 JSON 데이터를 주고받고, 그 결과를 바탕으로 DOM을 동적으로 변경하는 것이 현대적인 인터랙티브 웹 페이지의 핵심 동작 원리입니다.
이 세 가지 기술의 역할과 상호작용을 명확히 이해하는 것이 모든 프론트엔드 개발의 가장 중요한 기초입니다.