[HTML] 태그(Tag) 정리

HTML 및 CSS 공부를 시작했다.

과외를 받을까 했는데 직장인의 시간적 제약도 있고, 맞는 수업 스타일 찾는 것도 쉽지 않을 것 같아 인강을 선택했다.

인강은 인프런에서 <제대로 파고드는 HTML CSS - by 얄코(Yalco)> 강의를 결제했고, 총 시간은 11시간이 조금 넘는다.

​

수강한 걸 까먹지 않기 위해 어느 정도 타임라인이 차고 배운 걸 차곡차곡 정리해 보고자 한다.

(수정이 필요하거나 틀린 내용이 있을 수 있습니다. 혹시 있다면 알려주시면 감사드리겠습니다!)

 

---

 

🧰 학습 준비물

: Visual Studio Code

Visual Studio Code - Code Editing. Redefined

 

평소에 VSCode를 잘 사용하지 않아서 익숙해지는 데 시간이 좀 걸리려나 했는데

인강에서 친절하게 알려주시기도 하고, 플러그인도 이것저것 설치하니 금방 익숙해졌다.

​

---

 

📚 사전에 알면 좋은 지식

1. HTML(HyperText Markup Language)는 웹의 구조를 정의하는 마크업 언어이다.

→ 즉, 프로그래밍 언어는 아님!

​

2. MDN 사이트를 잘 활용하자!

HTML: Hypertext Markup Language | MDN

 

느낌상 HTML, CSS, JS 등에 관련하여 거의 공식 문서처럼 활용되는 곳.

한국어로 번역도 잘 되어 있어서 참고하기 굉장히 좋다!

​

3. HTML은 웹 페이지의 구조와 의미를 정의하는 데 사용되어야 한다.

스타일(예시 : 글꼴 크기, 색상, 여백 등)은 CSS를 통해 지정하는 것이 표준적인 접근 방식이다.

 

---

 

🏗️ HTML 기초 정리

HTML은 태그(Tag)로 구성된다.

• 여는 태그: <태그명>
• 닫는 태그: ​ </태그명> ​
• 일부 태그는 닫는 태그가 없음 (self-closing)

태그	영어(내 추측)	설명	비고
`<h1> </h1>`	header	제목	`<h1> ~ <h6>` 까지 존재
`<p> </p>`	paragraph	문단
`<strong> </strong>`	strong	매우 중요한(긴급한) 내용 표시	② 참고
`<em> </em>`	emphasis	강조되는 내용 표시	③ 참고
`<sup> </sup>`	superscript	상위 첨자 요소	1st, 2nd 등 지수나 서수를 표현할 때만 사용한다.
`<sub> </sub>`	subscript	아래 첨자 요소	H2O 등 각주, 변수, 화학식 등을 표현할 때만 사용한다.
`<u> </u>`	underline	글자(텍스트)로 표현되지 않는 주석이 있는 텍스트	철자가 틀렸을 경우 등에 사용한다. (④ 참고)
`<s> </s>`	strikethrough	취소선
`<blockquote> </blockquote>`	blockquote	긴 인용문 블록
`<q> </q>`	quotation	짧은 인라인 인용문
`<cite> </cite>`	cite	저작물의 출처 표기	제목을 반드시 포함해야 한다.
`<mark> </mark>`	mark	관련성 표시	⑤ 참고
`<abbr> </abbr>`	abbreviation	준말 / 머리글자	속성인 `title` 활용해 전체 의미를 제공할 수 있다.
`<li> </li>`	list item	목록의 항목
`<ol> </ol>`	ordered list	정렬된 목록	1촌 자식은 오직 `<li>` 태그만 가능하다. 다른 태그가 바로 올 수 없음!
`<ul> </ul>`	unordered list	정렬되지 않은 목록
`<dl> </dl>`	description list	설명 목록
`<dt> </dt>`	description term	설명 또는 정의 목록에서 용어 지정	`<dl>` 요소 안에서만 사용되어야 한다.
`<dd> </dd>`	definition description	앞선 <dt> 에 대한 설명 또는 정의
`<table> </table>`	table	테이블
`<caption> </caption>`	caption	표의 설명 또는 제목	선택사항
`<tr> </tr>`	table row	테이블의 행
`<td> </td>`	table data cell	테이블의 데이터 셀	⑥ 참고
`<th> </th>`	table header cell	열 또는 행의 헤더	⑥ 및 ⑦ 참고
`<thead> </thead>`	table header (group)	테이블의 헤더 부분
`<tbody> </tbody>`	table body (group)	테이블의 본문
`<tfoot> </tfoot>`	table footer (group)	테이블의 푸터 부분
`<colgroup> </colgroup>`	column group	열들의 그룹화	`<caption>` 보다 뒤, 그 외 요소보다 앞에 와야 함
`<col> </col>`	column	열의 속성 지정	`span` 속성으로 열 수 지정
`<a> </a>`	anchor	하이퍼링크 생성	⑧ 참고
`<address> </address>`	address	연락처 정보 표시
`<form> </form>`	form	정보 제출을 위한 태그 포함	`autocomplete` 속성 온오프 여부에 따라 자동완성 기능 온오프가 가능하다.
`<input> </input>`	input	입력 값을 받는 필드	⑨ 참고
`<label> </label>`	label	<input> 요소의 설명
`<button> </button>`	button	버튼	`type` 속성 : `submit` / `reset` / `button`
`<fieldset> </fieldset>`	field set	form 태그 내 입력 요소와 라벨의 그룹화
`<legend> </legend>`	legend	<fieldset> 요소의 설명
`<textarea> </textarea>`	text area	여러 줄의 텍스트를 입력받을 수 있는 요소
`<select> </select>`	select	선택 드롭다운 목록
`<option> </option>`	option	<select> 의 각 항목(옵션)
`<optgroup> </optgroup>`	option group	옵션의 그룹	`label` 속성으로 그룹명을 지정해 줄 수 있다.
`<datalist> </datalist>`	data list	다른 컨트롤에서 선택할 수 있는 옵션 목록	`<input>` 태그의 `list` 와 `<datalist>` 의 `id` 가 같게 해줘야 한다.
`<progress> </progress>`	progress	작업의 완료 정도(표시줄)	예시: 진행률 등
`<meter> </meter>`	meter	범위 내의 스칼라 값 또는 백분율 값	예시: 점수 등
`<pre> </pre>`	preformatted	미리 서식을 지정한 텍스트
`<iframe> </iframe>`	inline frame	웹 페이지 안에 다른 웹 페이지를 삽입하는 요소	❌ 권장되지 않는다!
`<span> </span>`	span	인라인 컨텐츠를 묶는 비어 있는 요소
`<div> </div>`	division	블록 컨텐츠를 묶는 비어 있는 요소
`<br>`	line break	줄바꿈	① 참고
`<hr>`	horizontal rule	가로줄	① 참고
`<img>`	image	이미지	① 및 ⑩ 참고

 

