1. HTML: 웹 페이지 구조를 만드는 마크업 언어
2. Semantic HTML: 의미 있는 태그로 구조화(SEO/접근성에 유리)
3. DOM: 브라우저가 HTML을 객체 트리로 만든 것
4. Element / Node: DOM 구성 단위(요소/노드)
5. Attribute: 태그의 속성(src, alt, data-* 등)
6. Viewport: 화면 표시 영역(모바일 대응에 핵심)
7. Meta tag: 페이지 정보(문자셋/반응형/SEO 힌트)
8. URL / URI: 자원 위치 / 자원 식별자(더 넓은 개념)
9. SEO: 검색엔진 최적화(구조/속도/콘텐츠 모두 영향)
10. Accessibility(A11y): 장애/환경 관계없이 사용 가능하게 만드는 원칙

2) CSS / 레이아웃 (11~20)

11. CSS: 스타일(색/배치/폰트 등)을 정의
12. Selector: 스타일 적용 대상 선택자
13. Specificity: 어떤 스타일이 우선 적용되는지 규칙(우선순위)
14. Box Model: content + padding + border + margin
15. Display: block/inline/inline-block 등 배치 방식
16. Position: static/relative/absolute/fixed/sticky
17. Flexbox: 1차원(가로/세로) 레이아웃 배치
18. Grid: 2차원(행/열) 레이아웃 배치
19. Responsive Web: 화면 크기에 따라 적응형 레이아웃
20. Media Query: 화면 조건별 CSS 분기

3) JavaScript 기초 (21~30)

21. JavaScript: 브라우저 동작(로직/이벤트)을 담당
22. ES6+: 최신 문법(화살표 함수, let/const, 모듈 등)
23. Scope: 변수 유효 범위(전역/함수/블록)
24. Hoisting: 선언이 위로 끌어올려지는 동작
25. Closure: 함수가 바깥 스코프를 기억하는 특성
26. this: 실행 컨텍스트에 따라 달라지는 참조
27. Event Loop: 비동기 작업을 처리하는 JS 동작 원리
28. Promise: 비동기 결과를 다루는 객체
29. async/await: Promise를 더 읽기 쉽게 쓰는 문법
30. Debounce/Throttle: 잦은 이벤트 호출을 줄이는 기법(검색/스크롤)

4) 브라우저 동작 / 렌더링 (31~38)

31. Rendering: 화면에 그려지는 과정
32. Reflow(Layout): 레이아웃 다시 계산(비용 큼)
33. Repaint: 색/그림자 등 다시 그리기
34. Critical Rendering Path: 렌더링에 필요한 핵심 과정/자원 흐름
35. Caching: 리소스를 재사용해 로딩 속도 개선
36. Cookie: 브라우저에 저장되는 데이터(세션/설정 등)
37. LocalStorage/SessionStorage: 브라우저 저장소(간단 데이터 저장)
38. Service Worker: 오프라인/캐시/푸시를 가능하게 하는 백그라운드 스크립트

5) 네트워크 / API (39~44)

39. HTTP: 웹 통신 규약
40. HTTPS: 암호화된 HTTP(TLS 기반)
41. REST API: 자원 중심 설계 스타일
42. JSON: 프론트-백 데이터 교환 표준 포맷
43. CORS: 다른 출처 요청을 제한/허용하는 브라우저 정책
44. JWT: 토큰 기반 인증에 자주 쓰는 형식

6) 프레임워크 / 상태 / 빌드 (45~50)

45. SPA: 한 페이지에서 화면을 바꿔가며 동작하는 앱
46. CSR: 브라우저에서 렌더링(초기 로딩 느릴 수 있음)
47. SSR: 서버에서 HTML을 만들어 전달(SEO/초기속도 유리)
48. SSG: 빌드 시 정적 HTML 생성(빠르고 안정적)
49. State(상태) / Props: 화면 데이터 / 부모→자식 전달 값(React 기준)
50. Bundler: 여러 파일을 묶어 배포용으로 만드는 도구(Vite/Webpack 등)

게시물 프론트엔드 필수 용어 50 (Front-end Essentials)이 하우인포-IT·테크에 처음 등장했습니다.