FrontendDevGuide0002

🦴 FrontendDevGuide0002 — HTML 완전 정복 A-Z

💡 이 글을 읽고 나면...
HTML 기본 구조부터 시맨틱 태그, 폼, 접근성, SEO까지 —
현업에서 HTML을 자신 있게 작성할 수 있는 수준이 됩니다!

📌 예상 학습 기간: 2~3주  |  난이도: ⭐⭐☆☆☆  |  선수 지식: 인터넷 기초 (Guide0001)

🏠 1. HTML이란? — 웹페이지의 뼈대

HTML(HyperText Markup Language)은 웹페이지의 구조(뼈대)를 만드는 언어입니다.
"마크업 언어"라는 이름처럼, 태그(Tag)를 사용해서 콘텐츠에 의미를 부여합니다.

🏠 집으로 비유하면:
HTML = 건물의 골조 (기둥, 벽, 방 배치 — 구조)
CSS = 인테리어 (색깔, 벽지, 가구 배치 — 디자인)
JavaScript = 전기·수도·자동문 (동작, 기능)

🔖 태그(Tag)란?
HTML은 꺽쇠 괄호(<>)로 감싸진 태그로 콘텐츠를 표시합니다.
대부분의 태그는 여는 태그와 닫는 태그 쌍으로 이루어집니다:
<h1>안녕하세요</h1> — 여는 태그 / 닫는 태그
일부 태그는 단독 사용: <img>, <br>, <hr>, <input>

📐 2. HTML 기본 구조 — 모든 웹페이지의 틀

모든 HTML 파일은 아래 기본 구조를 가지고 있습니다. 이 틀은 반드시 외워야 합니다!

📋 head 태그 안에 들어가는 주요 요소:
<meta charset="UTF-8"> — 한글이 깨지지 않도록 인코딩 설정
<meta name="viewport" content="width=device-width"> — 모바일 반응형 필수
<title>페이지 제목</title> — 브라우저 탭에 표시되는 제목
<link rel="stylesheet" href="style.css"> — CSS 파일 연결
<script src="app.js"></script> — JS 파일 연결

📌 3. 꼭 알아야 할 HTML 태그 완전 정리

HTML 태그는 100개가 넘지만, 실무에서 자주 쓰는 20~30개만 제대로 알아도 충분합니다.

📝 텍스트 관련 태그 상세

제목 태그 h1 ~ h6:
h1은 페이지당 1개만 사용 (SEO 핵심 — 가장 중요한 제목)
h2는 섹션 제목, h3는 소제목 식으로 계층 구조를 지켜야 합니다
예) h1 → "프론트엔드 완전 가이드" / h2 → "HTML이란?" / h3 → "기본 구조"

강조 태그 strong vs em vs b vs i:
<strong> — 의미상 중요한 강조 (굵게, 스크린리더가 강조해서 읽음) ← 권장
<em> — 의미상 강조 (기울임, 스크린리더가 강조해서 읽음) ← 권장
<b> — 시각적 굵게만 (의미 없음) ← 스타일용
<i> — 시각적 기울임만 (의미 없음) ← 아이콘 폰트에 많이 사용

링크 태그 <a> 완전 정복:
href="URL" — 이동할 주소
href="#id" — 같은 페이지 내 특정 위치로 이동 (앵커 링크)
href="mailto:email@naver.com" — 이메일 앱 열기
target="_blank" — 새 탭으로 열기
rel="noopener noreferrer" — target="_blank" 사용 시 보안을 위해 반드시 추가!

이미지 태그 <img> 완전 정복:
src — 이미지 파일 경로 또는 URL
alt — 이미지 대체 텍스트 (접근성, SEO 필수! 절대 빠뜨리면 안 됨)
width / height — 크기 지정 (레이아웃 안정성을 위해 지정 권장)
loading="lazy" — 화면에 보일 때 로드 (성능 최적화)
예) <img src="logo.png" alt="회사 로고" width="200" height="100" loading="lazy">

📦 4. 블록 vs 인라인 — HTML의 핵심 개념

HTML 요소는 크게 블록(Block) 요소와 인라인(Inline) 요소로 나뉩니다. CSS 레이아웃을 이해하기 위한 핵심 개념입니다.

💡 실전 팁:
<div> 안에 <span> 넣기 ✅ (블록 안에 인라인 OK)
<span> 안에 <div> 넣기 ❌ (인라인 안에 블록 NG)
<p> 안에 <div> 넣기 ❌ (p는 블록이지만 블록 자식 불가)
CSS의 display: block / inline / inline-block / flex로 언제든 변경 가능

🏗️ 5. 시맨틱(Semantic) HTML — 현업 필수

시맨틱 태그는 태그 이름 자체가 의미를 가지는 태그입니다.
단순히 <div>로 모든 구역을 나누는 것보다 의미 있는 태그를 사용하면 SEO, 접근성, 코드 가독성이 모두 향상됩니다.

🔍 article vs section 차이:
<article> — 페이지에서 떼어내도 독립적으로 의미 있는 콘텐츠
예) 블로그 글 하나, 뉴스 기사, 사용자 댓글

<section> — 주제별로 그룹화하는 단위 (보통 제목 h2~h3을 포함)
예) "소개 섹션", "기술 섹션", "연락처 섹션"

📝 6. HTML Form — 사용자 입력 처리의 모든 것

로그인, 회원가입, 검색창, 댓글 작성 — 모두 HTML Form으로 만들어집니다.
프론트엔드 개발자라면 Form을 완벽히 이해해야 합니다.

📋 Form 기본 구조:
action — 데이터를 전송할 서버 URL
method — GET(URL에 데이터 포함) / POST(숨겨서 전송)
→ 비밀번호, 개인정보는 반드시 POST 사용!