① 닫는 태그 사용하지 않는다.

 

② `<strong>` 태그는 브라우저 상에서는 굵은 글씨로 렌더링 되지만, 굵은 스타일을 보여주기 위한 요소로 사용되는 것이 아닌, 중요하거나 강조가 필요한 내용에 사용되어야 한다. 스타일 자체는 CSS에서 조절!

 

③ `<em>` 태그는 브라우저 상에서는 기울여진 글씨로 렌더링 되지만, 기울임체 스타일을 보여주기 위한 요소로 사용되는 것이 아닌, 주변 텍스트에 비해 강조된 부분을 표현할 때 사용되어야 한다. 스타일 자체는 CSS에서 조절!

 

④ 원래 `<u>` 태그는 밑줄을 긋기 위한 용도로 사용되었으나, HTML 5부터는 새롭게 의미가 재정의되었다. 시각적인 강조가 아닌, 철자 오류 강조나 고유명사 등 관습적으로 강조되지만 강세를 두지 않는 텍스트에 사용되어야 한다. 스타일 자체는 CSS에서 조절!

 

⑤ `<mark>` 태그는 브라우저 상에서는 형광펜 효과처럼 렌더링 되지만, 표시만을 위한 요소로 사용되는 것이 아닌, 관련이 있거나 주시해야 하는 부분에 사용되어야 한다. 스타일 자체는 CSS에서 조절!

 

⑥ `<th>` 혹은 `<td>` 태그에서 열 병합일 경우 `colspan="[숫자]"` / 행 병합일 경우 `rowspan="[숫자]"` 속성을 붙인다.

 

⑦ `<th>` 태그에서 열들의 머리가 되는 경우 `scope="col"` / 행들의 머리가 되는 경우 `scope="row"` 속성을 붙인다.

속성을 붙인다고 해서 육안으로 달라지는 것은 없지만, 컴퓨터 혹은 코드를 읽는 사람들에게 좀 더 체계적인 정보를 제공할 수 있다.

 

⑧ `<a>` 태그에서 주요 속성으로는 `href` 와 `target` 이 있다. `href` 에는 하이퍼링크가 가리키는 URL을, `target` 에는 연결되는 URL이 표시되는 위치를 나타낸다. `target` 에는 속성 중 `_self` (현재 창) / `_blank` (새 창) / `_parent` (부모 프레임) / `_top` (최상위 프레임) 을 선택하여 입력한다.

* `id` 값을 이용해 요소로 접근 가능하다. `href="#[id값]"`

* `_blank` 속성으로 지정해 주었을 경우, 텍스트나 내부 이미지의 `alt` 를 명시해 주는 것을 권장한다.

 

⑨ `<input>` 태그의 타입은 굉장히 다양하다. 타입을 지정해 주지 않은 경우 기본으로는 `text` 로 설정된다. 또한 각 타입별 속성도 다양하다.(아래 링크 참조!)

* `<input>` 태그의 `id` 와 `<label>` 태그의 `for` 속성 값을 같게 하여 연관 지을 수 있다.

(예를 들어 체크 박스에서 `<label>` 만 클릭해도 체크가 됨)

* `radio` 버튼 타입의 경우, 하나의 그룹으로 인식되게 하려면 각 버튼의 `name` 을 동일하게 지정해줘야 한다.

* `disabled` 속성과 `readonly` 속성은 둘 다 수정할 수는 없다는 점에서 공통되지만, 그 값이 폼 제출 시 전송이 되냐 안 되냐는 차이가 있다. (`readonly` 는 전송이 됨)

<input>: The HTML Input element - HTML | MDN

 

⑩ `<img>` 태그의 속성에는 `src` (이미지의 URL) / `alt` (대체 텍스트) / `title` (툴팁) / `width` (너비) / `height` (높이) 등이 있다. `src` 는 필수이며, 이외에는 필수는 아니지만 `alt` 의 경우에는 권장된다. `title` 의 경우 `alt` 에서 지정한 내용과의 중복을 지양해야 한다.

 

---

 

* 참고했던 자료 및 출처:

- MDN 홈페이지

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

- 얄코 홈페이지

얄코 홈

 

 

네이버 블로그에 작성한 게시글 이전, 2025. 5. 23. 작성