카테고리 없음

내가 보려고 한 HTML 요소(Elements & Attributes) 총정리

bstudio 2022. 5. 26. 11:53

양해의 말씀

이 포스팅은 제가 직접 작성한 글은 아닙니다. 인터넷 검색, 구글링을 하다가 블로그에서 귀한 문서를 발견해 제가 웹사이트를 만들어볼까 해서 공부하는데 도움이 될것 같아 가져왔습니다.

매우 전문적이고 귀중한 자료인 것 같아 무례하게 가져온것에 대해 진심으로 양해말씀드리고, 혹시라도 불쾌한 부분이 있으시다면 말씀해주십시요. 바로 비공개화 시키겠습니다

출처는 https://heropy.blog/

HEROPY

웹디자인과 웹개발 기술을 공유하는 HEROPY 온라인 블로그입니다. 오프라인 지식 공유도 매회 진행합니다. 감사합니다.

heropy.blog

감사합니다~ 그리고 아래는 이 원문자의 작성한 글을 그대로 옮겨왔습니다.

이 포스트는 HTML 요소(태그)와 속성에 대해 최대한 객관적이고 핵심적이며 파편화된 많은 정보를 한자리에서 다루기 위해 고민한 결과물이지만,
HTML의 모든 내용을 포함하지 않으며, 일부 주관이 포함되어 있습니다.
가장 정확하게는 W3C 문서가 있지만, 지나치게 기술적으로 서술되어 있어서 이해하기 쉽지 않습니다.
따라서 대부분의 경우, 집단 지성으로 작성되는 최신 버전의 MDN 문서를 확인하는 것이 객관성과 이해도를 동시에 확보할 수 있는 가장 좋은 방법입니다.
만약 이 포스트가 MDN 문서와 다른 부분이 있다면, 당연히 MDN 문서를 더 신뢰하시면 됩니다.
(물론 MDN 문서도 극히 일부 잘못된 내용이 있습니다)

그리고 웹 개발 입문자분들은 당장, 이 HTML 포스트 내용을 정독하기보단 속독을 통해 전반적인 내용을 빠르게 파악하고 필요에 따라 기억을 더듬어 해당 내용을 찾아 사용하시는 방법을 추천합니다.
물론 정독할 수 있는 시간과 환경이 있다면 머릿속에 차곡차곡 꼼꼼하게 정보를 쌓는 방법이 더 좋겠지요.
하지만, 사용 빈도가 압도적으로 높은 상위 몇 개 요소가 있다 보니 더욱이 HTML 정독법은 효율이 떨어진다고 생각합니다.
특히 HTML 학습이 그렇습니다, CSS나 JS 학습은 또 다른 입장입니다.
어디까지나 학습에 도움이 될만한 주관적인 생각이니 참고만 하세요.

항상 공부하시고 노력하시는 모든 분을 존경하며 응원합니다.
감사합니다.

변경사항

2019년 7월

더욱 핵심적인 내용들만 요약 전달하기 위해 일부 내용을 삭제했습니다.
(온라인 강의와 함께 보시는 분들은 현재 포스트에 없는 내용이 있다면 건너뛰세요)

개요

HTML5 기준으로 작성합니다.
모든 브라우저에서 사용할 수 있어야 합니다.(IE 지원 불가는 별도 표시)
Deprecated(더 이상 사용되지 않는) 요소나 속성은 제외합니다.
의미론적(Semantic)인 내용 위주로 작성합니다.
표시적 의미(화면에 표시되는 방식)로 사용되지 않음을 전제하므로 그에 대한 내용은 생략합니다.
빈 태그(Empty Tags)는 <TAG />와 같이 /를 포함하여 표시합니다.
해당 요소에 필수적으로 사용되어야 하는 속성(Required Attributes)은 설명에 (필수)를 표시합니다.(그 외는 모두 선택 속성)
개인적 경험에 의해 사용 빈도, 중요도, 난이도가 높은 요소는 강조/첨언 합니다.
개인적 경험에 의해 사용 빈도, 중요도, 난이도가 낮은 요소는 생략/간소화 합니다.

주요 범위

<html>

HTML 문서의 범위를 설정.

속성의미값

lang

문서의 언어(ISO 639-1)

ko, en…

