🗂️ HTML 요약정리

김수진·2025년 5월 11일

HTML

마크업 언어
웹페이지의 내용과 구조 담당
<!DOCTYPE html> 으로 시작하여 문서 형식 지정

1. HTML 기본 문법

1.1 요소

시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성

1.1.1 중첩 허용

<h1>안녕하세요</h1> 
<p>반갑습니다!</p>

1.1.2 빈 요소

content 필요 없음
• br
• hr
• img
• input
• link
• meta
<meta charset="utf-8">

1.2 attribute

요소의 성질, 특징

<img src="html.jpg" width="104" height="142">

2. semantic 요소

content의 의미를 명확히 설명

3. 기본 태그

3.1 html tag

모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재

3.2 head tag

메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재

3.2.1 title tag

제목 정의

3.2.2 style tag

style 정보 정의

3.2.3 link tag

외부 리소스와의 연계 정보 정의

3.2.4 script tag

client-side JavaScript 정의
src 어트리뷰트를 사용하면 외부 JavaScript 파일 로드

3.2.5 meta tag

charset 어트리뷰트

3.3 body tag

HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재

3.4 모든 태그들을 포함한 예시

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>예시</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body {
      background: #eee;
      font-family: sans-serif;
    }
  </style>
  <script src="script.js"></script>
</head>
<body>
  <h1>간단한 HTML</h1>
  <p>기본 태그들을 포함한 예시입니다.</p>
</body>
</html>

4. 텍스트 관련 태그

4.1 제목 태그

제목을 나타낼 때 사용하며 h1~h6

<!DOCTYPE html>
<html>
  <body>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>
  </body>
</html>

출력 결과:

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

4.2 글자 형태 태그

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>글자 형태 예시</title>
</head>
<body>
  <h1>텍스트 스타일 태그 예시</h1>

  <p><b>b 태그</b>: 볼드체 (굵은 글씨)</p>
  <p><strong>strong 태그</strong>: 볼드체 + 의미 강조</p>
  <p><i>i 태그</i>: 이탤릭체 (기울임)</p>
  <p><em>em 태그</em>: 이탤릭체 + 강조 의미</p>
  <p><small>small 태그</small>: 작은 글씨</p>
  <p><mark>mark 태그</mark>: 하이라이트</p>
  <p><del>del 태그</del>: 삭제된 텍스트</p>
  <p><ins>ins 태그</ins>: 삽입된 텍스트</p>
  <p>수학 표기 예: H<sub>2</sub>O 와 E = mc<sup>2</sup></p>

</body>
</html>

4.2.1 b

bold체

4.2.2 strong

b tag와 동일하게 bold체를 지정
의미론적(Semantic) 중요성의 의미

4.2.3 i

Italic체

4.2.4 em

emphasized text

4.2.5 small

small text

4.2.6 mark

highlighted text

4.2.7 del

deleted (removed) text

4.2.8 ins

inserted (added) text

4.2.9 sub/sup

subscripted text/superscripted text

4.3 본문 태그

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>본문 태그 예시</title>
</head>
<body>

  <h1>문단 및 인용 태그 예시</h1>

  <p>p 태그는 단락을 나타냅니다.</p>

  <p>br 태그는 줄바꿈을 할 때 사용합니다.<br>여기서 줄이 바뀝니다.</p>

  <pre>
pre 태그는
공백과 줄바꿈을
그대로 유지합니다.
  </pre>

  <hr>

  <p>q 태그는 <q>짧은 인용문</q>을 표현합니다.</p>

  <blockquote>
    blockquote 태그는 긴 인용문에 사용됩니다.  
    예를 들어 누군가의 글이나 말 전체를 인용할 때 사용합니다.  
    브라우저는 일반적으로 들여쓰기로 표현합니다.
  </blockquote>

</body>
</html>

4.3.1 p

단락

4.3.2 br

line break

4.3.3 pre

형식화된(preformatted) text

4.3.4 hr

수평줄 삽입

4.3.5 q

짧은 인용문(quotation)

4.3.6 blockquote

긴 인용문 블록 지정

5. Hyperlink

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
  </body>
</html>

5.1 href attribute

5.1.1 a tag

hyperlink를 의미

5.1.2 href

파일의 경로

5.2 target attribute

target="_blank" 를 사용해 외부 페이지를 오픈-> 보안 취약
rel="noopener noreferrer"를 추가해 보안에 대비할 것을 권장

6. list & table 표현

6.1 list

6.1.1 순서 없는 목록

<ul> 사용

6.1.2 순서 있는 목록

<ol> 사용

