!DOCTYPE : 현재 문서의 형식 지정
html 태그 : html 문서 내용을 정의하는 태그
lang 속성 : 현재 페이지가 어떤 언어로 되어있는지 표시.
검색엔진 이용 시 참고 용도.
head태그 : HTML 문서의 제목, 스크립트, 스타일시트의 링크 또는
문서의 일반적인 정보(메타데이터)를 정의하는 태그
<title>, <meta>, <link>, <style>, <script> 등이 있다.
<meta charset="UTF-8"> :현재 문서의 문자 인코딩 정보
title 태그 : 브라우저의 제목을 지정하는 태그
body 태그 : html 문서의 내용(Content)을 정의하는 태그 (화면에 출력되는 내용 작성)
h1 ~ h6 태그 : 제목을 입력할 때 사용하는 태그
hr 태그 : 화면에 수평선을 출력하고 줄을 바꾸는 태그
: 띄어쓰기 한 칸을 의미하는 특수 기호
[문단을 구분하는 태그]
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 태그 : 폼 요소를 묶고 묶은 그룹에 이름을 붙히는 태그