href	기준 URL	URL
target	A 요소처럼 target 속성을 사용하는 요소의 기본값	_self, _blank	_self

rel	(필수)현재 문서와 외부 리소스와의 관계(Link Types)	stylesheet, icon…
href	외부 리소스의 URL	URL
type	외부 리소스의 MIME 타입	text/css, image/x-icon…

charset	문자인코딩 방식	UTF-8, EUC-KR…
name	메타 데이터의 이름(정보의 종류)	author, description…
http-equiv	서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공)	refresh, X-UA-Compatible…
content	name, http-equiv의 값

start	항목에 매겨지는 번호의 시작 값	숫자(Number)
type	항목에 매겨지는 번호의 유형	a, A, i, I, 1

download	이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미	불린(Boolean)
href	링크 URL	URL		생략 가능
rel	현재 문서와 링크 URL의 관계(Link Types)	license, prev, next…
target	링크 URL의 표시(브라우저 탭) 위치	_self, _blank	_self
type	링크 URL의 MIME 타입	text/html…

cite	변경을 설명하는 리소스의 URI	URI
datetime	변경이 일어난 유요한 날짜 문자	Date

src	(필수)이미지 URL	URL
alt	(필수)이미지의 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	w, x
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드	metadata
src	콘텐츠 URL	URL
muted	음소거 여부	불린(Boolean)

name	프레임의 이름
src	포함할 문서의 URL	URL
width	프레임의 가로 너비
height	프레임의 세로 너비
allowfullscreen	전체 화면 모드 사용 여부	불린(Boolean)
frameborder	프레임 테두리 사용 여부	0, 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	불린(Boolean) or allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능 , allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

width	캔버스의 가로 너비
height	캔버스의 세로 너비

async	스크립트의 비동기적(Asynchronously) 실행 여부	불린(Boolean)	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	불린(Boolean)	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨
type	MIME 타입	text/javascript(기본값)

abbr	열에 대한 간단한 설명
headers	관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan	확장하려는(병합) 열의 수		1
rowspan	확장하려는(병합) 행의 수		1
scope	자신이 누구의 ‘머리글 칸’인지 명시	col: 자신의 열 colgroup: 모든 열 row: 자신의 행 rowgroup: 모든 행 auto	auto

headers	관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan	확장하려는(병합) 열의 수	1
rowspan	확장하려는(병합) 행의 수	1

action	전송한 정보를 처리할 웹페이지의 URL	URL
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
method	서버로 전송할 HTTP 방식	GET, POST	GET
name	고유한 양식의 이름
novalidate	서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target	서버로 전송 후 응답받을 방식을 지정	_self, _blank	_self

button	일반 버튼	<button>처럼 사용
checkbox	체크박스
color	색상	IE 지원 불가
email	이메일
file	파일
hidden	보이지 않지만 전송할 양식	value 속성으로 값을 지정
image	이미지 제출 버튼	<img />처럼 사용
number	숫자
password	비밀	가려지는 양식
radio	라디오 버튼	같은 name 속성 그룹 내 하나만 선택 가능
range	범위 컨트롤	min, max, step, value(기본값) 속성 사용
reset	초기화	해당 <form> 범위 내 모든 양식
search	검색
submit	제출 버튼	해당 <form> 범위 내 고유한 양식
tel	전화번호
text	일반 텍스트
url	절대 URL

autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)	문서 내 고유해야 함
disabled	버튼을 비활성화	불린(Boolean)
form	<form>의 id 속성 값		해당 <form>의 후손이 아닐 경우만
name	폼 데이터와 함께 전송되는 버튼의 이름
type	버튼의 타입	button, reset, submit

disabled	그룹 내 모든 양식 요소를 비활성화	불린(Boolean)
form	그룹이 속할 하나 이상의 <form>의 id 속성 값
name	그룹의 이름

label	(필수)옵션 그룹의 이름
disabled	옵션 그룹을 비활성화	불린(Boolean)

disabled	옵션을 비활성화	불린(Boolean)
label	표시될 옵션의 제목		생략되면 포함된 텍스트를 표시
selected	옵션이 선택되었음을 표시	불린(Boolean)
value	양식으로 제출될 값		생략되면 포함된 텍스트를 값으로 사용

