HTML이란?
HyperText Markup Language
-> 웹 문서를 만드는 기본 언어HTML문서의 기본 구조
웹 문서는 기본적으로 html, head, body의 세 영역으로 구성되어있음.
<html> ~ <\html>: 웹 문서의 시작과 끝을 나타내는 태그 <head> ~ <\head>: 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분 <body> ~ <\body>: 실제로 웹 브라우저에 나타나는 내용
head태그
head 태그 사이에 작성한 내용은 웹 브라우저 화면에서는 보이지 않는다.
head 태그에서 가장 중요한 부분은 title태그.
사용 방법
<title>HTML 기본 문서<\title>
다음과 같이 title 태그에 작성한 내용이 웹 문서 제목 표시줄에 표기된다.
body태그
실제 웹 브라우저에 표시할 내용을 입력한다.
사용 방법
<body>
<h1>웹 문서 만들기</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
태그 정리
h태그 : h1 ~ h6 존재 폰트 크기가 숫자가 낮을수록 크다.
p태그 : 문단을 표시
a태그 : 하이퍼링크 표시
<a href="링크할주소">텍스트 또는 이미지<\a>br태그 : 다음줄로 넘어감 (break row의 줄임말)
blockquote태그 : 인용문
strong, br태그 : 볼드체
em, i, cite : 이탤릭체(기울임체)
순서 목록 태그
ol, li태그 : 순서 O 목록
ul, li태그 : 순서 X 목록
표 제작
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>--> 단순한 표가 제작됨
<style>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td { padding:10px 20px; }
</style>--> 헤드에 css를 적용하여 테두리 등을 적용
이미지 삽입
img태그 사용하여 삽입 가능
사용법
<img scr="이미지 파일 경로" alt = "대체 텍스트">pdf등의 파일,오디오, 비디오 삽입
<object width="너비" height="높이" data="파일"><\object>
<audio src="오디오 파일 경로"><\audio>
<video src="비디오 파일 경로"><\video>컨트롤 속성 추가시 플레이어 바에 컨트롤바 표시.
<audio src="오디오 파일 경로" controls><\audio>
<video src="비디오 파일 경로" controls><\video>폼
폼 : 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것, 입력 양식
ex) 로그인 창, 검색 창
폼 태그
<form [속성="속성값"]>여러 폼 요소</form>라벨 태그
<label>레이블명<input></label>
ex)
<form>
<label>아이디<input type="text"></label>
</form>
폼 요소와 label태그를 따로 작성하고 연결하는 방법도 가능
<form>
<label for="userid">아이디</label>
<input type="text" id="userid">
</form>