속성 이름	태그 예시	설명
type	`<ol type="A">`	번호 형식 지정 `1`: 숫자 (기본값), `A`: 대문자, `a`: 소문자, `I`: 대문자 로마 숫자, `i`: 소문자 로마 숫자
start	`<ol start="3">`	목록의 시작 번호를 설정
value	`<li value="2">`	특정 항목의 번호를 직접 지정
reversed	`<ol reversed>`	목록 번호를 역순으로 표시

6.1.3 중첩 목록

항목 내부에 또 다른 ul 또는 ol을 넣어 중첩 가능

6.2 table

태그	설명
`table`	표를 감싸는 태그
`tr`	표 내부의 행 (table row)
`th`	행 내부의 제목 셀 (table heading)
`td`	행 내부의 일반 셀 (table data)

6.2.1 table tag의 attribute

속성 이름	설명
`border`	표의 테두리 두께를 지정하는 속성

`rowspan`	해당 셀이 점유하는 행의 수를 지정하는 속성
`colspan`	해당 셀이 점유하는 열의 수를 지정하는 속성

7. 이미지 & 멀티미디어 표현

7.1 이미지

img tag 를 이용

속성 이름	설명
`src`	음악 파일 경로
`preload`	음악 파일을 모두 불러올 것인지 지정
`autoplay`	음악 파일을 자동으로 재생할 것인지 지정
`loop`	음악을 반복할 것인지 지정
`controls`	음악 재생 도구를 표시할 것인지 지정

 <img src="assets/images.jpg" alt="image" width="100">

7.2 미디어

7.2.1 audio

속성 이름	설명
`src`	음악 파일 경로
`preload`	음악 파일을 모두 불러올 것인지 지정
`autoplay`	음악 파일을 자동으로 재생할 것인지 지정
`loop`	음악을 반복할 것인지 지정
`controls`	음악 재생 도구를 표시할 것인지 지정

<audio src="assets/audio.mp3" controls></audio>

7.2.2 비디오

속성 이름	설명
`src`	동영상 파일 경로
`poster`	동영상 준비 중에 표시될 이미지 파일 경로
`preload`	동영상 파일을 모두 불러올 것인지 지정
`autoplay`	동영상 파일을 자동으로 재생할 것인지 지정
`loop`	동영상을 반복할 것인지 지정
`controls`	동영상 재생 도구를 표시할 것인지 지정
`width`	동영상의 너비를 지정
`height`	동영상의 높이를 지정

 <video width="640" height="360" controls>
      <source src="assets/video.mp4" type="video/mp4">
 </video>

8. 사용자 커뮤니케이션 태그

8.1 form

용자 입력을 묶어 서버로 보내는 태그

속성 이름	값	설명
action	URL	입력 데이터(form data)가 전송될 URL 지정
method	get / post	입력 데이터(form data) 전달 방식 지정

8.2 input

텍스트·버튼·체크박스·라디오 등 단일 입력 항목

`type` 어트리뷰트값	Description
button	버튼 생성
checkbox	checkbox 생성
color	컬러 선택 생성
date	date control (년월일) 생성
datetime	date & time control (년월일시분초) 생성. HTML spec에서 drop되었다.
datetime-local	지역 date & time control (년월일시분초) 생성
email	이메일 입력 form 생성. submit 시 자동 검증한다.
file	파일 선택 form 생성
hidden	감추어진 입력 form 생성
image	이미지로 된 submit button 생성
month	월 선택 form 생성
number	숫자 입력 form 생성
password	password 입력 form 생성
radio	radio button 생성
range	범위 선택 form 생성
reset	초기화 button 생성
search	검색어 입력 form 생성
submit	제출 button 생성
tel	전화번호 입력 form 생성
text	텍스트 입력 form 생성
time	시간 선택 form 생성
url	url 입력 form 생성
week	주 선택 입력 form 생성

8.3 select

복수개의 리스트에서 복수개의 아이템을 선택할 때 사용

태그	설명
select	select form 생성
option	option 생성
optgroup	option을 그룹화한다

8.4 textarea

여러 줄 텍스트 입력

8.5 button

클릭 가능한 버튼

8.6 fieldset/legend

관련 입력 항목 묶음과 그 제목

9. 공간 분할

페이지 레이아웃을 나눌 때 과거에는 table 태그를, 모던 웹에서는 div를 주로 사용

태그	설명
header	헤더를 의미한다
nav	내비게이션을 의미한다
aside	사이드에 위치하는 공간을 의미한다
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다
article	본문의 주내용이 들어가는 공간을 의미한다
footer	푸터를 의미한다

김수진

이전 포스트

👩‍🎨 REST API vs GraphQL

다음 포스트