Post

[HTML] 자주 사용하는 태그 정리

Posted
By chanho 11 min read

오늘은 HTML(HyperText Markup Language)의 자주 사용하는 태그 들에 대해 정리하고자한다.

Semantic Tag

1. <header>

페이지의 머리글 부분, 로고, 네이게이션 링크, 제목 등을 포함한다.

페이지 바닥글 부분으로 저자 정보, 저작권 정보, 연락처 등을 포함한다.

3. <nav>

네비게이션 링크를 위한 태그로 주 메뉴나 목차 등을 포함한다.

4. <article>

독립적인 콘텐츠를 나타내며, 블로그 게시물이나 뉴스 기사 등에 사용된다.

5. <section>

문서의 일반적인 구획을 나타내며, 관련된 콘텐츠 그룹을 표현한다.

6. <aside>

페이지의 주 내용과는 별도로, 사이드바나 콜아웃 박스 같은 콘텐츠를 표현한다.

주요 HTML 태그

1. <html>

전체 HTML 문서의 루트를 정의한다.

Attributes

  • lang: 문서의 주 언어를 지정한다. 한국어: <html lang="ko">
  • xmlns: HTML5에서는 일반적으로 필요하지 않지만, xml 네임스페이스를 지정할 수 있다.

2. <head>

문서의 메타데이터를 포함하는 부분이다.

(해당 태그는 속성을 가지지 않는다.) ‘head’내의 정보는 주로 메기타데이터로 다른 태그들 (‘meta’, ‘link’, ‘script’, ‘style’ 등)을 통해 표현한다.

3. <title>

문서의 제목을 정의한다.

(해당 태그는 속성을 가지지 않는다.)

4. <body>

문서의 본문 내용을 포함한다.

Attributes

  • onload: 문서가 로드될 때 실행할 자바스크립트 코드를 지정한다.
  • onunload: 문서가 언로드될 때 실행할 자바스크립트 코드를 지정한다.
  • bgcolor: 배경 색상을 지정할 수 있다.
  • background: 배경 이미지를 지정할 수 있다.

5. <h1> ~ <h6>

제목 태그로, 다양한 수준의 제목을 나타낸다.

예제

1
2
3
4
5
6

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

🖥️ 출력

h1

h2

h3

h4

h5
h6

6. <p>

단락을 정의한다.

예제

1

<p>p태그 입니다.</p>

🖥️ 출력

p태그 입니다.

7. <a>

하이퍼링크를 생성한다.

Attributes

  • href: 링크의 목적지 URL을 지정한다.
  • target: 링크가 어떻게 열릴지 지정한다.(‘_blank’ 새 탭에서 열기)
  • title: 링크에 대한 추가 정보를 제공한다.

예제

1

<a href="https://github.com/chanhocode" target="_blank">Git</a>

🖥️ 출력

8. <img>

이미지를 삽인한다.

Attributes

  • src: 이미지의 소스 URL을 지정한다.
  • alt: 이미지의 태체 텍스트를 제공한다.
  • width, height: 이미지의 크기를 지정한다.

예제

1
2
3
4

<img
  src="https://e7.pngegg.com/pngimages/992/121/png-clipart-bmp-file-format-bitmap-html-icon-text-rectangle-thumbnail.png"
  alt="html"
/>

🖥️ 출력

html

9. <ul> & <ol>

비순차적(ul) 또는 순차적(0l) 목록을 정의한다.

Attributes

  • type: 목록의 스타일을 지정한다. ex) disc, circle, square
  • start: ol 태그에서 시작 숫자를 지정한다.

10. <li>

목록 항목을 정의한다.

Attributes

  • value: ol 태그 내부의 li에만 지정되며, 목록 항목의 숫자를 지정한다.

예제

1
2
3
4
5
6
7
8
9
10
11

<ul>
  <li>ul-1</li>
  <li>ul-2</li>
  <li>ul-3</li>
</ul>

<ol>
  <li>ol-1</li>
  <li>ol-2</li>
  <li>ol-3</li>
</ol>

🖥️ 출력

  • ul-1
  • ul-2
  • ul-3
  1. ol-1
  2. ol-2
  3. ol-3

11. <div>

컨테이너 역할을 하는 블록 레벨 요소이다. div 태그는 주로 레이아웃과 스타일링을 위해 사용한다.

예제

1
2
3
4

<div style="text-align:center">
  <h1>hi</h1>
  <p>안녕하세요</p>
</div>

🖥️ 출력

hi

안녕하세요

12. <span>

인라인 컨테이너 역할을 하는 요소이다. span태그는 인라인 요소로서 텍스트 또는 기타 요소 내에서 스타일링을 적용하는 데 사용한다.

