📍HTML
HyperText Markup Language : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.
HTML 기본 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<mate ~~~>
<title></title>
</head>
<body>
</body>
</html>-
!DOCTYPE : 문서 유형을 지정하는 선언문이다.
html5에선 !DOCTYPE 뒤에 html문서 라는 점만 표기하면 문서 유형 선언이 끝난다. -
html : 브라우저에게 정보를 주는 부분이다.
-
title : 문서 제목, 웹 브라우저의 제목 표시줄에 표시된다.
-
mate : 문자 세트를 비롯한 문서 정보를 담는다.
▪️ [mate charset="UTF-8"] : 문자 세트 사용하는 것을 지정해준다.
▪️ [mate name="viewport" content="width=device-width, initial-scale=1.0"] : 모바일 기기를 위한 정보 설명이다.
▪️ [mate hyyp-equiv="X-UA-Comoatible" content="ie=edge"] : 인터넷 익스플로러 브라우저 사용자를 위한 것이다.
▪️ [mate name="" content=""] : 검색 엔진을 위해 해당 문서의 키워드, 설명, 해당 문서의 소유자 또는 제작자를 지정해준다.
- body : 실제 브라우저에 표시될 내용을 담는다.
✔️TAG
텍스트 관련 태그
▪️ h1~h6 : 제목 표시, 숫자가 작을수록 중요도가 높음
▪️ p : 단락 만들기
▪️ br : 브라우저 창에서 줄바꿈
▪️ blockquote : 인용문 삽입 (들여쓰기 되어 표시)
▪️ pre : 입력하는 그대로 화면에 표시
▪️ strong, b : 강조부분 굵게 (중요도 O), 그냥 굵게
▪️ em, i : 강조부분 이탤릭체, 그냥 이탤릭체 표시
▪️ span : 줄바꿈 없이 영역 묶기
이미지와 하이퍼링크
▪️ img : 이미지 삽입하기
▪️ a href : 링크 연결
▪️ [src] : 이미지 파일 경로 지정
▪️ [alt] : 설명 대체 텍스트
▪️ [width, height] : 이미지 크기 조정
▪️ [figure, figcaption] : 이미지 설명 글을 붙일 대상 지정, 설명 글 붙이기
목록 태그
- 순서 없는 목록
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>- 순서 목록
<ol>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>ol 태그 속성
▪️ [type] : 1, a, A, i, I
▪️ [start] : 중간번호부터 시작
▪️ [reversed] : 항목 역순 표시
- 설명 목록
<dl>
<dt>제목</dt>
<dd>설명1</dd>
<dd>설명2</dd>
</dl>표 태그
- 기본적인 표
<table>
<tr> <!--행-->
<th></th> <!--제목-->
<td></td> <!--셀-->
<td></td>
</tr>
</table>▪️ td rowspan = "합칠 셀의 개수"
▪️ td colspan = "합칠 열의 개수"
▪️ caption : table 태그 바로 다음에 사용, 표 위쪽 중앙에 제목 표시
▪️ figcaption : table 태그 앞에 쓰면 표 위에, table 태그 밑에 쓰면 표 밑에 제목 표시
▪️ [aria-describedby] : 표에 대한 설명 제공
- 확장된 표의 구조
<table>
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead> <!--표의 제목 부분-->
<tbody>
<tr>
<th></th>
<td></td>
</tr>
</tbody> <!--표의 본문 부분-->
<tfoot>
<tr>
<th></th>
<td></td>
</tr>
</tfoot> <!--표의 요약 부분-->
</table>폼(form) 만드는 법
<form [속성="속성 값"]>
폼 요소
</form>▪️ [method] : 사용자가 입력한 내용들을 서버쪽 프로그램으로 넘겨주는 것을 지정한다. (post 속성 값을 대부분 사용)
▪️ [name] : 폼의 이름을 지정한다.
▪️ [action] : form 태그 안의 내용들을 처리해 줄 서버 상 프로그램을 지정한다.
▪️ [target] : action 속성에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정할 수 있다.
▪️ [autocomplete] : 자동 완성 기능을 지정할 수 있다.
▪️ [label] : 폼 요소에 레이블을 붙일 수 있다.
(라디오 버튼과 체크박스 부분을 연결하면 선택이 쉬워짐)
▪️ fieldset : 폼들을 하나의 영역으로 묶고 외곽선을 나타낸다.
▪️ legend : fieldset 그룹에 제목을 붙힌다.
기타 폼 요소
button : 버튼 삽입
▪️ [submit] : 폼을 서버로 전송
▪️ [reset] : 폼에 입력한 내용 초기화
▪️ [button] : 버튼 형태만 만들고 자체 기능은 없음
output : 계산 결과
▪️ 일반 텍스트가 아닌 계산 결과 값인 것을 브라우저가 정확히 인식할 수 있다.
progress : 진행 상태 보여주기
▪️ [value] : 작업 진행 상태를 나타내며 부동 소수점으로 표현
▪️ [max] : 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소수점으로 표현 (0보다 커야함)
meter : 값이 차지하는 크기 표시
▪️ progress는 진행 상황을 나타내고 meter는 전체 크기 중에 얼마를 차지하는지 표현하는 것이다.
input 태그
form 안에서 사용자 입력을 받기 위해 사용하는 태그이며, 웹 표준을 준수하기 위해서는 input 태그를 쓸 때 꼭 form으로 감싸야한다.
<form>
<input type="text" id="user" size="10">
</form>▪️ id 속성을 사용하여 css 요소를 넣을 수 있다.
▪️ size는 필드의 길이를 지정한다.
| type 속성 | 사용 가능한 유형 |
|---|---|
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨지는 값 |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 |
| search | 검색상자 |
| tel | 전화번호 입력 필드 ( email, password, url ) |
| datetime | 국제 표준시로 설정된 날짜와 시간 삽입 |
| datetime - local | 사용자가 있는 지역을 기준으로 날짜와 시간 삽입 ( date, month, week, time ) |
| number | 숫자를 조절할 수 있는 화살표 삽입 |
| range | 숫자를 조절할 수 있는 슬라이드 막대 삽입 |
| color | 색상 표 삽입 |
| checkbox | 체크박스 삽입 (주어진 항목에서 2개 이상 선택 가능) |
| radio | 라디오 박스 삽입 (주어진 항목에서 1개만 선택 가능) |
| file | 파일을 첨부하는 버튼 삽입 |
| submit | 서버 전송 버튼 삽입 |
| image submit | 버튼 대신 사용할 이미지 삽입 |
| reset | 리셋 버튼 삽입 |
| button | 버튼 삽입 |
input 태그 중요 속성
type = "hidden"
▪️ 화면 상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼으로 전송할 때 서버로 함께 전송되는 요소
type = "text"
▪️ 한 줄 짜리 텍스트 입력 가능
▪️ 아이디, 이름, 주소 등 입력 시 사용
[name] : 텍스트 필드를 구별할 수 있도록 이름을 붙힘
[size] : 텍스트 필드의 길이를 지정
[value] : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용
[maxlength] : 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정
type = "password"
▪️ 텍스트 필드와 비슷하지만 사용자가 입력하는 내용이 화면에 표시되지 않고 가려진다.
▪️ 텍스트 필드 속성에서 value가 없다는 점을 제외하고는 같다.
type = "search"
▪️ 일반 텍스트 상자 같지만 검색 창에 검색어를 입력했을 때 오른쪽에 "X"를 표시해준다.
type = "radio", "checkbox"
▪️ 중복 체크 가능 여부 제외하고는 사용법은 비슷하다.
[name] : 여러 개 있을 경우 프로그램에서 구분하기 위해 이름을 지정한다.
(라디오 버튼은 여러 개 중 하나만 선택하는 것이기 때문에 관련 그룹끼리는 name 속성 값을 같게 한다.)
[value] : 서버로 알려줄 때 넘길 값을 지정한다.
(값 : 영문/숫자, 필수 속성 등)
[checked] : 기본적으로 선택해놓을 항목이 있을 때 사용한다.
type = "submit", "reset"
▪️ submit : 입력 정보를 서버에 전송
▪️ reset : 입력된 모든 정보 재설정
type = "button"
▪️ 폼 안에 버튼 형태를 만든다.
▪️ 자체 기능이 없기 때문에 스크립트 함수 등을 연결하여 사용한다.
예시 >
<input type="button" value="새 탭 열기" onclick="window.open()">기타 속성
autofocus : 입력 커서 표시
placeholder : 힌트 표시, 내용 입력 시작 시 사라짐
readonly : 읽기 전용 필드
required : 필수 입력 필드 지정, 입력 안할 시 경고창 발생
min, max, step : 최솟값, 최댓값, 허용 범위 내의 숫자의 일정 간격
(input 태그 유형이 date, datetime, datetime-local, month, week, time, number, range 일 경우에만 사용 가능)
size, minlength, maxlength : 길이, 최소 길이, 최대 길이
formaction : 실행 프로그램 연결
여러 데이터 나열해 보여주기
- 드롭다운 목록
select 태그
▪️ 기본적으로 한 가지 옵션이 표시되고 화살표를 이용해 나머지 옵션을 살펴본 후 항목 선택 가능
[size] : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정
[multiple] : 브라우저 화면에 여러 옵션이 함께 표시되면서 ctrl키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능
option 태그
▪️ select 밑에서 드롭다운 목록에 표시되는 옵션 지정
[value] : 옵션을 선택했을 때 서버로 넘겨질 값 지정
[selected] : 화면에 표시될 때 기본적으로 선택되어 있는 옵션 지정
optgroup 태그
▪️ 드롭다운 목록에서 여러 항목들을 그룹으로 묶을 수 있음
▪️ label 속성을 사용해 그룹의 제목을 붙임
datalist, option 태그
▪️ select 태그 대신 datelist 태그를 이용하여 데이터 목록 중에서 값을 선택
textarea 태그
▪️ 여러 줄을 입력하는 텍스트 영역 만들기
[name] : 텍스트 영역의 이름 지정
[cols] : 텍스트 영역의 가로 너비를 문자 단위로 지정
[rows] : 텍스트 영역의 세로 길이를 줄 단위로 지정
(지정한 숫자보다 많아지면 스크롤바가 생성됨)
