[HTML] HTML 태그 정리

🔗 HTML 기본 구조

<html> : 웹 페이지의 시작과 끝

<head> : <meta>, <title> 등을 포함

<meta> : 웹 문서 정보 (해당 문서가 어떤 내용을 담고 있는지, 키워드는 무엇인지, 누가 만들었는지 등)

<title> : 웹 문서 이름

<body> : 웹 문서 본문, 실제 화면에 나타나는 내용 기술

🔗 기본 태그

<div> : 레이아웃 나눌 때 사용

<span> : 비어 있는 태그 (역할 X)

<p> : 문단

<br> : 줄바꿈

🔗 heading 태그

<h1>~<h6> : 제목 (h1 -> h6으로 갈수록 소제목)

🔗 text 태그

<b> : 진하게

<strong> : 진하게 (의미강조)

<i> : 기울이기

<em> : 기울이기 (의미강조)

<mark> : 색상 강조

<sup> : 위 첨자

<sub> : 아래 첨자

<s> : 취소선

<del> : 취소선 (실제 취소)

<u> : 밑줄

<small> : 작게

<big> : 크게

<kbd> : 키보드 활자

<code> : 컴퓨터 코드

<samp> : 프로그램 처리 결과 표시

<hr> : 구분선 (= 위와 아래의 주제가 바뀐다.)

<blockquote> : block 속성 인용문

<q> : 인용문

<pre> : 입력한 텍스트를 그대로 표현

🔗 list 태그

<ul> : unordered list (순서 X)

<li>

<ol> : ordered list (순서 O)

<li>

<dl> : definition list (정의)

<dt> : 타이틀

<dd> : 설명

▪ 확정구조

🔗 img 태그

<img src="이미지 경로" alt="이미지 대체 텍스트">

▪ placeholder

이미지 공간을 미리 확보하는 역할을 한다.

▪ longdesc

alt를 더 자세히(길게) 쓸 수 있다.

🔗 video, audio 태그

<iframe src="영상 주소/경로">

<embed src="영상 주소/경로">

<video src="영상 주소/경로">

<audio src="음성 경로">

▪ <source src="">

<source>를 사용하면 영상(음성) 여러 개 첨부 가능

▪ 재생 설정

controls : 제어부

loof : 반복

muted : 음소거

autoplay : 자동 재생

poster : 영상 대체 이미지

preload : 백그라운드 다운로드

🔗 a 태그 (내부 -> 외부)

<a href="페이지 주소" target=""> : 페이지 이동

<a href="파일 이름"> : 파일 다운로드

<a href="mailto:메일 주소?subject=메일 제목"> : 메일 보내기

<a href="tel:+"> : 전화걸기

<a href="#"> : 바로 가기

▪ target

target="_self" : 현재 창에서 열기

target="_blank" : 새 창에서 열기

🔗 table 태그

4*2 table인 경우

<table>

<caption> : table 이름

<thead> : 분류명

<tbody> : data

<tfoot> : 결과

<tr> : 행

<th> : 열 (thead)

<td> : 열 (tbody)

▪ span

rowspan="병합할 행 갯수" : 행 병합

colspan="병합할 열 갯수" : 열 병합

🔗 form 태그, input 태그

<form> : input 내 data를 담아 전송하는 데이터 운송 바구니

<fieldset> : 그룹화

<legend> : form 이름

<input:text> : 텍스트

<input:password> : 비밀번호

<input:email> : 이메일

<input:url> : url 주소

<input:number> : 스피너 박스

<input:range> : 바벨 바

<input:radio> : 라디오 버튼 (아래에 자세히 설명)

<input:checkbox> : 체크 박스 (아래에 자세히 설명)

<textarea> : 사용자가 직접 입력할 수 있는 텍스트 박스

<select> : 콤보 박스 (아래에 자세히 설명)

<input:search> : 검색

<input:image> : 이미지 버튼

<input:button> : 웹 버튼 (아래에 자세히 설명)

<input:file> : 파일 선택 버튼

<input:submit> : 확인 버튼 (전송)

<input:reset> : 취소 버튼 (초기화)

<input:date> : 년 월 일

<input:month> : 년 월

<input:week> : 년 주

<input:time> : 오전/후 시 분

<input:datetime>

<input:datetime-local> : 년 월 일 오전/후 시 분

▪ label이 있을 경우

<label>의 for=""와 <input>의 id=""를 연결해준다.

▪ input 태그 설정

required : 필수 입력

maxlength : 최대 입력 가능 글자 수

placeholder : 표시할 값

autofocus : 최초 자동 초점

value : 초기값

readonly : 읽기 전용 (수정 X)

min : 최소값

max : 최대값

step : 간격

autocomplete="on" : 검색 기록 자동 저장

▪ <input:radio> VS <input:checkbox>

라디오 박스는 중복 체크가 불가능하기 때문에 name="" 을 설정하여 라디오 그룹을 지정한다.

체크 박스는 중복 체그가 가능하기 때문에 name=""을 설정하지 않아도 된다.

▪ <input:button> VS <button>

<input:button>은 웹에서 동작 가능한 버튼이다.

<button>은 웹과 모바일 모두에서 동작 가능한 버튼이다.

▪ <select>

<select>

<optgroup> : 옵션 그룹 설정

<option> : 옵션 설정

🔗 semantic 태그

<header> : 상단 로고, 메뉴 등

<section> : 컨텐츠

<aside> : 좌·우 사이드 베너 등 (선택적)

▪ <nav> : 메뉴 생성

▪ global : 전역변수. 어디서든지 사용할 수 있는 고정된 값이다.

<header> : global O

<section> : global X

<footer> : global O

🔗 HTML5 추가 태그

<figure> : 주 컨텐츠가 이미지일 때 사용하는 태그

<img> : 이미지

<figcaption> : 이미지 설명

<time datetime="년-월-일"T시:분:초">

<progress> : 진행 상태 (실시간)

<meter> : 진행 상태 (갱신)

<address> : 제작자 및 회사 정보 (메일, 주소, 전화번호 등)

💡 같이 보면 좋을 Post

HTML / CSS / JavaScript 의 역할 및 차이점 (쉽고 빠르게 설명!)

1. HTML (Hypertext Markup Language) - 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어 - 웹의 뼈대, 구조를 설계하는 역할 2. CSS (Cascading Style Sheets) - 웹 문서의 전반적인 스타일을 미리 저장..

devjindev.tistory.com

👩‍💻 Hong Yujin

[HTML] HTML 태그 정리

티스토리툴바