TIL - 20251209

juni·2025년 12월 9일

목록 보기

202/316

1209 웹 프론트엔드 기초 종합 복습: HTML, CSS, JavaScript

현대적인 웹 페이지는 세 가지 핵심 기술의 조합으로 만들어집니다. 이들의 역할을 명확히 분리하는 것이 유지보수하기 좋은 코드를 작성하는 첫걸음입니다.

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

HTML (HyperText Markup Language)은 태그(Tag)를 사용하여 문서의 구조를 만듭니다.
시맨틱 웹 (Semantic Web)의 중요성: <div> 태그만으로 모든 구조를 짜는 대신, <header>, <nav>, <main>, <article>, <footer>와 같이 의미에 맞는 시맨틱 태그를 사용해야 합니다.
- 이점: 검색 엔진 최적화(SEO), 웹 접근성 향상, 코드 가독성 증대.
주요 태그 복습:
- 블록 레벨 요소: <div>, <p>, <h1>, <ul> (한 줄 전체를 차지)
- 인라인 요소: <span>, <a>, <img>, <strong> (콘텐츠 크기만큼만 차지)
- 폼 요소: <form>, <input>, <button>, <label> (사용자 입력을 받기 위함)

CSS (Cascading Style Sheets)는 선택자(Selector)를 통해 특정 HTML 요소를 선택하고, 속성(Property)을 통해 스타일을 적용합니다.
핵심 개념 복습:
1. 선택자:
  - 클래스 선택자 (.class-name): 가장 보편적이고 재사용성이 높은 방식.
  - ID 선택자 (#id-name): 페이지 내에서 유일한 요소에만 사용.
  - 자손/자식 선택자 (div p, ul > li): 특정 요소 하위의 요소를 선택.
2. 박스 모델 (Box Model):
  - 모든 요소는 Content → Padding → Border → Margin 순서의 사각형 박스로 구성됩니다.
  - box-sizing: border-box;: width와 height 계산에 Padding과 Border를 포함시켜 레이아웃 설계를 직관적으로 만듭니다. (CSS 초기화 시 필수적으로 적용)
3. Flexbox 레이아웃:
  - display: flex;를 부모 요소(Container)에 적용하여, 자식 요소(Items)들을 1차원(가로 또는 세로)으로 쉽고 유연하게 정렬하는 현대적인 레이아웃 시스템입니다.
  - justify-content (주 축 정렬), align-items (교차 축 정렬) 속성이 핵심입니다.

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

[HTML] <button id="like-btn">좋아요</button> 와 <span id="like-count">0</span> 태그를 작성합니다.
[JavaScript] querySelector로 버튼과 스팬 요소를 선택합니다.
[JavaScript] addEventListener를 사용하여 버튼에 click 이벤트 핸들러를 등록합니다.
[JavaScript] 클릭 이벤트 핸들러 함수가 실행되면:
a. (서버 통신) fetch를 사용하여 서버에 "좋아요" 요청을 보냅니다.
b. (DOM 조작) 서버로부터 성공 응답을 받으면, 스팬 요소의 textContent를 1 증가시켜 화면에 즉시 반영합니다.

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