HTML/CSS JavaScript

이강현·2025년 8월 10일

HTML / CSS / JavaScript 핵심 개념 정리

HTML (HyperText Markup Language): 웹 페이지의 뼈대와 구조를 정의하는 마크업 언어.
CSS (Cascading Style Sheets): HTML로 만든 구조에 디자인과 스타일을 입히는 스타일 시트 언어.
JavaScript: 웹 페이지에 동적인 기능과 상호작용을 부여하는 프로그래밍 언어.
웹 표준: 모든 브라우저에서 웹 페이지가 동일하게 보이고 동작하도록 하는 권고안 및 규칙.
VS Code 확장 프로그램: 개발 효율을 높이는 도구.
- Live Server: 코드 저장 시 브라우저를 자동으로 새로고침하여 변경사항을 즉시 확인.
- Beautify: 코드의 들여쓰기와 줄 바꿈을 자동으로 정리.
- Auto Rename Tag: 시작 태그를 수정하면 종료 태그도 함께 수정.

<!DOCTYPE html>: 해당 문서가 HTML5 표준에 따라 작성되었음을 브라우저에 알리는 선언.
<html>: 전체 HTML 문서를 감싸는 최상위 요소.
<head>: 문서의 메타데이터를 담는 영역. 페이지 제목(title), CSS 파일 연결, 문자 인코딩 설정 등이 포함됨.
<body>: 사용자에게 실제로 보여지는 모든 콘텐츠를 담는 영역.
경로 (Path)
- 절대 경로: 웹사이트의 루트 디렉토리나 전체 URL을 기준으로 파일의 위치를 나타내는 고유한 경로.
- 상대 경로: 현재 파일을 기준으로 다른 파일의 위치를 나타내는 상대적인 경로.
요소 구분
- 블록 요소 (Block Element): 언제나 새로운 줄에서 시작하며, 사용 가능한 너비 전체를 차지함. (<div>, <p>, <h1> 등)
- 인라인 요소 (Inline Element): 새로운 줄에서 시작하지 않으며, 콘텐츠의 너비만큼만 차지함. (<span>, <a>, <img> 등)

<div>: 특별한 의미가 없는 구획(Division) 요소. 레이아웃을 잡기 위해 영역을 묶는 용도로 주로 사용됨.
<a>: 다른 페이지나 같은 페이지의 특정 위치로 연결하는 하이퍼링크를 만드는 요소.
<img>: 웹 페이지에 이미지를 삽입하는 요소.
<ul>, <ol>, <li>: 각각 순서 없는 목록, 순서 있는 목록, 그리고 목록의 항목을 나타냄.
전역 속성 (Global Attributes): 모든 HTML 요소에 공통으로 사용할 수 있는 속성. (id, class, style 등)

선택자: 스타일을 적용할 HTML 요소를 특정하는 부분.
기본 선택자: * (전체), 태그이름, .클래스이름, #아이디이름.
복합 선택자: 둘 이상의 선택자를 조합하여 더 구체적인 대상을 선택.
- A B: A의 하위에 있는 모든 B.
- A > B: A의 직계 자식인 B.
- A + B: A 바로 다음에 오는 형제 B.
가상 클래스 선택자: 요소의 특별한 상태를 명시할 때 사용. (:hover, :focus, :first-child 등)
가상 요소 선택자: 요소의 특정 부분에 스타일을 입힐 때 사용. (::before, ::after)
선택자 우선순위 (Specificity): 여러 스타일 규칙이 충돌할 때, 어떤 규칙을 적용할지 결정하는 우선순위.
- 순서: !important > 인라인 스타일 > ID > Class/가상클래스/속성 > 태그/가상요소 > *

박스 모델 (Box Model): 모든 HTML 요소를 사각형의 박스로 간주하며, 스타일을 제어하는 개념.
- margin: 테두리(border) 바깥의 여백.
- padding: 테두리(border) 안쪽의 여백.
- border: 콘텐츠와 패딩을 감싸는 테두리.
- box-sizing: 요소의 너비와 높이를 계산하는 방식을 지정.
  - border-box: 너비/높이에 padding과 border를 포함시켜 계산하므로 레이아웃 설계가 매우 편리해짐.
display: 요소를 어떻게 보여줄지 결정하는 속성. (block, inline, flex 등)
position: 요소의 배치 방식을 지정. (static, relative, absolute, fixed, sticky)
Flexbox: 1차원 레이아웃을 위한 모델. 요소 간의 공간 배분과 정렬에 강력한 기능을 제공.
- justify-content: 메인 축(주로 가로) 방향의 정렬 방식.
- align-items: 교차 축(주로 세로) 방향의 정렬 방식.
transition: CSS 속성 값이 변할 때 애니메이션의 속도를 조절하여 부드러운 전환 효과를 줌.
transform: 요소에 2D 또는 3D 변환 효과를 적용. (translate, rotate, scale 등)

데이터 타입: String(문자), Number(숫자), Boolean(참/거짓), Object(객체), Array(배열) 등.
변수 (Variable): 데이터를 저장하고 참조하기 위한 메모리 공간의 이름. (let, const)
함수 (Function): 특정 작업을 수행하는 코드의 집합. 반복 사용이 가능.
DOM (Document Object Model): HTML 문서를 객체 기반으로 표현한 모델. JS는 DOM을 통해 HTML 요소에 접근하고 제어할 수 있음.

DOM API: DOM을 제어하기 위한 명령어(메소드)의 집합.
요소 선택
- document.querySelector(선택자): 선택자에 해당하는 첫 번째 요소를 반환.
- document.querySelectorAll(선택자): 선택자에 해당하는 모든 요소를 NodeList 객체로 반환.
이벤트 처리
- element.addEventListener('이벤트명', 함수): 특정 요소에 이벤트가 발생했을 때 지정된 함수를 실행하도록 등록.

라이브러리: 특정 기능을 쉽게 구현할 수 있도록 미리 작성된 코드의 모음.
GSAP (GreenSock Animation Platform): 복잡하고 성능이 중요한 애니메이션을 효율적으로 구현하기 위한 자바스크립트 라이브러리.
Swiper.js: 터치 기반의 반응형 슬라이드(캐러셀) 기능을 쉽게 만들 수 있는 라이브러리.
ScrollToPlugin: GSAP의 플러그인 중 하나로, 부드러운 스크롤 이동 기능을 구현.
Youtube Iframe API: 웹 페이지 내에 삽입된 유튜브 영상을 자바스크립트로 제어하기 위한 API.