HTML의 tag들

!DOCTYPE : 현재 문서의 형식 지정
html 태그 : html 문서 내용을 정의하는 태그
lang 속성 : 현재 페이지가 어떤 언어로 되어있는지 표시.
                 검색엔진 이용 시 참고 용도.
head태그 : HTML 문서의 제목, 스크립트, 스타일시트의 링크 또는
            문서의 일반적인 정보(메타데이터)를 정의하는 태그
            <title>, <meta>, <link>, <style>, <script> 등이 있다.  

<meta charset="UTF-8">  :현재 문서의 문자 인코딩 정보

title 태그 : 브라우저의 제목을 지정하는 태그 

body 태그 : html 문서의 내용(Content)을 정의하는 태그 (화면에 출력되는 내용 작성)

h1 ~ h6 태그 : 제목을 입력할 때 사용하는 태그

hr 태그 : 화면에 수평선을 출력하고 줄을 바꾸는 태그

&nbsp; : 띄어쓰기 한 칸을 의미하는 특수 기호 

 

[문단을 구분하는 태그]

p 태그 : 글을 작성하는 태그

pre 태그 : 글을 작성하는 태그 + HTML 문서에 작성된 모양 그대로가 화면에 출력

b 태그 : 단순히 글자를 굵게 표시하는 태그strong 태그 : 글자를 강조하는 태그(웹 접근성을 위함)i 태그 : 단순히 글자를 기울이는 태그em 태그 : 글자를 강조하는 태그(웹 접근성을 위함mark 태그 : 형광펜 효과를 나타내는 태그u 태그 : 밑줄s 태그 : 취소선sup 태그 : 제곱표시sub 태그 : 로그 표시abbr 태그 : 마우스 오버 시 툴팁 형싱으로 설명 출력하는 태그

 

[목록관련 태그]

 

ul 태그 :

순서가 없는 목록

ol 태그 :

순서가 있는 목록

li 태그 : ul, ol 태그 내부에 사용되는 목록 내용 태그

<ol 태그의 속성>

start 속성 : 시작점 지정reverse 속성 : 역순으로 지정type 속성 : 순서 표시 형식 ( a A i I )

 

[표 관련 태그]

table 태그 : 웹 문서에서 자료 정리를 위해 주로 사용하는 태그

                행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀이라고 함

tr 태그 : 테이블의 한 행을 나타내는 태그

td 태그 : 한 셀을 나타내는 태그(한 영역)

th 태그 : 행이나 컬럼의 제목을 나타내는 태그

captopm 태그 : 테이블의 제목이나 설명을 추가하는 태그

 

table 사용 가능 속성

-border : table, td, th 에 테두리 추가

 

td, th 사용 가능 속성

-rowspan : 행 병합 == 위 아래 합침

-colspan : 열 병합 ==좌,우 합침

-width :폭을 지정하는 속성

-height : 높이를 지정하는 속성

 

table의 구조 설정 태그

-thead 태그 : 테이블의 상단 부분(컬럼명)

-tbody 태그 : 테이블의 중단 부분 영역(실제값,내용)

-tfoot 태그 : 테이블의 하단 부분 영역(합계)

 

[영역 관련 태그]

-block 형식 : 공간을 수직 분할하는 영역

(수직으로 되어있는 공간을 수평으로 자르는 것 == 수직선 상에 영역들이 존재함)

-width, height 지정 가능

-ex) h1~h6 , p, pre , hr , div ...

 

-inline 형식 : 공간을 수평 분할하는 영역

(수평으로 되어있는 공간을 수직으로 자르는 것 == 수평선 상에 영역들이 존재함)

-width, height 지정 불가능

-ex) b, strong, i ,em, mark, span

 

[이미지 관련 태그]

img 태그 : HTML문서에 사진, 그림을 삽입할 때 사용하는 태그

<img 태그 속성>

1)src : 삽입할 이미지 경로를 지정하는 속성

2)width : 이미지의 너비 지정

3)height : 이미지의 높이 지정

4) alt : 이미지를 설명하는 속성, 이미지가 출력되지 않는 경우 화면에 표시됨

 

[하이퍼링크 관련 태그]

<a 태그의 속성>

1) href 속성 : 이동할 페이지를 작성하는 속성

2) title 속성 : 링크에 마우스 오버를 하는 경우 설명을 나타내는 속성

3) target 속성 : a태그 클릭 시 페이지가 열리는 방법을 지정 ( _self  /  _blank / _parent  / _top )

 

[폼 관련 태그]

form 태그 : 내부에 작성된 input 태그의 값을 서버로 넘기는 역할을 하는 태그

<form 태그의 속성>

1) action 속성 : form 태그 내부에 입력된 input 태그 값을 전달할 서버 또는 페이지 url을 작성하는 속성

2) method 속성 : 데이터 전송 방식을 지정하는 속성( get / post )

3) target 속성 : action으로 지정된 경로를 현재/ 새 페이지 중 어디서 열지 선택 ( _self  /  _blank / _parent  / _top )

4) name 속성 : form 태그에 이름을 지정하는 속성

 

input 태그 : 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

<input 태그의 속성>

1)type 속성 : input 태그의 형식을 지정하는 속성

2)name 속성: 제출될 때 값의 이름을 지정하는 속성

3)size 속성 : input 태그에 크기를 지정하는 속성

4)maxlength 속성 : 최대 글자 수 제한

5)placeholder : 입력 상자에 입력해야되는 내용을 설명하는 속성

 

input + type =>

(형식 관련 type ) = text, search , url , email , tel  , number , range ,  

(날짜 시간 관련 type) = date, month , week, time, datetime-local

(제출 관련 type) = radio , checkbox , color , file , hidden 

 

button 태그 : (input 태그에 type을 submit reset button 한것과 같다)

(기본 형식은 submit)

 

select, option 태그 : 여러개의 option 중에서 하나를 select 하는 상자

 

textarea 태그 : 여러 줄의 문자열을 입력할 수 있는 태그

fieldset, legend 태그 : 폼 요소를 묶고 묶은 그룹에 이름을 붙히는 태그