HTML TAG

Languages/HTML & CSS

HTML TAG

개발자 나르 2021. 6. 13. 16:00

HTML 의 주로 사용되는 태그 정리

<html></html> - 가장 밖에서 사용되는 웹페이지의 시작과 마무리

속성:lang(문서의 언어)

<head></head> - 콘텐츠를 보여주는 것 이외의 모든 설정 태그들을 넣는다.

<title></title> - 웹브라우저의 제목이 되는 태그.

<style></style> - html 내부에서 css를 사용할 때 사용되는 태그.

속성 : type - 기본값 (text or css)

<link /> - 외부의 css파일을 불러올 때 사용되는 태그.

속성: rel - (필수)현재 문서와 외부 리소스와의 관계(링크타입)

href - 외부 리소스의 url(주소)

type - 외부 리소스의 타입

<body></body> - 실제로 화면을 구성하는 태그들을 넣는다.

<header></header> - 제목을 지정하는 <body>의 윗부분을 주로 사용

<footer></footer> - 제작정보와 저작권정보 등 <body>의 밑부분을 주로 사용

<nav></nav> - <body>의 메뉴판 같은 느낌으로 사용가능. 따로 사용해도 됨.

<aside></aside> - 본문 이외의 내용들

<div></div> - 컨텐츠들을 목적에 따라 묶는용도(레이아웃을 나눌 때 사용된다) 줄바꿈 o

<span></span> - <div>와 같은 역할. 줄바꿈 x

<meta></meta> - 웹 페이지의 문자 인코딩 방식을 넣는 태그

속성: charset - 문자인코딩 방식 ex)UTF-8 ...

name - 메타 데이터의 이름(정보의 종류)

http-equiv - 서버/사용자 에이전트의 방식 변경에 대한 지시

content - name,htt-equiv 의 값

<a></a> - 다른 링크로 넘어가도록 돕는 태그. 줄바꿈 x

속성: download - 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 (값 불린)

href - 링크 url

rel - 현재 문서와 링크 url의 관계

target - 링크 url의 표시 위치 (기본값 _self , _blank)

type - 링크 url의 타입

<h1></h1> - 제목을 표시할 때 사용하는 태그. 1~6까지 있다. 줄바꿈 o

<p></p> - 문단을 나눌 때 사용하는 태그. 일반 텍스트 표시할 때 주 사용. 줄바꿈 o

<br /> - 줄바꿈을 할 때 사용하는 태그.

<img /> - 이미지를 보여주는 태그.

속성: src - (필수) 이미지 URL (값:URL)

alt - (필수) 이미지의 대체문자

width - 이미지의 가로 너비

height - 이미지의 세로 너비

srcset - 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의

sizes - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

<form></form> - 내부에 입력하는 값들을 관리해주는 태그.

속성: action - 전송한 정보를 처리할 웹페이지의 URL (값:URL)

autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 (값:on/off // 기본값:on)

method - 서버로 전송할 HTTP방식 (값:get,post // 기본값:get)

name - 고유한 양식의 이름

novalidate - 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정

target - 서버로 전송 후 응답받을 방식을 지정 (값:_self,_blank // 기본값:_self)

<input /> - <form>태그안에 들어가는 태그로 사용자에게 입력 받을 데이터 양식.

속성: autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 (값:on/off)

autofocus - 페이지가 로드될 때 자동으로 포커스 (값:불린 // 특징: 문서 내 고유해야함)

checked - 양식이 선택되었음을 표시 (값:불린 // 특징: type 속성같이 radio,checkbox일 경우)

disabled - 양식을 비활성화 (값:불린)

form - <form>의 id 속성값 (특징: 해당 <form>의 후손이 아닐 경우만)

list - 참조할 <datalist>의 id 속성값

max - 지정 가능한 최대 값 (값:숫자 // 특징: 속성값이 숫자일경우만, min 속성보다 큰값만 허용)

min - 지정 가능한 최소 값 (값:숫자 // 특징: 속성값이 숫자일경우만, max 속성보다 작은값만 허용)

maxlength - 입력 가능한 최대 문자 수 (값:숫자 // 기본값:524288 // 특징:속성값이 문자,email,비밀번호,tel,url)

multiple - 둘 이상의 값을 입력할 수 있는지 여부 (값:불린 // 특징: 속성값이 email,파일/email은 ,로 구분)

name - 양식의 이름

placeholder - 사용자가 입력할 값의 힌트 (특징: 속성값이 문자,검색,tel,url,email)

readonly - 수정 불가 읽기전용 (값:불린)

step - 유효한 증감 숫자의 간격 (값:숫자 // 기본값:1 // 특징: 속성값이 숫자 범위)

src - 이미지의 URL (값:URL // 특징:속성값 이미지)

alt - 이미지의 대체 문자 (특징:속성값 이미지)

type - 입력 받을 데이터의 종류 (값:별도 정리 // 기본값:문자)

value - 양식의 초기값

<input />의 type의 값

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

<label></label> - <input />태그의 라벨을 붙일 때 사용

라벨 가능 요소: <button> , <input> , <progress> , <select> , <textarea>

속성: for - 참조할 라벨 가능 요소의 id 속성값

ex)

<button></button> - 페이지의 버튼을 만들어서 <form>에 전송하거나 기본페이지로 이동시킨다.

속성: autofocus - 페이지가 로드될 때 자동으로 포커스 (값:불린 // 특징: 문서 내 고유해야함)

disabled - 버튼을 비활성화 (값:불린)

form - <form>의 id 속성값 (특징: 해당 <form>의 후손이 아닐 경우만)

name - 폼 데이터와 함께 전송되는 버튼의 이름

type - 버튼의 타입 (값:button,reset,submit)

<script></script> - javascript 코드 넣을 때 주 사용

속성: async - 스크립트의 비동기적 실행 여부 (값:불린 // 특징 src 속성 필수)

defer - 문서 파싱(구문 분석) 후 작동 여부 (값:불린 // 특징 src 속성 필수)

src - 참조할 외부 스크립트 URL (값:URL // 특징 포함된 스크립트 코드 무시됨)

type - 타입 (기본값:text/javascript)

<li></li> - <ul> 또는 <ol> 안에 항목을 나열할 때 사용

<ul></ul> - 앞에 숫자가 안붙고 모양이 붙거나 css로 아무것도 없이 순서를 나열할 때 사용

<ol></ol> - 앞에 숫자가 붙는 순서가 있이 나열할 때 사용

<iframe></iframe> - 외부 페이지를 삽입하는 태그.

속성: name - 프레임의 이름

src - 포함할 문서의 URL (값:URL)

width - 가로너비

height - 세로 너비

allowfullsreen - 전체 화면 모드 사용 여부 (값:불린)

frameborder - 프레임 테두리 사용 여부 (값:0 or 1, 기본값: 1)

sandbox - 보안을 위한 읽기 전용으로 삽입

샌박의 값 : 불린 or allow-form/양식제출 가능, allow-scripts/스크립트 실행 가능,

allow-same-origin/같은 출처(도메인)의 리소스 사용 가능

<strong></strong> - 내용의 강조를 위해 진하게 표시 <p>와의 차이는 의미없이 진하게 표시

<em></em> - 내용의 강조를 위한 기울임 표시 <i>와의 차이는 의미없이 기울임 표시

모든 HTML 태그에 공통적으로 사용 가능한 속성.

class - 공백으로 구분된 요소의 별칭. (CSS 혹은 JS의 요소를 통해서 요소를 선택하거나 접근.)

id - 문서에서 고유한 식별자를 의미. (CSS 혹은 JS의 요소를 통해서 요소를 선택하거나 접근.)

style - 태그에 적용할 CSS를 선언

title - 태그의 정보를 지정

lang - 태그의 언어를 지정

hidden - 태그를 숨김

data-* - 사용자 정의 데이터 속성을 지정. (HTML에 JS에서 이용할 수 있는 데이터를 저장하는 용도)