< HTML 기본 태그(Tag) 정리 >
Tag 명칭 | 내용 |
html | 문서 종류 |
head | head요소는 문서에 사용되는 메타데이터 집합을 나타냅니다. HTML문서는 머리 부분(<head> ... </head>)과 본문 부분(<body> ... </body>)으로 나눌 수 있는데 머리 부분에 해당합니다. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <base href="http://www.~~~/"> <title>~~~</title> <link rel="stylesheet" href="default.css"> <script src="support.js"></script> <meta name="~~~" content="~~~"> </head> <body> ~~~ </body> </html> |
meta | meta요소는 title, base, link, style, script 요소로 표현할수 없는 다양한 종류의 메타데이터를 표현합니다. 속성
설명
|
title | title요소는 HTML문서의 타이틀을 지정합니다. 이는 브라우저의 타이틀바에 표시됩니다. |
body | body요소는 문서의 메인 컨텐트를 나타냅니다. HTML문서는 머리 부분(<head> ... </head>)과 본문 부분(<body> ... </body>)으로 나눌 수 있는데 본문 부분에 해당합니다. 올바른 문서에서는 하나의 body요소만이 존재해야 합니다. |
p | Paragraph의 P : 단락, 문단, 절 빈 줄로 구분되는 텍스트 블럭으로 표현됩니다. |
h1 ~ h6 | 제목, 글자, 크기, 중요도 우선순 h1 ~ h6요소는 각 섹션의 제목을 나타냅니다.
|
주석태그 | 주석, <!-- ~~~ --> |
br | beark, 줄바꿈 |
div | division의 약자. HTML 문서 영역이나 섹션의 분할을 정의 |
span | inline요소. 줄바꿈이 안되며 폭, 높이 적용도 안됨. 인라인 요소들을 그룹화 하는데 사용되며 브라우저에 레이아웃 변경은 되지 않음. span요소는 인라인 요소로 그것 자신만으로는 아무런 의미를 갖지 않습니다. span요소는 class, lang, dir 등의 전역속성과 함께 사용하면 유용합니다. |
table | table요소는 1차원 이상의 데이터를 표의 형태로 나타냅니다.
|
caption | caption요소는 자신의 부모요소인 table요소의 제목을 지정합니다.
|
colgroup | colgroup요소는 테이블에서 하나 이상의 행의 그룹을 나타냅니다.
|
col | col요소는 하나 이상의 행을 나타냅니다.
|
thead | 테이블 헤더 행 그룹 |
tbody | 테이블 내용 행 그룹 |
tfoot | 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용. tbody 위에 올 수 있다. 화면상에서는 아래에 위치.
|
th | 셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline 요소 |
tr | 테이블 내의 한 행을 정의하는 태그. table row |
td | 각 행에 포함된 셀을 만들때 사용되는 태그. table data. td의 개수는 th의 개수와 일치 해야된다. inline 요소 |
ol | ordered list. 순서가 있다. 앞에 넘버링이 자동으로 붙는다. |
ul | unordered list. 순서가 없다. 앞에 기호가 붙는다. |
li | list ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올수 있다. |
| header | header요소는 네비게이션을 돕거나 소개를 나타내는 그룹을 표현합니다. header 요소는 일반적으로 섹션의 제목(h1 ~ h6요소 또는 hgroup요소)을 포함합니다. 하지만 반드시 그런건 아닙니다. 섹션의 차례나 검색폼 또는 관련된 로고등을 감싸는 용도로도 사용될 수 있습니다. |
| iframe | iframe요소는 문서내에 다른 문서를 내포할 수 있게 해줍니다.
|
| nav | nav요소는 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다.
|
a | anchor. 링크 연결. inline 요소 a태그의 속성 href - 목적지, url target - 보여질 위치 target의 속성 _blank - 새창 _self - 이동 _parent - 먼저 띄어진 창 _top - 현재 띄어진 가장 최상단에 위치한 창 name - a 태그의 이름 지정(북마크 역할) title - 링크에 대한 설명 href - 목적지, url
링크 속성 ":"는 가상 클래스 a:link - 방문 안한 곳, 파란색 a:visit - 방문 한곳, 보라색 a:hover - 마우스 올렸을 때 a:active - 활성화 된 링크, 빨간색 |
img | 이미지 가져오기. inline요소 이미지 속성 src - 경로 지정, 필수 입력 alt - 이미지를 위한 대체텍스트를 정의 title - 거의 사용하지 않음 |
form | 입력을 받음. 게시판, 설문조서, 회원등록 등 폼 속성 name - 전솔될 데이터의 이름. value는 text. 해당 입력양식이 어느 폼에서 만들어졌는지 식별 action - 입력된 데이터가 정송될 페이지를 지정. value는 url. 개발자가 주로 정함. method - 입력데이터가 처리될 방식. value는 get(소량) / post(대량). get이 default. 사용은 post로 |
fieldset | form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을때. 사각형 모양으로 표시 fieldset 요소의 제목은 legend 태그를 사용 |
legend | fieldset에 대한 설명. 여기서의 legend는 설명(caption). 범례의 의미와 가깝다. legend요소는 fieldset요소를 이용하여 그룹화한 범위의 캡션을 지정할 수 있습니다. |
label | 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소 label요소는 사용자 인터페이스에 라벨을 부여합니다. for : 폼 컨트롤의 id속성과 같은 값을 지정하여 서로 동기화되도록 합니다. 컨트롤에 라벨을 부여하는 방법 - label의 for속성에 컨트롤의 id속성과 같은 값을 지정하여 라벨과 컨트롤을 동기화합니다. - label 요소의 범위에 텍스트와 컨트롤을 포함시킵니다. |
input | 사용자 입력 부분은 거의 <input> 태그를 이용해 처리 |
textarea | 긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦. |
select option | 선택메뉴(드롭다운 리스트). select요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의. select요소는 선택목록을 생성합니다. 속성
설명
|
button | 버튼생성. submit. reset. button. 유일하게 css값을 가지고 있는 태그. css초기화 필요. button요소는 버튼을 생성합니다 속성
설명
|
'프로그래밍(Programming) > 웹(WEB), HTML' 카테고리의 다른 글
| PHP (0) | 2019.01.06 |
|---|---|
| html에서의 Script (0) | 2019.01.06 |
| html tag 속성간 띄어쓰기 영향 (0) | 2018.12.27 |