13. <form>

사용자 입력을 위한 양식을 만들 때 사용 된다.

Attributes

  • action: 폼 데이터가 전송될 서버의 URL을 지정한다.
  • method: 폼 데이터를 전송할 때 사용할 HTTP메소드를 지정한다.
  • enctype: 폼 데이터가 서버로 전송될 때 사용할 인코딩 타입을 지정한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<form action="/submit-form" method="post">
  <label for="username">사용자 이름:</label>
  <input
    type="text"
    id="username"
    name="username"
    placeholder="이름을 입력하세요"
  />
  <small>이름은 50자 이내로 작성해주세요.</small>

  <label for="usermsg">메시지:</label>
  <textarea
    id="usermsg"
    name="usermsg"
    rows="4"
    cols="50"
    placeholder="메시지를 입력하세요"
  ></textarea>

  <button type="submit">제출</button>
</form>

14. <table>

데이터를 행과 열 형태로 표시할 때 사용된다.

Attributes

  • border: 테이블 테두리의 두께를 지정한다.
  • cellpadding: 셀 내부의 여백을 지정한다.
  • cellspacing: 셀 간의 공간을 지정한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>도시</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>서울</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>부산</td>
  </tr>
</table>

🖥️ 출력

이름나이도시
홍길동30서울
김철수25부산

15. <input>

사용자로부터 데이터를 입력받기 위한 양식 필드를 생성한다. 다양한 타입을 가질 수 있다. ex. text, password, checkbox, radio 등

Attributes

  • type: 입력 필드의 타입을 지정한다. (text, password, submit, radio, checkbox 등)
  • name: 입력 필드의 이름을 지정한다.
  • value: 입력 필드의 기본값을 지정한다.
  • placeholder: 입력 필드에 표시할 힌트나 설명을 제공한다.

예제

1
2
3

<input type="radio" />
<input type="checkbox" />
<input type="text" placeholder="placeholder" />

🖥️ 출력

16. <label>

<input> 요소와 같은 폼 컨트롤에 레이블을 붙이기 위해 사용한다. 사용자의 접근성을 향상시킨다.

Attributes

  • for: 이 레이블이 연결된 입력 필드의 ID를 지정한다.

예제

1
2

<label for="username">- 사용자 이름 -</label>
<input type="text" id="username" name="username" />

🖥️ 출력

17. <small>

작은 텍스트를 표시하는데 사용된다. 보통 주석이나 작은 글씨로 표시할 내용에 사용한다.

예제

1
2
3

<label for="username">- 사용자 이름 -</label>
<input type="text" id="username" name="username" />
<small>사용자 이름을 입력하세요.</small>

🖥️ 출력

사용자 이름을 입력하세요.

18. <button>

클릭 가능한 버튼을 만든다. 폼 제출이나 자바스크립트에서 사용하는 버튼 등으로 사용될 수 있다.

Attributes

  • type: 버튼의 타입을 지정한다. (submit, reset, button)
  • disabled: 버튼을 비활성화 한다.

예제

1
2

<button type="button">button</button>
<button type="button" disabled>button</button>

🖥️ 출력

19. <textarea>

여러 줄의 텍스트를 입력받기 위한 대형 입력 필드를 생성한다. 주로 댓글이나 메시지 입력등에 사용된다.

Attributes

  • row, cols: 텍스트 영역의 크기를 지정한다.
  • placeholder: 텍스트 영역에 표시할 설명을 제공한다.
  • name: 텍스트 영역의 이름믈 지정한다.

예제

1

<textarea placeholder="placeholder"></textarea>

🖥️ 출력

20. <select>

드롭다운 선택 메뉴를 만든다. 여러 <option>요소를 포함 하여 사용자가 선택할 수 있는 옵션을 제공한다.

Attributes

  • name: 폼 데이터와 함께 전송될 선택 필드의 이름을 지정한다.
  • multiple: 사용자가 여러 항목을 선택할 수 있도록 한다.
  • size: 표시될 옵션의 수를 지정한다.

예제

1
2
3
4
5

<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="orange">오렌지</option>
</select>

🖥️ 출력

21. <br>

줄바꿈을 위해 사용된다.

예제

1
2
3

<p>hi</p>
<br />
<p>hello</p>

🖥️ 출력

hi


hello

22. <strong> & <em>

텍스트를 강조하기 위한 태그이다. <strong>은 중요한 텍스트를, <em>은 강조할 텍스트를 나타낸다.

예제

1

<strong>중요</strong> <em>강조</em>

🖥️ 출력

중요 강조
Frontend, HTML&CSS
frontend web html
This post is licensed under CC BY 4.0 by the author.

© chanho. Some rights reserved.