그동안 책과 강의를 통해 공부했던 HTML 개념을 정리해보자
HTML
HTML은 웹문서를 만드는 언어이다.
페이지에 제목, 문단 , 표, 이미지 ,동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다.
HTML 기본 구조
1. <!DOCTYPE html>
2. <html lang = "ko">
3. <head>
4. <meta charset ="UTF-8">
5. <title> 여행 </title>
</head>
6. <body>
7. <h1> 제주도 여행 계획</h1>
8. <hr>
<p> 맛집 투어 </p>
<p> 빵지 순례</p>
<p> 자연 체험</p>
</body>
9. </html>-
!DOCTYPE html :웹문서의 시작, HTML5 언어로 작성한 문서임을 표시
-
html lang="ko" : lang 속성으로 문서에서 사용한 언어 지정, "ko"는 한국어로 문서 범위 제한 할때 씀
-
head: HTML파일의 시작과 끝을 표시 파일 끝날때는 /html 로 표시한다
-
meta charset ="UTF-8" : 화면에 글자를 표시할 때 어떤 인코딩을 사용 할지 지정,
UTF-8은 화면에 한글로 된 내용을 표시할때 쓴다. -
title: 웹 문서의 제목을 입력
6.body: 웹 브라우저에 나타내는 내용 부분을 말한다.
7.h1: 가장 큰 제목을 말한다. 1~6까지의 숫자가 들어가고 숫자가 커질수록 텍스트 크기가 작아진다.
8.hr : 단락 구분 , 밑줄 넣을때 사용한다.
9. html : html 파일의 시작과 끝을 알린다. 끝낼때는 /html로 표기
태그(tag)
HTML의 기본 기능은 웹 브라우저에서 보여 줄 내용에 표시하고 문서끼리
링크하는 것이다. 이를 효과적으로 하려면 웹브라우저에서 어느 부분이
제목 텍스트 표인지 구별 할 수 있는 표시가 필요한데 이런 역할을 하는게
태그 이다.
*텍스트 태크
| 종류 | 태그 |
|---|---|
| < hn> | 제목, 글자가 커질수록 글자 크기는 작아진다. |
| < p > | 텍스트 단락,내용이 길면 창의 너비에 맞게 줄 바꿈 |
| < br> | 줄바꿈, 텍스트 단락 중 원하는 위치에서 줄 바꿈 |
| < blockquote> | 내용 인용 다른 내용보다 들여 쓰고 단락으로 표시 |
| < strong> | 중요한 텍스트를 굵게 표시, 화면 낭독기에서 강조해서 읽어줌 |
| < b> | 중요하지 않지만 굵게 표시 |
| < em> | 중요한 텍스트를 기울게 표시(문장), 화면 낭도기에서 강조해서 읽음 |
| < i> | 중요하지 않지만 기울게 표시 |
| < ins> | 내용을 편집할 때 추가한 내용을 표시 |
| < del> | 내용을 편집할 때 삭제한 내용을 표시 |
| < sup> | 위 첨자 |
| < sub> | 아래 첨자 |
- 구조 태그
종류 태그 < span > inline 요소 묶을때 < div > block 요소 묶을때 < section > 주제별 영역들을 그룹화, 영역을 감싸지만 구분시 사용 < article > 특정 영역을 그룹화 , 영역은 나누지만 영역이 다른페이지나 다른 영역에 사용 가능할때
- 목록 태그
| 종류 | 설명 |
|---|---|
| < ol> | 순서 있는 목록의 시작과 끝을 나타냄 |
| < ul> | 순서 없는 목록의 시작과 끝을 나타냄 |
| < li> | 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄 |
| < dl> | 설명 목록의 시작과 끝을 나타낸다 |
| < dt> | 설명 목록의 이름(제목) |
| < dd> | 설명 목록의 값(설명)을 나타낸다 |
- 표 관련 태그
| 종류 | 설명 |
|---|---|
| < table> | 표를 나타냅니다 |
| < caption> | 표의 제목 |
| < tr> | 표의 행을 만든다 |
| < td> | 표의 셀을 만든다 |
| < th> | 제목 셀을 만든다 |
| < thead> | 표 구조에서 제목 부분 |
| < tbody> | 표 구조에서 본문 부분 |
| < tfoot> | 표 구조에서 요약 정리 부분 |
| < col> | 표에서 열의 스타일 지정 |
| < colgroup> | 표에서 여러 열을 묶어서 스타일 지정 |
- 멀티미디어 관련 태그
| 종류 | 설명 |
|---|---|
| < object > | 멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입 |
| < embed> | < audio >, < video > 태그와 < object > 태그도 지원하지 않는 경우 멀티미디어 파일을 삽입 |
| < img> | 이미지 파일을 삽입 |
| < audio > | 오디오 파일 |
| < video > | 비디오 파일 |
- 폼에서 사용하는 태그 :사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용 , 주로 회원가입 시 사용
| 종류 | 설명 |
|---|---|
| button | 버튼 만들때 사용 |
| fieldset | < form > 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용, < legend > 요소를 사용하면 < fieldset > 요소의 캡션(caption)을 정의할 수 있음 |
| input | 입력 요소 만들때 사용 |
| label | 폼 양식에 이름 붙이는 태그 , 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결, label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제 |
| option | 드롭다운 리스트 항목 사용시 씀 (optgroup, select 와 같이 사용) |
| optgroup | 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의할 때 사용 |
| select | 생년월일처럼 여러항목을 나열해서 선택할때씀 , value는 option을 써서 지정 |
| textarea | 여러줄의 문자열을 입력 할때 씀 |
< form 태그 형식 >
<form name="폼 태그 이름" action="데이터를 보낼 주소"
method="데이터 전송 방식">name : 해당 폼 태그의 이름
method : 작성한 정보를 보낼 방식 (전송 방식에는 GET과 POST가 있습니다.)
action : 작성된 데이터를 보낼 주소
input 태그 유형
<input type="타입" name="입력 폼의 이름" maxlength="최대 입력 가능 글자 수"
value="표시되는 기본 값">type : 속성 값에 따라, ID, 비밀번호, 이메일, 체크박스, 라디오 등등의 입력 폼이 될 수 있습니다.
name : 입력 폼의 이름
maxlength : 입력 폼에 입력 가능한 최대 글자 수
input type 종류 :
- text : 텍스트 입력 폼
- password: 비밀번호 입력 폼
- checkbox : 체크박스 폼 , 선택 폼 , 복수 가능 , value값 명시함
value 값 명시 하지 않으면 체크 안됨으로 출력- radio : 선택 폼, 복수 선택 안됨, 단일 선택
- button: 눌렀을때 이벤트가 발생하는 버튼 생성
- file: 파일 업로드
- serch : 검색어 입력 폼, 검색어 입력시 x 버튼 생성 ,
x버튼을 누르면 검색어 삭제 됨- reset : 입력값 초기화
- submit : 입력된 값을 form의 action 속성에 입력된 페이지로 전송
- email : 이메일 주소의 규칙인 @(at)과 도메인이 없다면 유효성에
맞지 않아서 제출 안됨
- url : url 형태가 아니면 submit 눌러도 제출안도미
- number : 숫자 입력 , 스마트폰의 경우 이 입력 폼을 사용한다면 키보드의 숫자 키 패드가 나오게 하기 위해 pattern="\d*" 를 사용
- color : 색 지정
- range : 슬라이드 방식의 인터페이스, 최소값 최대값 이동단위 조정
- placeholder : 입력창에 입력해야되는 내용 알려줌, 입력시 텍스트 사라짐
- hidden :일반적인 사용자들에게는 노출되지 않는 영역이지만 서버에 특정 값을 넘길 때 사용
- tel : 전화번호 입력
- date : 날짜 입력 창 (년, 월 , 일)
- month: 년 , 월 선택하는 영역
- week : 년, 주 선택 영역
- time : 시간 입력
