Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
05-16 04:51
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] HTML5 Cheat Sheet 본문

Programming/HTML|CSS

[Programming/HTML|CSS] HTML5 Cheat Sheet

scii 2020. 12. 20. 16:32

주석

태그 이름 표시 형태 설명
<!-- 주석 -->   부가 설명

HTML 구조 태그

태그 이름 표시 형태 설명
<!DOCTYPE html> block 문서 형태
<html> none 문서 자체
<head> none 문서 머리
<title> none 문서 제목
<meta> none 문서 추가 정보
<body> block 문서 본문

파일 태그

태그 이름 표시 형태 설명
<link> none 외부 파일을 추가한다.
<style> none 스타일시트
<script> none 스크립트

공간 태그

태그 이름 표시 형태 설명
<div> block block 형식의 공간
<span> inline inline 형식의 공간

시멘틱 구조 태그

태그 이름 표시 형태 설명
<article> block 본문
<aside> block 수직 목록
<nav> block 네비게이션 목록
<section> block 구역
<header> block 머리
<footer> block 꼬리

시멘틱 요소 태그

태그 이름 표시 형태 설명
<figure> block 그림
<figcaption> block 그림 제목
<details> block 세부 설명
<summary> block 요약
<output> inline 출력 결과

제목 태그

태그 이름 표시 형태 설명
<h1> ~ <h6>   제목

글자 태그

태그 이름 표시 형태 설명
<p> block 문단
<br> block 개행
<hr> block 수평선
<ruby> inline 루비 문자
<rt> block 루비 문자의 큰 글자
<rp> none 루비 문자 지원 여부 판별

글자 형태 태그

태그 이름 표시 형태 설명
<b> inline 굵은 글자
<i> inline 기울어진 글자
<small> inline 작은 글자
<sub> inline 아래에 달라 붙는 글자
<sup> inline 위에 달라 붙는 글자
<ins> inline 밑줄 글자
<del> inline 가운데 줄이 그어진 글자

리스트 태그

태그 이름 표시 형태 설명
<ul> block 순서가 없는 목록
<ol> block 순서가 있는 목록
<li> list-item 목록 요소
<dt> block 정의 용어
<dd> block 정의 설명
<dl> block 정의 목록

테이블 태그

태그 이름 표시 형태 설명
<table> table
<caption> table-caption 표 제목
<thead> table-header-group 표 머리
<tbody> table-row-group 표 본문
<tfoot> table-footer-group 표 꼬리
<colgroup> table-column-group 표 열 그룹
<col> table-column 표 열
<tr> table-row 표 행
<th> table-cell 표 제목 데이터
<td> table-cell 표 데이터

멀티미디어 태그

태그 이름 표시 형태 설명
<img> inline-block 이미지
<audio> inline-block 음악
<video> inline-block 동영상
<source> none 멀티미디어 파일 지정
<track> none 동영상 자막 지정
<svg> inline-block SVG 객체
<canvas> inline-block Canvas 객체

입력 양식 태그

태그 이름 표시 형태 설명
<form> block 입력 양식
<fieldset> block 입력 양식 그룹
<legend> block 범례
<button> inline-block 버튼
<label> inline-block 입력 양식 설명
<input> inline-block 입력 양식 요소
<textarea> inline-block 문자 입력 양식
<select> inline-block 선택 입력 양식
<optgroup>   옵션 그룹
<option>   옵션

기타 태그

태그 이름 표시 형태 설명
<progress> inline-block 진행 상태 표시바
<meter> inline-block 상태 표시바

 

Comments