<!--
현재 문서에 HTML5를 이용하겠다 라고 하는 선언자. 시험에 나옴
-->
<!DOCTYPE html>
<!-- 문서에 첫번째 태그
Root Tag -->
<html>
<!-- <head>는 HTML 문서의 정보들
문서의 제목
문서의 스타일
문서의 스크립트(Javascript)
-->
<head></head>
<!--
<body>는 사용자(화면)에게 보여질 내용들
텍스트, 링크, 이미지, 비디오, 오디오, 표, 목록 등등..
-->
<body></body>
</html>링크설정 및 문단 설정
<!DOCTYPE html>
<html>
<head>
<title>링크를 해봅시다!</title>
</head>
<body>
<!-- <link> 클릭하면 네이버로 이동해요-->
<a href="http://www.naver.com">네이버로 이동</a>
<!-- 문단을 작성해요 문단은<p>-->
<p>Paragraph는 문단을 작성합니다!1</p>
<p>Paragraph는 문단을 작성합니다!2</p>
<p>Paragraph는 문단을 작성합니다!3</p>
태그없이 텍스트를 쓸 수도 있습니다.
그런데 이렇게는 쓰지 않아요
HTML에서는 엔터 개행은 무시된다.
이러한 띄어쓰기도 무시됩니다.
이 렇 게 쓰더라도 붙어나와요
강제개행을 하고싶다면 <br>을 사용해보세요
</body>
</html>div는 영역지정
<!DOCTYPE html>
<html>
<head>
<title>태그 합성해보기</title>
</head>
<body>
<!-- div 태그는 영역을 구분하는 용도로 사용된다.
div안에 수많은 태그들을 집어넣을 수 있다.
-->
<div>
<p>div 안에 p 태그를 집어넣었습니다.</p>
<p>
<a href="http://www.daum.net">다음으로 이동하기</a>
<a href="http://www.naver.com">네이버로 이동하기</a>
</p>
</div>
<div>
div는 여러개 만들수 있다.
<div>div 안에 div를 넣을 수도 있다.</div>
</div>
</body>
</html>b는 글자를 굵게, H1~H6글자크기, p 태그는 문단을 구분할떄
<!DOCTYPE html>
<html>
<head>
<title>텍스트 태그 실습</title>
</head>
<body>
<div>
<b>b 태그는 글자를 굵게 표현합니다.</b>
<b>
<p>b태그 안에 있는 모든 텍스트들은 내부 태그와 상관없이 모두 굵게 표현된다.</p>
</b>
</div>
<div>
<h1>H1은 가장 큰 글자 입니다.</h1>
<h2>H2 태그는 H1보다 조금 작은 글자</h2>
<h3>H2보다 조금작은글자</h3>
<h4>H3보다 조금작은글자</h4>
<h5>H4보다 조금작은글자</h5>
<h6>H5보다 조금작은글자</h6>
</div>
<div>
<p>P태그는 문단을 구분할 떄 많이 사용된다.
태그 내부의 텍스트가 길어진다면 자동으로 개행된다.
브라우저의 크기에 따라서 개행이 되는 기준이 달라지기도 합니다.
훨신 더 많은 글자를 넣어서 문단으로 구분할 수 있다.
</p>
<p>
P 태그와 P 태그 사이에는 약간의 공객이 생겨서 문단으로 구분하기가 용이합니다.
</p>
</div>
<div>
DIV를 포함한 모든 태그의 태그의 내용은 띄 어 쓰 기가 무시됩니다.
텍스트 내용 그대로 출력하고 싶으면 pre 태그를 이용해야합니다.
<pre>
PRE 태그는 텍스트의 내용 그대로 보여줍니다.
개행도 처리되고요.
앞에 잇는 들여쓰기도 그래도 표현됩니다
주로 DB에 있는 값을 그대로 표현하기 위해서 사용합니다.
</pre>
</div>
<div>
SPAN 태그는 텍스트 중 일부만 강조하고 싶을 때 사용하기 좋은 태그입니다.
검색결과 중에 "<span style="color: red; font-weight: bold;">검색</span>" 글자만 강조하고 싶을때 쓰면 좋겠죠?
<p>
상품의 가격을 표현하고 싶을때
12000<span style="font-weight: bold;">원</span> 에서 "원"만 강조하고 싶습니다.
</p>
</div>
</body>
</html>비디오 및 오디오 가져오기
<!DOCTYPE html>
<html>
<head>
<title>멀티미디어 실습</title>
</head>
<body>
<h1>Video 재생하기</h1>
<video controls>
<source src="mov_bbb.mp4"/>
</video>
<h1>Audio 재생</h1>
<audio controls>
<source src="horse.ogv">
</audio>
<h1>이미지 보여주기</h1>
<img src="img_girl.jpg" >
</body>
</html>ol, li 리스트 출력
<!DOCTYPE html>
<html>
<head>
<title>리스트 실습</title>
</head>
<body>
<!-- Ordered List
ol만으로는 아무것도 표현할 수 없습니다.
ol내부에 li 태그를 이용해서 목록을 생성합니다.-->
<ol>
<li>1번째 아이템</li>
<li>2번째 아이템</li>
<li>3번째 아이템</li>
<li>4번째 아이템</li>
<li>5번째 아이템</li>
</ol>
<!-- Unordered List
ul 만으로는 아무것도 표현 할 수 없습니다.
ul 내부에 li 태그를 이용해서 목록을 생성합니다.-->
<ul>
<li>노트북</li>
<li>모니터</li>
<li>태블릿</li>
<li>핸드폰</li>
<li>등등</li>
</ul>
</body>
</html>테이블 생성 (중요)
<!DOCTYPE html>
<html>
<head>
<title>table 실습</title>
</head>
<body>
<!-- 표를 만들 때에는 table 태그를 사용합니다.-->
<table>
<!-- 표의 테이블의 제목을 생성합니다.-->
<caption>테이블의 주요 태그</caption>
<!-- 각 열마다의 너비를 지정합니다.-->
<colgroup>
<col width="300"/>
<col width="300"/>
<col width="300"/>
</colgroup>
<!-- 테이블 헤더를 생성합니다.-->
<thead>
<!-- ROW하나를 생성합니다.-->
<tr>
<!-- 데이터 칸 하나를 생성합니다.-->
<th>태그명</th>
<th>부모태그</th>
<th>설명</th>
</tr>
</thead>
<!-- 테이블의 컨텐츠를 생성합니다.-->
<tbody>
<!-- Row 하나를 생성합니다.-->
<tr>
<td>table</td>
<td>body 내부</td>
<td>테이블(표)을 정의함.</td>
</tr>
<tr>
<td>caption</td>
<td>table 내부</td>
<td>테이블의 설명(제목)을 정의함</td>
</tr>
<tr>
<td>colgroup</td>
<td>table 내부</td>
<td>테이블의 컬럼(열)의 너비를 정의함</td>
</tr>
<tr>
<td>col</td>
<td></td>
<td></td>
</tr>
<tr>
<td>thead</td>
<td>table</td>
<td>테이블의 타이틀을정의함</td>
</tr>
<tr>
<td rowspan="2">두개의 row를 합침</td>
<td colspan="2">두개의 td를 합침</td>
</tr>
<tr>
<td>개별 칸1</td>
<td>개별 칸2</td>
</tr>
</tbody>
<!-- 테이블의 최 하단(푸터)를 생성합니다.-->
<!-- <tfoot>
<tr>
<td>td</td>
<td>tr</td>
<td>테이블에 컨텐츠 열 하나를 생성함</td>
</tr>
</tfoot> 잘안씀-->
</table>
</body>
</html>form태그속 속성
<!DOCTYPE html>
<html>
<head>
<title>form 실습</title>
</head>
<body>
<!-- 데이터 입력 및 전송을 위한 form 태그 생성
Form 태그는 브라우저에 아무것도 표시하지 않는다.-->
<form>
<div>
<label>회원아이디</label>
<input type="text" />
<button>중복확인</button>
</div> 
<div>
<label>비밀번호</label>
<input type="password" placeholder="비밀번호를 입력하세요" />
</div> 
<div>
<label 퍼스널 컬러></label>
<input type="color" placeholder="색상을 선택하세요" />
</div>
<div>
<label>성별</label>
<!-- radio 타입은 name이 필요해요-->
<input type="radio" name="sex"> 남
<input type="radio" name="sex"> 여
</div>
<div>
<!-- checkbox타입은 name이 필요해요!-->
<label>좋아하는 영화 장르</label>
<input type="checkbox" name="genre" /> 스릴러
<input type="checkbox" name="genre" /> 로맨스
<input type="checkbox" name="genre" /> 코미디
<input type="checkbox" name="genre" /> 드라마
</div>
<div>
<label>나이</label>
<input type="number" placeholder="나이를 입력하세요" />
</div>
<div>
<label>이메일</label>
<input type="email" placeholder="이메일을 입력하세요">
</div>
<div>
<label>생일</label>
<input type="date" placeholder="생일을 선택하세요">
</div>
<div>
<label>프로필</label>
<input type="file" placeholder="프로필사진을 선택하세요">
</div>
<div>
<label>검색</label>
<input type="search" placeholder="검색어를 입력하고 엔터를치세요" />
</div>
<div>
<label>...</label>
<input type="range" />
</div>
<div>
<label>자기소개</label>
<textarea></textarea>
</div>
<div>
<label>연령대</label>
<!-- 드롭박스(콤보박스)를 표현하는 태그-->
<select>
<option>선택하세요</option>
<option>10대</option>
<option>20대</option>
<option>30대</option>
</select>
</div>
<div>
<label>취미</label>
<select>
<optgroup label="바다">
<option>낚시</option>
<option>수영</option>
</optgroup>
<optgroup label="미디어">
<option>영화</option>
<option>음악</option>
<option>유튭</option>
</optgroup>
</select>
</div>
<div>
<label>사는지역</label>
<input type="text" list="city" />
<datalist id="city">
<option value="서울" />
<option value="인천" />
<option value="경기" />
<option value="경주" />
</datalist>
</div>
</form>
</body>
</html>
