HTML이란?
Hyper Text Mark up Language, 즉 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다.
HTML의 기본 구조
<!DOCTYPE html> //현재 문서가 html5 언어로 작성한 웹 문서라는 뜻
<html> ~ </html> //웹 문서의 시작과 끝
<head> ~ </head> //필요한 정보를 입력하는 부분
<body> ~ </body> //실제로 웹 브라우저 화면에 나타나는 내용
<head> 태그
<meta charset="UFT-8"> //한글 인코딩
<meta name="keywords" content="웹 문서의 키워드">
<meta name="description" content="웹 문서의 설명">
<meta name="author" content="웹 문서의 제작자">
<title>문서의 제목</title>
시맨틱 태그
<header> ~ </header> //헤더 영역, 주로 위쪽이나 왼쪽
<nav> ~ </nav> //네비게이션 영역
<main> ~ </main> //본문 영역, 핵심이 되는 내용
<article> ~ </article> //독립적인 콘텐츠 영역
<section> ~ </section> //콘텐츠 영역(여러 콘텐츠 가능)
<footer> ~ </footer> //푸터 영역
<div> ~ </div> //영역 구별, 소스 묶는 역할
텍스트 태그
<hn> 제목 </hn> //n은 1~6, 숫자 클수록 크기가 작아짐
<p> 텍스트 단락 생성 </p>
<br> //줄 바꾸기, 닫는 태그 없음
<blockquote> 인용문 </blockquote>
<strong> 굵게 강조할 텍스트 </strong>
<b> 굵게 표시할 텍스트 </b>
<em> 이탤릭체로 강조할 텍스트 </em>
<i> 이탤릭체로 표시할 텍스트 </i>
목록 생성
<ol> //순서 있는 목록
<li> 항목1 </li> // 1. 항목1
<li> 항목2 </li> // 2. 항목2
</ol>
<ul> //순서 없는 목록
<li> 항목1 </li> // • 항목1
<li> 항목2 </li> // • 항목2
</ul>
<dl> //설명 목록
<dt> 이름 </dt>
<dd> 값 </dd>
</dl>
표 생성
<table>
<caption> 표 제목 </caption>
<tr> //행 지정
<th> 1행 1열 </th> //열 지정, td보다 진하게 표시됨
<td> 1행 2열 </td> //열 지정
</tr>
<tr>
<th> 2행 1열 </th>
<td> 2행 2열 </td>
</tr>
</table>
<thead> 표의 제목 </thead>
<tbody> 표의 본문 </tbody>
<tfoot> 표의 요약 </tfoot>
<td rowspan="합칠 셀의 개수"> 셀의 내용 </td> //세로로 합쳐짐
<td colspan="합칠 셀의 개수"> 셀의 내용 </td> //가로로 합쳐짐
삽입 태그
<img src="이미지 파일 경로" alt="대체용 텍스트">
//다양한 멀티미디어 파일 삽입 가능
<object width="너비" height="높이" data="파일"></object>
<embed src="파일 경로" width="너비" height="높이">
<a href="링크할 주소"> 하이퍼 링크 삽입 </a>
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
audio,video 태그의 속성
| 종류 | 설명 |
|---|
| controls | 플레이어 화면에 컨트롤 바 표시 |
| autoplay | 오디오나 비디오를 자동으로 실행 |
| loop | 오디오나 비디오를 반복 재생 |
| muted | 오디오나 비디오의 소리 제거 |
| preload | 어떻게 로딩할 것인지, 기본값은 auto |
| width, height | 너비와 높이 지정 |
| poster="파일 이름" | 비디오 재생 전까지 화면에 표시될 포스터 이미지 지정 |
폼
<form> 여러 폼 요소 </form>
폼 태그의 속성
| 종류 | 설명 |
|---|
| method | 서버로 어떻게 넘겨줄 것인지 지정, get/post |
| name | 사용할 폼의 이름 지정 |
| action | 폼 태그 안의 내용을 처리해 줄 서버 프로그램 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 |
<fieldset> //폼 요소를 그룹으로 묶음
<legend> 그룹 이름 </lengend>
</fieldset>
<input type="text" value="이 텍스트로 고정" readonly> 읽기 전용 필드 </input>
<input type="text" required> 값을 무조건 입력받아야 함 </input>
<input type="text" placeholder="여기 적힌 텍스트가 보임"></input>
<input type="text" autofocus> 입력 커서 표시됨 </input>
인풋 태그의 type 속성
| 종류 | 설명 |
|---|
| text | 한줄짜리 텍스트 입력 가능한 텍스트 박스 |
| password | 비밀번호 입력 |
| search | 검색할 때 입력하는 필드 |
| url | url 주소 입력 |
| email | 이메일 주소 입력 |
| tel | 전화번호 입력 |
| checkbox | 주어진 항목들 중 2개 이상 선택 가능한 체크 박스 |
| radio | 주어진 항목들 중 1개만 선택 가능한 라디오 버튼 |
| number | 숫자 조절 가능한 스핀 박스 |
| range | 숫자 조절 가능한 슬라이드 막대 |
| date | 사용자 지역 기준 날짜(연, 월, 일) 삽입 |
| month | 사용자 지역 기준 날짜(연, 월) 삽입 |
| week | 사용자 지역 기준 날짜(연, 주) 삽입 |
| time | 사용자 지역 기준 시간(시, 분, 초, 분할 초) 삽입 |
| datetime | 국제표준시 날짜, 시간 삽입 |
| datetime-local | 사용자 지역 기준 날짜, 시간 삽입 |
| submit | 전송 버튼 |
| reset | 리셋 버튼 |
| image | submit 버튼 대신 사용할 이미지 |
<textarea cols="가로 너비를 문자 단위로 지정" rows="세로 길이를 줄 단위로 지정"> 여러 줄 입력하는 텍스트 영역 </textarea>
<select> //드롭다운 목록
<option value="값1" selected> 내용1 </option> //선택되어 있음
<option value="값2"> 내용2 </option>
</select>
<button type="submit"> 폼을 서버로 전송 </button> //<input type="submit"과 같음
<button type="reset"> 폼에 입력한 내용 초기화 </button>
<button type="button"> 버튼만 있고 기능은 없음 </button>
