| 문서 구조 |
<!DOCTYPE html> |
HTML5 문서 선언 |
문서 타입 정의 |
|
<html>, <head>, <body> |
HTML의 기본 구조 요소 |
페이지 구성의 뼈대 |
| 문서 정보 |
<meta charset="UTF-8" /> |
한글 등 다국어 인코딩 설정 |
UTF-8로 문자 인코딩 |
|
<title>...</title> |
브라우저 탭 제목 표시 |
SEO에도 영향 |
| 스타일 설정 |
<style> ... </style> |
내부 CSS 정의 영역 |
<head> 안에 작성 |
| 배경 및 텍스트 색상 |
body { background-color: #121212; color: #ffffff; } |
다크모드 적용 |
전체 배경과 폰트 색상 지정 |
| 폰트 및 레이아웃 |
font-family, line-height, padding |
텍스트 가독성 향상 |
기본 텍스트 스타일 |
| 제목 스타일 |
h1, h2, h3 { color: #81c784; } |
제목 강조 |
밝은 그린 컬러 |
| 링크 색상 |
a { color: #66b2ff; } |
링크 강조 |
다크모드에서 잘 보이는 파랑 |
| 이미지 스타일 |
img { border-radius: 8px; margin: 10px 0; } |
둥근 테두리와 여백 적용 |
보기 좋은 이미지 처리 |
| 강조 텍스트 |
<strong>, strong { color: #ffffff; } |
강조 (굵게, 흰색) |
핵심 문장 표시 |
| 부가 설명 텍스트 |
<em>, em { color: #cccccc; } |
보조 강조 (회색) |
예시나 설명 부가 문장 |
| 제목 태그 |
<h2>...</h2> |
문단 구분 및 제목 표시 |
목차 역할 |
| 단락 태그 |
<p>...</p> |
문장 묶음 단위 |
문단 구성의 기본 |
| 이미지 삽입 |
<img src="..." alt="..." /> |
시각 자료 삽입 |
로컬 또는 URL 기반 |
| 링크 연결 |
<a href="..." target="_blank">...</a> |
외부 사이트 링크 연결 |
새 탭에서 열기 |
| 줄바꿈 |
<br /> |
문장 내 줄바꿈 |
시각적 구조 강조용 |
