hancom

프론트엔드 기술 스택을 단계별로 학습하는 저장소입니다.

📚 프로젝트 소개

웹 개발에 필요한 기본기부터 실전 기술까지, 프론트엔드 개발 전반을 학습하고 실습하는 과정을 기록하고 있습니다. 각 단계별 예제 코드와 실습 자료, 그리고 실제 프로젝트를 통해 학습 내용을 적용해봅니다.

🎯 학습 내용

VS Code & 개발 환경

• VS Code 기본 설정 및 단속키
• Claude Code 설치 및 활용

HTML

• HTML 기초 구조 및 주요 태그
• 시맨틱 마크업을 활용한 웹 페이지 구조
• 텍스트 서식, 링크, 이미지 처리
• 테이블, 폼 작성
• 멀티미디어 요소(<video>, <audio>) 삽입
• Emmet을 활용한 효율적인 코드 작성
• 브라우저 개발자도구 활용

CSS

• CSS 기초 선택자(요소, 클래스, ID)
• 선택자 우선순위와 특이성(Specificity)
• CSS 코드 작성 순서 관례 및 모범 사례
• 선택자 조합과 활용 방법
• Stylelint를 활용한 속성 순서 자동 정렬
• 박스 모델(Box Model)과 Flexbox 레이아웃 기초
• CSS 연결 방법 3가지(외부, 내부, 인라인)와 가상 클래스
• transform을 이용한 3D 카드 뒤집기, hover 애니메이션
• @keyframes를 활용한 자동 애니메이션
• 인접 형제 선택자(~)를 이용한 상태 기반 스타일링
• position(relative/absolute/fixed/sticky) 요소 배치
• CSS Grid를 이용한 격자 레이아웃
• 미디어 쿼리(@media)를 활용한 반응형 스타일링
• CSS 변수(Custom Properties, :root, var())와 지역 재정의
• box-shadow, border-radius, opacity, transition을 활용한 인터랙션
• 가상 요소(::before, ::after)를 이용한 장식 및 hover 효과
• CSS 리셋(reset)의 필요성과 적용 전후 비교

JavaScript

• ES6+ 문법 기초(const/let, 화살표 함수, 템플릿 리터럴)
• DOM 요소 선택과 텍스트 조작
• 이벤트 리스너 등록과 핸들러 함수 분리(재사용·해제 가능한 네이밍)
• script defer를 활용한 스크립트 로딩 시점 제어
• 원시 타입 구분과 typeof 연산자, null의 특이 케이스
• 조건문(if-else)을 활용한 분기 처리
• 단일 책임 원칙(SRP) 기반 함수 설계 — 순수 로직과 DOM 조작 분리
• 함수형 프로그래밍 기초 개념(pipe를 이용한 함수 합성)

실습 프로젝트

• 학습한 HTML 기술을 활용한 개인 포트폴리오 웹사이트
• HTML/CSS 미니 프로젝트: 웹사이트 분석 · 학습 내용 정리 · 퀴즈 (JS 없이 순수 HTML/CSS로 구현)

🚀 시작하기

각 예제는 브라우저에서 열어 실습할 수 있습니다:

open hancom/02_html/34_index.html

📈 학습 진행 과정

1일차 → HTML 기본 태그와 웹 페이지 구조
2일차 → 표, 폼, 시맨틱 태그
3일차 → 영상, 음성, Emmet, 개발자도구
4일차 → CSS 기초 선택자 및 코드 순서 관례
5일차 → CSS 고급 선택자, 박스모델/Flex, 애니메이션·포지셔닝, Grid 레이아웃
6일차 → 미디어쿼리, CSS 변수, 그림자·전환, 가상 요소, CSS 리셋
7일차 → HTML/CSS 미니 프로젝트 (웹사이트 분석 · 학습 정리 · 퀴즈) 8일차 → JS 기초 문법, DOM 조작·이벤트 핸들링, 조건문, SRP 기반 함수 설계

---

Author: ndopy
Last Updated: 2026-07-06