1. VS Code
추천 확장 프로그램
• Live Server — HTML 저장하면 브라우저 자동 새로고침
• Prettier — 저장 시 코드 자동 정렬 (HTML · CSS · JS · React)
• ESLint — JS · React 오류 실시간 감지
• ES7+ React/Redux Snippets — React 코드 단축 입력
• Auto Rename Tag — HTML 여는/닫는 태그 짝 자동 수정
• GitLens — Git 히스토리 시각화
• Error Lens — 에러 인라인 표시
주요 단축키
- Ctrl + P 파일 빠른 열기
- Ctrl + Shift + P 명령 팔레트
- Ctrl + ` 터미널 열기
- F5 디버그 실행
- Ctrl + / 주석 토글
- Alt + ↑↓ 줄 이동
- Ctrl + D 다중 선택
- Shift + F12 참조 찾기
- Shift + F 찾기
2. HTML
# 웹페이지는 HTML · CSS · JS 세 가지가 모여 만들어짐
• HTML : 집에 무엇이 있는지 (글·사진·버튼), 집의 뼈대
• CSS : 그게 어떻게 보이는지 (색·크기·자리), 집의 색칠·꾸미기
• JS : 그게 어떻게 움직이는지 (클릭·반응), 집의 전기·스위치
(1) 개발 환경
Live Server 설치 - 코드 저장시 자동으로 화면 바뀜
-[file] - [ auto save] 설정
(2) HTML 기본 구조
<!DOCTYPE html> <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko"> <!-- 문서 시작, 한국어 페이지 -->
<head> <!-- 화면엔 안 보이는 준비 칸 -->
<meta charset="UTF-8"> <!-- 한글 안 깨지게 -->
<title>나의 첫 페이지</title> <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body> <!-- 화면에 보이는 진짜 내용 칸
<h1>안녕하세요! 제 첫 웹페이지입니다.</h1> <!-- 큰 제목 한 줄 -->
</body>
</html> <!-- 문서 끝 -->
(4) 주석
<!-- 로 열고 --> 로 닫는 사이의 글자는 화면에 안 그려진다.
코드 한 줄을 지우지 않고 잠깐 끌 때도 편함
주석 쓸때 자주 쓰는 단축키 (Windows 기준, Mac은 Ctrl→Cmd)
• 주석 켜고 끄기 Ctrl + /
• 저장 Ctrl + S
• 줄 복제 Shift + Alt + ↓
• 전체 선택 Ctrl + A
• 찾기 Ctrl + F
(5) 태그 + 뼈대
HTML은 글마다 태그라는 이름표를 붙임
— 태그 = "이건 큰제목이야"처럼 무엇인지 알려 주는 이름표
태그는 거의 다 열기 + 닫기 한 쌍, 닫기를 빠뜨리면 화면이 깨짐
→ 이 셋(여는 태그 + 내용 + 닫는 태그)을 합쳐 요소(element) 라 부름
눈에 보이는 건 전부 <body> 안에, <head>는 무대 뒤 준비 공간
tip — 태그 이름은 대소문자 안 가림(<H1> = <h1>)
— 코드 속 <!-- 메모 --> 주석은 화면에 안 보임
(6) 제목과 문단 (h1~h6, p)
제목은 크기 6단계: h1이 제일 크고 숫자 커질수록 작아짐
(h1 ~h6 까지 사용가능)
p = 글 한 덩어리(문단)
<body>
<h1>가장 큰 제목</h1>
<h2>중간 제목</h2>
<h3>작은 제목</h3>
<p>저는 코딩을 처음 배우는 학생입니다</p>
</body>
(7) 강조와 중첩
태그 안에 태그 넣기 = 중첩
규칙 — 먼저 연 태그를 나중에 닫음, 순서 엇갈리면 화면 깨짐
(<p><strong>…</p></strong> X)
(<p><strong>…</strong></p> O)
<body>
<p>저는 <strong>정말</strong> 신납니다</p> <!-- '정말'만 굵게 -->
</body>
코드에 꺾쇠 글자 쓰기 — 특수문자
< > 과 &는 HTML이 명령어로 착각함 — 글자 그대로 보이려면 약속된 기호(엔티티)로 바꿔 적음
• < → <
• > → >
• & → &
(8) 이미지
<img> = 화면에 사진 붙이기
— src(사진 주소)·alt(안 뜰 때 대신 보일 글자) 속성과 함께 씀
<!-- img = 화면에 사진 붙이기, 닫는 태그 없는 빈 요소라 /> 로 끝맺음 -->
<!-- src = 사진 주소 / alt = 사진이 안 뜰 때 대신 보일 글자 →
src = 사진 주소, alt = 사진이 안 뜰 때 대신 보일 글자
→ <img>는 속이 빈 상자처럼 넣을 내용이 없어 닫는 태그도 안 쓰는 빈 요소(void), 끝을 />로 마감
— br·hr·meta도 빈 요소(/는 생략 가능)
(9) 링크
<!-- a = 누르면 다른 곳으로 가는 문(링크) -->
<!-- href = 이동할 주소 (https:// 까지 적어야 동작),링크네임까지쓰기 →
<a href =”링크”> 해당 링크 제목 </a>
(10) 목록·시맨틱 태그 (ul·li, header·main·footer)
<ul><li> = 점 찍힌 목록
ul = 점 찍힌 목록 상자, li = 목록 안의 한 줄
header><main><footer> = 어느 부분인지 뜻이 드러나는 이름표 상자
(시맨틱 = 의미가 담긴 구역 나누기)
<body> -
<header>맨 위 (로고·제목)</header> <!-- 시맨틱 페이지 맨 위 구역 →
<main> <!--시맨틱 핵심 내용 구역 -->
<ul>
<li>좋아하는 것: 영화</li> <!-- 목록 항목 1 -->
<li>취미: 산책</li> <!-- 목록 항목 2 -->
<li>목표: 웹 개발자</li> <!-- 목록 항목 3 -->
</ul>
</main>
<footer>맨 아래 (저작권·연락처)</footer> <!--시맨틱 페이지 맨 아래 구역 →
"위는 header, 본문은 main, 아래는 footer" — 어디에 둘지 모르면 일단 main 안에
-블록 요소(p·h1·ul·header)는 벽돌처럼 한 줄을 통째로 차지(위→아래로 쌓임)
-인라인 요소(a·strong·em)는 글자 사이에 끼어듦
'성남 프론트엔드' 카테고리의 다른 글
| 6일차 _JavaScript 기초 (0) | 2026.07.06 |
|---|---|
| 5일차 _CSS : Position, 가상요소, CSS 리셋 (0) | 2026.07.05 |
| 4일차 _CSS : 3D카드 뒤집기 / 애니메이션 @keyframes (0) | 2026.07.02 |
| 3일차 _Claude Code 연결, CSS (0) | 2026.07.01 |
| 2일차_HTML_Class , Id (0) | 2026.06.30 |