슬기로운 개발자생활/Frontend
[Front-end] HTML5 모든 태그, 속성 총 정리
개발자 소신
2020. 12. 4. 09:53
반응형
안녕하세요 ! 소신입니다
HTML5 태그와 관련된 속성들을 총 정리해보았습니다 !
CTRL+F 로 검색하시면 빠르게 찾으실 수 있습니다 ㅎㅎ
HTML5에서 안쓰이는 태그들은 제외하였습니다.
HTML 태그, 속성 (클릭하시면 w3Schools로 이동합니다.)
| <태그> | 설명 | 속성 |
| <!--...--> | 주석 | |
| <!DOCTYPE> | 문서타입 선언 | |
| <a> | 하이퍼링크 | href="URL" target="_blank" |
| <abbr> | 약어 | title="World Trade Organization" |
| <address> | 연락처 주소 | |
| <area> | 이미지 내 특정 위치에 하이퍼링크 삽입 | shape="rectangle" coords="좌표" href="URL" |
| <article> | article 영역 선언 | |
| <aside> | 콘텐츠 옆에 두는 영역 (주로 navigation, side bar) | |
| <audio> | 오디오 콘텐츠 삽입 | |
| <b> | bold체 text | |
| <base> | 기본 URL, 다음 href는 /images와 같이 상대주소만 입력 | href="URL" target="_blank" |
| <bdi> | 외부 텍스트와 분리 | |
| <bdo> | 현재 텍스트 방향 무시 | |
| <blockquote> | 인용문 선언 | cite="URL" |
| <body> | body 선언 | |
| <br> | 줄바꿈 | |
| <button> | 버튼 선언 | type='button' |
| <canvas> | 그래픽적 표현을 위한 태그 | |
| <caption> | <Table> 태그 안에서 제목 같은 느낌 | |
| <cite> | 인용(기울임) | |
| <code> | 프로그래밍 코드 영역 | |
| <col> | <Table>에서 특정 칼럼 | |
| <colgroup> | <Table>에서 특정 칼럼 선언을 위한 태그 | |
| <data> | 데이터 값 선언 | value="20193" |
| <datalist> | Dropdown 목록형, option 과 같이 사용 | |
| <dd> | dl 태그 내 description 부분 | |
| <del> | 취소선 | |
| <details> | 접은목록 (Toggle) | |
| <dfn> | 정의 (기울임) | |
| <dialog> | dialog 박스 선언 | |
| <div> | 섹션 선언 | |
| <dl> | Description List 선언 | |
| <dt> | dl 태그 내 Title 부분 | |
| <em> | 강조 (기울임) | |
| <embed> | 삽입된 부분 | type="image/jpeg" src="URL" width="" height="" |
| <fieldset> | 폼의 필드 설정 | |
| <figcaption> | figure태그 내 이미지에 대한 설명 | |
| <figure> | figure 부분 선언 | |
| <footer> | Footer 선언 | |
| <form> | 유저 입력 폼 선언 | action="url" method="get" |
| <h1> to <h6> | HTML에서 Heading 설정 | |
| <head> | 메타데이터와 정보들을 담는 구역 | |
| <header> | Header 선언 | |
| <hr> | 가로줄 | |
| <html> | html 문서 선언 | |
| <i> | 문구 (기울임) | |
| <iframe> | 문서 내 다른 문서 선언 | src="url" title="제목" |
| <img> | 이미지 선언 | src="url" alt="대체 문구" width="" height="" |
| <input> | 유저 입력 | type="text" |
| <ins> | 새로 삽입 된 부분 | |
| <kbd> | 키보드 입력 | |
| <label> | input 라벨 | |
| <legend> | form fieldset에서 제목 선언 | for="" |
| <li> | list에서 한 개 목록 | |
| <link> | Stylesheet 연결에 주로 사용 | rel="Stylesheet" href="url" |
| <main> | 메인 콘텐츠 선언 | |
| <map> | 이미지 맵 선언 | |
| <mark> | 텍스트 마킹, 하이라이트 (배경색) | |
| <meta> | 메타태그 | charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" |
| <meter> | 미터기 측정기 선언(막대) | value="2" min="0" max="10" |
| <nav> | 네비게이션 | |
| <noscript> | script태그가 지원안될때 대체문 | |
| <object> | 외부 컨텐츠 삽입 | data="url" width="300" height="200" |
| <ol> | 순서가 있는 목록 | |
| <optgroup> | drop-down 목록에서 옵션 그룹 | label="그룹이름" |
| <option> | drop-down 목록에서 선택할 수 있는 옵션 | value="값" |
| <output> | 계산 결과 출력 | name="" for="변수들 " |
| <p> | 문단 선언 | |
| <param> | 파라미터 선언 | name="autoplay" value="true" |
| <picture> | 여러 사진들을 포함하는 영역 선언 | |
| <pre> | 태그 무시하고 적은대로 나오는 영역 | |
| <progress> | 진행상태 bar graph | alue="32" max="100" |
| <q> | 짧은 인용문 | |
| <s> | 취소선 | |
| <samp> | 프로그램 예제 출력 | |
| <script> | 스크립트문 선언 | src="" |
| <section> | 섹션 선언 | |
| <select> | drop-down list 선언 | |
| <small> | 문자를 작게 | |
| <source> | <video>, <audio> 멀티미디어 소스 | src="URL" type="audio/ogg" type="video/mpeg" |
| <span> | 일부 영역 선언 | |
| <strong> | 텍스트 강조 | |
| <style> | 문서 스타일 선언 | |
| <sub> | 아래첨자 | |
| <summary> | <details> 태그에서 제목부분 | |
| <sup> | 위첨자 | |
| <svg> | 벡터이미지 선언 | |
| <table> | 표 선언 | |
| <tbody> | 표 내 body | |
| <td> | 표 안의 셀 | |
| <template> | 콘텐츠 (처음엔 숨기고 나중에 보여주는) | |
| <textarea> | 여러 줄 입력하는 입력 폼 | |
| <tfoot> | 표의 footer | |
| <th> | 표의 헤더 셀 | |
| <thead> | 표 내 head | |
| <time> | 특정 시간 선언 | datetime="2020-12-04 20:00" |
| <title> | 문서의 제목 | |
| <tr> | 표의 row | |
| <track> | 텍스트 트랙 | |
| <u> | 밑줄 | |
| <ul> | 순서가 없는 목록 | |
| <var> | 변수 (기울임) | |
| <video> | 비디오 콘텐츠 | controls autoplay muted, loop |
| <wbr> | 줄바꿈, 태그사이의 단어는 출력 |
실제로 쓰는건 별로 없지만 생각보다 많네요
감사합니당
반응형