HTML의 기본 태그
| 명칭 | 구성 | 내용 |
| DOCTYPE | <!DOCTYPE> | 해당 문서의 타입 정의 |
| html | <html> ... </html> | HTML 문서의 루트 요소 정의 DOCTYPE 선언을 제외한 모든 다른 HTML 요소를 포함하기 위한 컨테이너 브라우저에게 해당 문서가 HTML 문서임을 알려주는 역할 |
| head | <head> ... </head> | 해당 문서에 대한 정보인 메타데이터의 집합 정의 <title>, <style>, <base>, <link>, <meta>, <script>, <noscript>의 요소들을 포함함 |
| meta | <meta ... > | 해당 문서에 대한 정보인 메타데이터의 정의 반드시 <head> 요소 내부에 위치 self close ex) 문자 인코딩 정보 : <meta charset="utf-8"> 문서 작성자 정보 : <meta name="author" content="..."> 검색 엔진을 위한 키워드 : <meta name="keyword" content="..."> 웹 페이지에 대한 설명 : <meta name="description" content="..."> viewport 설정 : <meta name="viewport" contnet="...">등 |
| title | <title> ... </title> | 해당 문서의 제목 정의 브라우저의 제목 표시줄이나 페이지 탭의 제목 정의 즐겨찾기 등록 시 해당 페이지에 대한 즐겨찾기 이름으로 사용 검색 결과 페이지에서 해당 페이지의 제목 모든 HTML 문서에 꼭 필요 (<title> 요소 존재하지 않을 경우 해당 문서는 HTML 유효성 검사 통과 불가능) 두 개 이상의 <title> 요소 포함 불가능 |
| style | ,Style> ... </style> | HTML 문서의 스타일 정보 정의 해당 요소가 포함된 HTML 문서의 콘텐츠에 적용되는 CSS 명시 HTML 문서는 여러 개의 <style> 요소 포함 가능 별도의 파일로 저장된 외부 스타일 시트는 <link> 요소를 사용하여 참조 가능 |
| body | <body> ... </body> | 본문 해당 HTML 문서의 모든 콘텐츠를 포함하는 영역 정의 HTML 문서에는 단 하나의 <body> 요소만이 존재 가능 |
| p | <p> ... </p> | 단락, 문단, 절 (Paragraph) 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백 추가 |
| h1 ~ h6 | <h1> ... </h1> <h2> ... </h2> |
제목 숫자가 작을수록 중요도 및 텍스트 크기가 큼 |
| hr | <hr> | 단락 구분에 사용하는 수평 가로선 주제의 변화 정의 내용 구분선 |
| br | <br> <br/> <br /> |
줄바꿈 빈 태그 (종료 태그 존재하지 않음) (+) HTML에서는 <br> 태그를 닫지 않지만 XHTML에서는 <br />을 이용하여 반드시 태그를 닫아야 함 |
| 주석 태그 | <!-- ... --> | 주석 |
| div | <div> ... </div> | HTML 문서에서 특정 영역(division)이나 구획(section) 정의 블록 타입 요소 여러 요소들을 하나로 묶어주어 CSS로 스타일 변경 또는 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너로 사용 |
| span | <span> ... </span> | inline 요소들을 그룹화 그 자체만으로 가지는 의미는 없음 줄바꿈, 폭/높이 적용 불가능 |
| table | <table> ... </table> | 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블 정의 <tr>, <th>, <td> 요소로 구성 (+) border : 테이블의 선 두께 cellpadding : 셀 안쪽 여백 cellspacing : 셀과 셀 사이의 간격 width : 테이블의 넓이 summary : 요약 |
| caption | <caption> ... </caption> | 테이블의 캡션(설명) 정의 css 사용하여 캡션 위치나 정렬 방법 변경 가능 (text-align, caption-side 속성 사용) (기본 정렬 위치는 테이블 바로 위쪽에 가운데 정렬) 스크린 리더기에 사용 |
| colgroup | <colgroup> ... </colgroup> | 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶음 각 행이나 셀의 스타일을 반복하지 않고 전체에 다른 스타일 적용 시 사용 <colgroup> 요소 내부에 <col> 요소를 포함하여 열마다 각각 다른 스타일 적용 가능 <table> 요소의 자식요소, <caption> 보다 뒤에 위치해야 하며 <thead>, <tbody>, <tfoot>, <tr> 요소보다 앞에 위치해야 함 |
| col | <col ... > | colgroup 요소에 속하는 각 열의 속성 정의 각 행이나 셀의 스타일을 반복하지 않고, 열마다 각각 다른 스타일 적용 시 사용 빈 태그이지만 유일하게 self close가 없음 (+) HTML에서는 태그를 닫지 않지만 XHTML에서는 반드시 태그를 닫아야 함 ex) <col ... /> (+) span : <col> 요소로 합쳐질 열의 개수 명시 |
| thead | <thead> ... </thead> | 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶음 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용됨 <table> 요소의 자식요소로 <caption>, <colgroup> 요소 다음에 위치해야 함 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있음 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 함 |
| tbody | <tbody> ... </tbody> | 테이블에서 내용 콘텐츠를 하나의 그룹으로 묶음 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용됨 <table> 요소의 자식요소로 <caption>, <colgroup>, <thead> 요소 다음에 위치해야 함 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 함 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있음 |
| tfoot | <tfoot> ... </tfoot> | 테이블의 푸터 콘텐츠들을 하나의 그룹으로 묶음 테이블의 각 영역(header, body, footer)을 명시하기 위해 , 요소와 함께 사용됨 <table> 요소의 자식요소로 <caption>, <colgroup>, <thead>, <tbody> 요소 다음에 위치해야 함 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있음 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 함 계산시 합계부분에 주로 이용 |
| th | <th> ... </th> | 테이블 내의 각 열 제목 정의(table header) 헤더 정보를 저장하는 헤더 셀 inline 요소 기본적으로 굵은 폰트로 중앙 정렬됨 colspan, rowspan 속성을 사용하여 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있음 (+) colspan : 가로 행을 합쳐준다 rowspan : 세로 열을 합쳐준다 |
| tr | <tr> ... </tr> | 테이블 내에서 셀들로 이루어진 하나의 행 정의(table row) 하나 이상의 <th> 요소 또는 <td> 요소 포함 가능 |
| td | <td> ... </td> | 하나의 테이블 셀 정의(table data) 일반적인 데이터를 저장하는 데이터 셀 기본적으로 일반적인 두께의 폰트로 좌측 정렬됨 td의 개수는 th의 개수와 일치해야 함 inline 요소 colspan, rowspan 속성을 사용하여 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있음 (+) colspan : 가로 행을 합쳐준다 rowspan : 세로 열을 합쳐준다 |
| ol | <ol> ... </ol> | 순서가 있어 각 요소 내용 앞에 순서가 나타나는 리스트 (ordered list) 아이템 앞에 추가되는 마커(marker)는 아라비아 숫자 또는 알파벳 |
| ul | <ul> ... </ul> | 순서가 없는 리스트 (unordered list) 아이템 앞에 추가되는 마커(marker)는 작은 원 또는 사각형 모양 마커의 종류는 CSS의 list-style-type 속성을 통해 변경 가능 |
| li | <li> ... </li> | 리스트(ol과 ul)에 포함되는 세부 항목(아이템) = 리스트의 자식 |
| dl | <dl> ... </dl> | 용어와 그에 대한 설명을 리스트 형식으로 정의 (definition list) <dt> 요소와 <dd> 요소로 구성 |
| dt | <dt> ... </dt> | <dl> 요소에서 용어 부분을 정의할 때 사용 (definition term) |
| dd | <dd> ... </dd> | <dl> 요소에서 설명 부분을 정의할 때 사용 (definition description) |
| a | <a href="..." target="..."> ... </a> | 하나의 페이지에서 다른 페이지로 연결되는 하이퍼링크 정의 inline 요소 (+) a 태그의 속성 - href : 링크된 페이지의 URL, 목적지 URL - hreflang : 링크된 문서의 언어 명시 - target : 링크된 문서 클릭 시 문서가 열릴 위치 (_blank, _parant, _self, _top, 프레임이름) - _blank : target의 속성 - _self : 이동 - _parent : 먼저 띄워진 창 - _top : 현재 띄어진 가장 최상단에 위치한 창 - name : a태그의 이름 지정 (북마크 역할) (HTML5에서는 더이상 지원하지 않음. 전역속성 id를 대신 사용) - title : 링크에 대한 설명 - download : 하이퍼링크 클릭 시 해당 콘텐츠를 다운로드 - rel : 현재 문서와 링크된 문서 사이의 연관관계 명시 (alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag) - ping : 하이퍼링크 클릭 시 브라우저가 보내는 짧은 HTTP POST 요청을 전달받을 URL 리스트 명시 - type : 링크된 문서의 미디어 타입 명시 (+) 가상 클래스 a:link - 방문 안한 곳 a:visit - 방문 한 곳 a:hover - 마우스 올렸을 때 a:active - 활성화 된 링크 |
| img | <img src="..." alt="..."> | 이미지 inline 요소 HTML 문서에 직접 삽입되는 것이 아니라 HTML 문서에 이미지가 링크되는 형태 (참조된 이미지를 위한 일종의 수용 공간 만들어 주는 것) scr 속성과 alt 속성 반드시 명시 (+) scr : 경로 지정 alt : 이미지를 위한 대체 텍스트 정의 title : 거의 사용하지 않음 |
| form | <form> ... </form> | 사용자로부터 입력을 받을 수 있는 입력 폼을 정의 <button>, <fieldset>, <input>, <label>, <option>, <optgroup>, <select>, <textarea> 등의 요소들을 하나 이상 포함 가능 |
| fieldset | <fieldset> ... </fieldset> | <form> 요소에서 연관된 구성요소를 하나의 그룹으로 묶음 묶은 요소들 주변에 사각형 박스 모양의 선을 그려 표시 (+) <legend> 요소 사용하여 캡션 정의 가능 |
| legend | <legend> ... </legend> | <fieldset> 요소의 caption 정의 <fieldset> 요소에 대한 설명, 범례 |
| label | <label> ... </label> | UI 요소의 라벨을 정의 다양한 폼 서식의 설명 (+) for 속성 : 라벨에 표시되는 양식 폼 요소의 이름 지정 for 속성을 사용하여 다른 요소와 결합 가능 ( |
| input | 사용자로부터 입력을 받을 수 있는 입력 필드 정의 form 요소 내부에서 사용 빈 태그 속성만을 포함하고 있음 label 요소를 사용하면 <input> 요소의 라벨을 정의할 수도 있음 (+) 속성 - type : 입력 구성 요소의 종류 지정 (text, password, email, radio, checkbox, file, submit, button, hidden) - name : 이름 지정. 필수 입력 - value : 입력 구성요소의 값을 지정 - checked : checkbox, radio의 경우 체크된 상태로 표시하게 함. checked 사용 시 name 값이 동일해야 함 - maxlength : 타입 속성이 text, password일 경우, 입력 가능한 최대 문자수 지정 - readonly : 타입 속성이 text, password일 경우, 요소의 값을 수정할 수 없는 읽기 전용으로 지정. 데이터 전송이 가능 - disabled : 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 함. 수정 불가능. 데이터 전송 불가능 |
|
| textarea | <textarea> ... </textarea> | 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역 정의 개수의 제한 없이 문자 입력 가능 입력된 문자는 고정폭 글꼴로 렌더링 텍스트 입력 영역의 크기는 <textarea> 요소의 cols, rows 속성 또는 CSS에서의 width, height 속성으로 지정 가능 |
| select | <select> ... </select> | 옵션 메뉴를 제공하는 dropdown 리스트 정의 사용자로부터 입력을 받기 위한 폼에 사용될 수 있음 |
| option | <option> ... </option> | select 요소 내의 태그에 목록에 있는 사용 가능한 옵션 정의 |
| button | <button> ... </button> | 버튼 생성 버튼 요소 안에 텍스트나 이미지와 같은 콘텐츠 삽입 가능(=유일하게 css값을 가지고 있는 태그) <input>요소를 사용한 버튼에는 콘텐츠 삽입 불가 브라우저별로 버튼 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로 버튼 요소에는 언제나 type 속성값 명시하는 것 권장(=css 초기화 필요) (+) - autofocus : 페이지가 로드될 때 자동으로 포커스가 버튼으로 이동됨을 명시 - disabled : 해당 버튼이 비활성화됨을 명시 - form : 해당 버튼이 포함될 하나 이상의 <form> 요소를 명시 - name : 해당 버튼의 이름 명시 - type : 해당 버튼의 타입 명시 (button, reset, submit) - formaction : 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시 - formenctype, formmenthod, formnovalidate, formtarget |
'Frontend > HTML' 카테고리의 다른 글
| [HTML] HTML5 웹프로그래밍 입문 - 4장 기본예제 (4-5 간단한 입력 양식 생성) (0) | 2021.09.02 |
|---|---|
| [HTML] HTML5 웹 프로그래밍 입문 - 3장 연습문제 풀이 (0) | 2021.08.30 |
| [HTML] 테이블 정의 예제 (1) (0) | 2021.08.29 |
| [HTML] HTML의 다양한 태그들 (0) | 2021.08.29 |
| [HTML] HTML 기본 개념 (0) | 2021.08.23 |