max	작업의 총량	숫자(Number)
value	작업의 진행량	숫자(Number)	max 속성을 생략할 경우 0~1 사이의 숫자여야 함

<link />, <a>	hreflang	현재 페이지의 대체 언어(ISO 639-1)	ko, en…	다른 언어 또는 지역별 여러 버전의 페이지가 있는 경우
<ol>	reversed	항목을 역순으로 설정		IE 지원 불가
<link>, <img />, <video>, <script>	crossorigin	가져 오기가 CORS를 사용하여 수행되어야하는지 여부	anonymous, use-credentials
<img />	ismap	서버 측 이미지 맵으로 지정해 클릭하여 좌표를 쿼리스트링으로 서버에 전송할지 여부	불린(Boolean)	<img />가 유효한 href 속성을 가진 <a>의 하위 요소인 경우에만 허용
<img />	usemap	클라이언트 측 이미지 맵으로 지정	<map>의 # + name 속성 값	<a>, <button>의 하위 요소인 경우 사용 불가
<form>	accept-charset	서버가 받을 문자인코딩 방식	UTF-8, EUC-KR…	UNKNOWN
<form>	enctype	method속성이 POST일 경우, 서버로 전송하는 콘텐츠의 MIME 타입
<input />	accept	서버가 받을 파일 종류	파일 확장자(.jpg, .png..), MIME 타입, audio/, video/, image/*	type="file"
<input />	width	이미지의 가로 너비	숫자(Number)	type="image"
<input />	height	이미지의 가로 너비	숫자(Number)	type="image"
<input />, <button>	formaction	양식을 제출할 때 양식 데이터를 보낼 위치	URL	type="submit", type="image", form의 속성보다 우선
<input />, <button>	formenctype	양식 데이터를 서버로 보내기 전에 인코딩 할 방법을 지정	-	type="submit", type="image", form의 속성보다 우선
<input />, <button>	formmethod	양식 데이터를 보내는 방법	GET, POST	type="submit", type="image", form의 속성보다 우선
<input />, <button>	formnovalidate	양식 데이터의 유효성을 검사하지 않도록 지정	불린(Boolean)	type="submit", type="image", form의 속성보다 우선
<input />, <button>	formtarget		_self, _blank	type="submit", type="image", form의 속성보다 우선
<input />, <textarea>	minlength	입력 가능한 최소 문자 수	숫자(Number)	type="text", type="email", type="password", type="tel", type="url"
<input />	pattern	양식의 값을 검사하는 정규표현식	정규표현식(RegExp)	type="text", type="search", type="tel", type="url", type="email"
<input />, <textarea>, <select>	required	필수 여부	불린(Boolean)
<input />	size	양식의 가로 너비	숫자(Number, 20)	평균 문자 너비를 기준
<input />, <textarea>	spellcheck	맞춤법 및 문법 검사의 필요 여부	true, false
<button>	value	폼 데이터와 함께 전송되는 버튼의 초기값		IE 지원 불가
<textarea>	cols	양식의 가로 너비	숫자(Number, 20)	평균 문자 너비를 기준

내가 보려고 한 HTML 요소(Elements & Attributes) 총정리

양해의 말씀

변경사항

2019년 7월

개요

주요 범위

<html>

<head>

<body>

메타데이터

<title>

<base />

<link />

<meta />

<style>

콘텐츠 구분

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

<header>

<footer>

<main>

<article>

<section>

<aside>

<nav>

<address>

<div>

문자 콘텐츠

<ol>, <ul>, <li>

<ol>

<li>

<dl>, <dt>, <dd>

<p>

<hr />

<pre>

<blockquote>

인라인 텍스트

<a>

<abbr>

<b>

<mark>

<em>

<strong>

<i>

<dfn>

<cite>

<q>

<u>

<code>

<kbd>

<sup>, <sub>

<time>

<span>

<br />

수정

<del>

<ins>

멀티미디어

<img />

<audio>

<video>

<figure>, <figcaption>

내장 콘텐츠

<iframe>

<canvas>

스크립트

<script>

<noscript>

표 콘텐츠

<table>, <tr>, <th>, <td>

<th>

<td>

<caption>

<colgroup>, <col />

<thead>, <tbody>, <tfoot>

양식

<form>

<input />

데이터 종류(Type)의 값(Values)

<label>

<button>