기본태그
<!DOCTYPE html>
<html lang="ko">
- 문서를 html로 시작, 언어를 한국어로 지정
<head>
- 주로 브라우저의 정보를 입력하는 곳
<meta>
- 메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력<title>
- 문서 제목
<body>
문서구조태그
| 태그 | 역할 |
|---|
<header> | 헤더 영역 |
<main> | 메인 영역 |
<section> | 콘텐츠 영역 |
<aside> | 사이드 바 영역 |
<footer> | 푸터 영역 |
![업로드중..]()
문서구조하위태그
| 태그 | 역할 |
|---|
<nav> | 내비게이션 영역, 문서 내 다른 위치, 다른 문서로 연결할 때 사용 |
<article> | 독립적인 콘텐츠를 사용할 때 |
<section> | 콘텐츠 영역 |
<div> | 여러 소스 묶기 |
텍스트 입력태그
<h1>, <h2>, ... = 제목<p> = 단락<br>= 줄 바꿈<blockquote>= 인용문<strong>= 텍스트 굵게, 주로 중요한 내용일 때<b>= 줄 바꿈, 단순히 굵게 표시할 때<u>= 줄 바꿈<br>= 텍스트 밑줄
목록 입력태그
<ol>= 순서가 있는 목록<ul>= 순서가 없는 목록<dl>= 설명 목록
표 입력태그
<table> = 테이블시작
- <tr> = 행 삽입
- <thead> = 표 중 제목
- <tbody> = 표 중 본문
- <tfoot> = 표 중 요약
이미지
<img> = 이미지 삽입
- src = 이미지 파일 경로
- alt = 대체용 텍스트
- width = 가로 크기 조절
- height = 세로 크기 조절
하이퍼링크
폼 입력
- method
- get = 쿼리스트링을 활용해 서버로 데이터를 넘겨줌
- post = body안에 데이터를 담아서 서버에 넘겨줌
- name
- action
- target
- autocomplete
- text 한 줄 텍스트
- password 비밀번호
- search 검색
- url url
- email 이메일 주소
- tel 전화번호
- checkbox 체크박스 (중복 체크)
- radio 라디오 버튼 (unique 체크)
- number 숫자 스핀 박스(버튼으로 숫자 조절)
- range 숫자 슬라이드 막대
- date local - 연, 월, 일
- month local - 연, 월
- week local - 연, 주
- time local - 시, 분, 초, 분할 초
- datetime UTC - 연, 월, 일, 시, 분, 초, 분할 초
- datetime-local local - 연, 월, 일, 시, 분, 초, 분할 초
- submit 전송 버튼
- reset 리셋 버튼
- image submit 버튼 이미지
- button 일반 버튼
- file 파일 첨부 버튼
- hidden 사용자에게 보이지 않는 값 필드
checkbox, radio와 같이 쓰이는 속성들
- value 서버에 전달될 값
- checked 기본으로 선택하고 싶은 항목
- name= radio 전용, 여러 옵션의 공통 이름
number, range와 같이 쓰이는 속성들
- min 최소값(기본값 0)
- max 최대값(기본값 100)
- step 조정할 단위값(기본값 1)
- value 초기값
submit, reset와 같이 쓰이는 속성들(이 속성들은 버튼이다)
image와 같이 쓰이는 속성들
- value 버튼에 표시할 내용
- onclick 클릭 시 실행할 JS함수
- autofocus 페이지를 불러오자마자 마우스 포인터가 표시
- placeholder 힌트를 표시, 내용을 입력하면 사라짐
- readonly 읽기 전용 예) readonly="true"
- required 필수 입력 필드
레이블 붙이기
- 기본형 -
<label>안으로 폼 요소 넣기 예
label>레이블명<input></label>
- 기본형 - for속성과 폼 요소의 id를 일치시키기(연결시키기) 예
<label for="id명">레이블명<input id="id명"></label>
<textarea>
- rows= 세로 줄 수, 길 경우 스크롤 막대가 생성됨
- cols= 가로 너비(문자 단위)
<select>
- 드롭다운 목록 생성
- size= 항목 개수
- multiple= 둘 이상의 항목을 선택
- <option>
- value= 서버에 전달될 값
- selected= 기본 선택 항목
<button>
- type="submit" 폼을 서버로 전송
- type="reset" 폼 초기화
- type="button" 일반 버튼,
<input type="button">과 같음