<form action="/login" method="POST">
  <input type="email" name="email" required>
  <input type="password" name="pw" required>
  <button type="submit">로그인</button>
</form>

⭐ label 태그의 중요성:
input에는 반드시 <label>을 연결해야 합니다 (접근성 필수!)
<label for="email">이메일</label>
<input type="email" id="email" name="email">
→ label 클릭 시 input에 포커스 → 사용성 향상
→ 스크린리더가 "이메일 입력칸"이라고 안내 가능

🛡️ HTML5 내장 유효성 검사 속성:
required — 필수 입력
minlength / maxlength — 최소/최대 글자 수
min / max — 숫자 최소/최대값
pattern — 정규식으로 형식 검사
type="email" — 이메일 형식 자동 검사
→ JS 없이도 기본 유효성 검사 가능!

♿ 7. 접근성(a11y)과 SEO — 프로 개발자의 기준

접근성(Accessibility, a11y)은 장애가 있는 사용자도 웹을 사용할 수 있도록 하는 것입니다.
접근성이 좋으면 SEO도 좋아집니다. 두 마리 토끼를 동시에 잡는 방법입니다!

🔍 WAI-ARIA 기초:
시맨틱 태그만으로 표현할 수 없는 역할을 설명하는 속성입니다.
role — 요소의 역할 명시 (role="button", role="navigation")
aria-label — 요소 설명 텍스트 (눈에 안 보이지만 스크린리더가 읽음)
aria-hidden="true" — 스크린리더가 무시하게 함 (장식용 아이콘 등)
예) <button aria-label="검색"><i class="icon-search"></i></button>

📁 8. 파일 경로 완전 정복

이미지, CSS, JS 파일을 연결할 때 경로를 잘못 적으면 아무것도 표시되지 않습니다. 경로의 두 가지 방식을 꼭 알아야 합니다.

📂 상대 경로 (Relative Path) — 현재 파일 기준:
./images/logo.png — 현재 폴더 안의 images 폴더
../images/logo.png — 한 단계 위 폴더의 images 폴더
images/logo.png — ./를 생략해도 같은 의미
→ 실무에서 가장 많이 사용하는 방식

🌐 절대 경로 (Absolute Path) — 루트/URL 기준:
/images/logo.png — 사이트 루트(/)부터 시작
https://example.com/images/logo.png — 전체 URL
→ CDN 이미지나 외부 리소스 연결 시 사용

💻 9. 현업 수준의 HTML 코드 작성법

✅ 현업에서 지켜야 할 HTML 작성 원칙:
1. 시맨틱 태그 우선 — div/span보다 의미 있는 태그를 먼저 찾는다
2. h1은 페이지당 1개 — SEO의 핵심, 가장 중요한 제목에만
3. img에 alt 필수 — 절대 빠뜨리지 않기
4. 들여쓰기 2칸 또는 4칸 통일 — 팀과 협의 후 일관성 유지
5. 소문자 태그 사용 — HTML5에서는 소문자가 표준
6. 속성값 따옴표 사용 — class="btn" (따옴표 생략 비권장)
7. 불필요한 div 줄이기 — "div 지옥(div hell)" 피하기

🔧 VS Code에서 HTML 빠르게 작성하는 꿀팁 (Emmet):
! + Tab — HTML 기본 구조 자동 완성
div.container + Tab — <div class="container"></div>
ul>li*5 + Tab — ul 안에 li 5개 자동 생성
h2.title#main + Tab — class="title" id="main"인 h2
→ Emmet을 익히면 HTML 작성 속도가 3~5배 빨라집니다!

✍️ 10. 실습 — 포트폴리오 기본 페이지 만들기

배운 내용을 모두 활용한 실전 코드입니다. 이 구조가 실무 포트폴리오 사이트의 기초가 됩니다.

📄 실습 파일 구조:
my-portfolio/
  ├── index.html
  ├── css/style.css (나중에 추가)
  └── images/ (이미지 폴더)

🚀 실습 미션:
① VS Code 설치 후 새 폴더 "my-portfolio" 생성
② index.html 파일 생성 후 ! + Tab으로 기본 구조 완성
③ header, nav, main, section, footer 시맨틱 태그 사용해서 페이지 구성
④ 이름, 소개글, 기술 목록(ul>li), 연락처 링크(mailto:) 추가
⑤ 모든 이미지에 alt 속성 추가
⑥ 크롬으로 열어서 확인, F12 Elements 탭에서 구조 확인

✅ 핵심 요약 & 학습 체크리스트

"HTML은 단순히 태그를 외우는 것이 아닙니다.
콘텐츠에 올바른 의미를 부여하는 것 — 그것이 좋은 HTML의 본질입니다."

📋 학습 완료 체크리스트:
☐ HTML 기본 구조(!DOCTYPE, html, head, body)를 외웠다
☐ 주요 태그 20개 이상의 용도를 안다
☐ 블록 요소와 인라인 요소의 차이를 설명할 수 있다
☐ 시맨틱 태그 7개(header/nav/main/article/section/aside/footer)를 안다
☐ form, input, button 태그로 로그인 폼을 만들 수 있다
☐ img 태그에 alt 속성을 항상 추가한다
☐ 상대 경로와 절대 경로의 차이를 안다
☐ VS Code에서 Emmet(! + Tab)을 사용해봤다
☐ 포트폴리오 기본 페이지를 직접 만들어봤다
☐ 크롬 DevTools의 Elements 탭에서 HTML 구조를 확인해봤다

🎉 다음 단계: FrontendDevGuide0003 — CSS 완전 정복 으로 넘어가세요!
HTML 뼈대를 만들었으니, 이제 예쁘게 꾸밀 차례입니다 💅