고정 헤더 영역
상세 컨텐츠
본문
반응형
문서 구조 → 기본 태그 → 경로/링크 → 속성/엔티티 → 블록 vs 인라인 → 주석
1) 문서 구조
HTML 문서는 다음 뼈대가 기본입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>문서 제목</title>
</head>
<body>
화면에 보이는 내용
</body>
</html><!DOCTYPE html>
HTML5 문서임을 알리는 표지판입니다.
HTML5 문서임을 알리는 표지판입니다.
<html lang="ko">
문서의 언어를 한국어로 명시합니다. 스크린리더 등 접근성에 중요합니다.
문서의 언어를 한국어로 명시합니다. 스크린리더 등 접근성에 중요합니다.
<head>
화면에 직접 보이지 않는 “설정/설명” 공간입니다. 문자 인코딩, 제목, 메타 정보를 둡니다.
화면에 직접 보이지 않는 “설정/설명” 공간입니다. 문자 인코딩, 제목, 메타 정보를 둡니다.
<body>
사용자가 보는 본문 영역입니다.
사용자가 보는 본문 영역입니다.
TIP: 모바일 대응을 위해
<meta name="viewport" ...>는 반드시 포함하세요.2) 제목 h1~h6
표시형태: 블록 용도: 문서 제목/구조
<h1>가장 중요한 제목</h1>
<h2>큰 섹션 제목</h2>
<h3>하위 섹션 제목</h3>가장 중요한 제목
큰 섹션 제목
하위 섹션 제목
| 자주 쓰는 속성 | 설명 |
|---|---|
id |
해시 링크(내부 이동)를 위한 고유 식별자 |
class |
여러 요소를 묶어 스타일/스크립트 적용 |
권장: 문서당 h1은 1개만 두고, 제목 계층을 순서대로 내려가며 사용하세요(h2→h3...).
지양: 글자를 키우려고 제목 태그를 남용하지 않기(스타일은 CSS로).
지양: 글자를 키우려고 제목 태그를 남용하지 않기(스타일은 CSS로).
3) 문단/줄바꿈/가로줄/강조
<p> 문단
블록
<p>이건 하나의 문단입니다.</p>이건 하나의 문단입니다.
<br> 줄바꿈
한 줄<br>그리고 다음 줄한 줄
그리고 다음 줄
그리고 다음 줄
<hr> 가로줄
내용 구분선<hr>다음 내용내용 구분선
다음 내용
다음 내용
<strong> / <em> 강조
<strong>매우 중요</strong> / <em>약한 강조</em>매우 중요 / 약한 강조
| 태그 | 의미/접근성 | 기본 표시 |
|---|---|---|
<strong> |
강한 중요도(스크린리더가 강조) | 인라인(굵게) |
<em> |
억양을 두는 강조 | 인라인(기울임) |
4) 코드 표시: <code>와 <pre>
code: 인라인 pre: 블록(공백/줄바꿈 보존)
<p>터미널에서 <code>npm start</code>를 입력하세요.</p>
<pre><code>
function hello() {
console.log("Hello");
}
</code></pre>터미널에서 npm start를 입력하세요.
function hello() {
console.log("Hello");
}5) 목록: <ul> / <ol> / <li>
블록 li는 자식 항목
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
<ol>
<li>첫째</li>
<li>둘째</li>
</ol>- 사과
- 바나나
- 첫째
- 둘째
6) 링크 & 이미지
<a> 링크
<a href="https://example.com" target="_blank" rel="noopener" title="새 탭">예시 사이트</a>
<a href="assets/docs/sample.txt" download>파일 다운로드</a>
<a href="#images">같은 페이지 안으로 이동</a>| 속성 | 설명 |
|---|---|
href |
이동할 주소(절대/상대/해시) |
target="_blank" |
새 탭 열기 |
rel="noopener noreferrer" |
새 탭 보안/개인정보 보호 |
download |
파일 저장으로 유도 |
title |
마우스오버 도움말 |
<img> 이미지
<img src="assets/img/cat.png" alt="앉아있는 고양이" width="320" loading="lazy">
| 속성 | 설명 |
|---|---|
src |
이미지 파일 경로 |
alt |
대체 텍스트(접근성/이미지 실패 대비). 장식용은 빈 문자열 alt="" 권장 |
width/height |
표시 크기. 본문 레이아웃 안정화에 도움 |
loading="lazy" |
지연 로딩으로 성능 개선 |
권장: 의미 있는 이미지에는 꼭 alt 작성.
지양: “사진”, “이미지” 같은 모호한 alt. 화면 내용과 역할을 간단히 설명하세요.
지양: “사진”, “이미지” 같은 모호한 alt. 화면 내용과 역할을 간단히 설명하세요.
7) 경로(절대/상대/해시)
절대 경로
전체 주소. 예)
전체 주소. 예)
https://www.example.com/page상대 경로
현재 파일 기준. 예)
현재 파일 기준. 예)
assets/img/cat.png해시 링크
같은 페이지 이동. 예)
같은 페이지 이동. 예)
<a href="#images">8) 속성 더 알아보기
대부분의 태그가 공유하는 “전역 속성”이 있어요.
| 전역 속성 | 설명 | 예시 |
|---|---|---|
id |
요소의 고유 식별자 (해시 링크, 스크립트에서 사용) | <h2 id="top">…</h2> |
class |
공통 스타일/스크립트를 적용하기 위한 그룹 | <p class="lead"> |
title |
마우스오버 툴팁 | <abbr title="HyperText Markup Language">HTML</abbr> |
style |
인라인 CSS (소규모로만 사용 권장) | <p style="color:tomato"> |
hidden |
화면에 표시하지 않음(접근성 고려 필요) | <div hidden>…</div> |
tabindex |
키보드 포커스 순서 제어(필요한 경우에만) | <a tabindex="0"> |
aria-* |
접근성(스크린리더) 보조 속성 | <button aria-label="닫기">×</button> |
TIP: 스타일은 가급적 별도 CSS 파일로 분리하세요. 인라인
style 남용은 유지보수에 불리합니다.9) 엔티티(Entity): 특수기호 표시
| 기호 | 엔티티 | 표시 |
|---|---|---|
|
non‑breaking space | (공백) |
< |
less-than | < |
> |
greater-than | > |
& |
ampersand | & |
© |
copyright | © |
예:
<h1> → 화면에는 <h1> 로 보입니다.10) 블록 vs 인라인
블록: 한 줄 전체를 차지 → 다음 요소는 줄바꿈.
인라인: 글줄 안에서 자기만큼만 차지 → 옆으로 이어짐.
블록 요소 div — 한 줄 전부
인라인 span 옆으로 이어짐블록 예
div, p, h1~h6, ul, ol, li, section, article인라인 예
span, a, strong, em, img, code마무리 체크리스트
- 문서 구조:
<!DOCTYPE>,lang,meta charset,viewport확인 - 제목 계층: 문서당
h11개, 자연스러운 단계 - 이미지: 의미 있는
alt, 필요 시loading="lazy" - 링크: 새 탭이면
target="_blank"+rel="noopener" - 엔티티: 특수기호는 엔티티 사용
- 블록/인라인: 올바른 태그 선택(모양 바꾸려 CSS 사용)
- 주석: 설명은 주석으로 남기되, 민감 정보는 쓰지 않기
반응형
'HTML&CSS' 카테고리의 다른 글
| CSS 선택자 (0) | 2025.09.27 |
|---|---|
| HTML에서 자주 쓰는 태그 20종류 (0) | 2025.09.25 |
| HTML 폼태그와 입력요소들 (3) | 2025.09.24 |
| HTML 표 만들기 (table태그) (0) | 2025.09.24 |
| HTML 시멘틱 태그 (0) | 2025.09.23 |
11) 주석 <!-- … -->