반응형
주석 태그
- <!-- 주석 -->
- 설명 : 부가 설명
<!-- 주석 -->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
- 설명 : 네비게이션 목록
- <selection>
- 표시 형태 : 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
- 설명 : 상태 표시바
참고
모던 웹 디자인을 위한 HTML5 + CSS3 입문 개정판, 윤인성 지음
반응형