📄 HTML 태그 정리표
| 태그 | 의미 / 기능 | 사용된 예시 | 비고 |
|---|---|---|---|
<!DOCTYPE html> |
문서가 HTML5 형식임을 선언 | 문서 맨 위 | 모든 HTML 문서에 필수 |
<html lang="ko"> |
문서 전체의 루트 태그 + 언어 설정 | <html lang="ko"> |
lang 속성은 검색/접근성에 도움 |
<head> |
문서의 메타데이터 (표시되지 않음) | 폰트, 스타일 정의 | <style>, <meta> 등 포함 |
<meta charset="UTF-8"> |
문자 인코딩 설정 | 한글 깨짐 방지 | UTF-8은 웹 표준 |
<meta name="viewport"> |
반응형 설정 | 모바일 대응 | 디바이스 크기에 맞춤 |
<title> |
브라우저 탭 제목 | [디자인부트캠프3기] 강소연 Profile |
검색 결과에도 표시됨 |
<link> |
외부 리소스 불러오기 | Pretendard 폰트 불러오기 | href로 링크 지정 |
<style> |
CSS 코드 정의 | 전체 스타일 지정 | <head> 안에 위치 |
<body> |
본문 콘텐츠 | 실제 보이는 페이지 내용 | HTML의 메인 영역 |
📌 콘텐츠/구조 관련 태그
| 태그 | 의미 / 기능 | 사용된 예시 | 비고 |
|---|---|---|---|
<section> |
콘텐츠의 주제별 구획 | hero, about, projects 등 | 시멘틱 태그. 구분 명확 |
<h1>~<h3> |
제목 계층 구조 | 페이지 타이틀/소제목 | 검색엔진, 접근성에도 중요 |
<p> |
문단 | 자기소개, 설명 | 자동 줄바꿈 포함 |
<ul> |
리스트 목록 (순서 없음) | 주요 작업, 가치 목록 | li와 함께 사용 |
<li> |
리스트 아이템 | 각 항목 설명 | ul 또는 ol 안에서 사용 |
<a> |
링크 생성 | Notion, Figma, 인스타그램 링크 등 | href, target="_blank" 사용 |
<img> |
이미지 삽입 | 프로필, 작업물, 그림 등 | src, alt, width 속성 사용 |
<br> |
줄바꿈 (강제) | 문단 내 개행 | p 내부 줄 나눌 때 사용 |
<strong> |
강조(볼드체) | 중요한 단어 강조 | CSS로 색상도 추가 지정 가능 |
<div> |
일반 박스(container) | Full STORY 배경 영역 | 레이아웃, 스타일 구분에 활용 |