1. 문서 구조 관련 태그
<!DOCTYPE html>
- 현재 문서가 HTML5 문서임을 선언하는 부분.
<html>
- HTML 문서의 최상위 루트 요소.
- lang="en" : 문서 언어를 “영어”로 설정한 속성.
<head>
- 화면에 표시되지 않는 **문서 정보(meta data)**를 넣는 영역.
- 제목, 문자 인코딩, 링크, 스크립트 등을 포함.
<meta charset="UTF-8">
- 글자가 깨지지 않도록 문자 인코딩을 UTF-8로 설정.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 모바일 환경에서 화면 비율이 깨지지 않도록 하는 설정.
<title>
- 브라우저 탭에 표시될 문서의 제목.
2. 본문 관련 태그
<body>
- 화면에 실제로 보이는 콘텐츠(텍스트, 이미지, 리스트 등)를 포함하는 영역.
헤딩 태그(H1~H6)
- <h1> ~ <h6>
- 제목을 표시하는 태그. 숫자가 커질수록 글자가 작아짐.
- 예: <h1>페북</h1>
2. 본문 관련 태그
<body>
- 화면에 실제로 보이는 콘텐츠(텍스트, 이미지, 리스트 등)를 포함하는 영역.
헤딩 태그(H1~H6)
- <h1> ~ <h6>
- 제목을 표시하는 태그. 숫자가 커질수록 글자가 작아짐.
- 예: <h1>페북</h1>
3. 텍스트 관련 태그
<p>
- 문단(paragraph). 텍스트 블록 작성.
<br>
- 줄바꿈(line break).
<i>
- 이탤릭체(기울임) 표시.
<strong>
- 강조(굵은 글씨).
- 의미적으로 중요한 텍스트라는 의미도 포함.
<!-- 주석 -->
- 브라우저에 표시되지 않는 설명용 텍스트.
4. 구분선 관련 태그
<hr>
- 수평선(horizontal rule)을 표시.
- 구역을 나누는 용도로 사용.
5. 리스트 관련 태그
<ol> (Ordered List)
- 순서 있는 목록(1, 2, 3…)
- <li> : 리스트 항목(Item)
<ul> (Unordered List)
- 순서 없는 목록(• • • 형태)
- <li> : 리스트 항목
6. 이미지 관련 태그
<img>
- 이미지를 삽입하는 태그.
- 주요 속성:
- src="경로" : 이미지 파일 위치
- alt="대체 텍스트" : 이미지 로딩 실패 시 보여줄 글자
- width="200" : 이미지 크기 지정
반응형
'프로덕트 디자인 > 코딩' 카테고리의 다른 글
| 포폴 웹을 위한 공부① (0) | 2026.02.22 |
|---|---|
| 인터랙티브디자인 (0) | 2025.11.15 |
| 익숙해져서 지루해질쯤 새로운 것 (0) | 2025.11.13 |
