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를 이용한 격자 레이아웃

실습 프로젝트

• 학습한 HTML 기술을 활용한 개인 포트폴리오 웹사이트

🚀 시작하기

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

open hancom/02_html/34_index.html

📈 학습 진행 과정

1일차 → HTML 기본 태그와 웹 페이지 구조
2일차 → 표, 폼, 시맨틱 태그
3일차 → 영상, 음성, Emmet, 개발자도구 4일차 → CSS 기초 선택자 및 코드 순서 관례 5일차 → CSS 고급 선택자, 박스모델/Flex, 애니메이션·포지셔닝, Grid 레이아웃

---

Author: ndopy
Last Updated: 2026-07-02