<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- h태그는 제목에 사용한다 -->
<h1>다람쥐 헌 쳇바퀴에 타고파</h1>
<h2>다람쥐 헌 쳇바퀴에 타고파</h2>
<h3>다람쥐 헌 쳇바퀴에 타고파</h3>
<h4>다람쥐 헌 쳇바퀴에 타고파</h4>
<h5>다람쥐 헌 쳇바퀴에 타고파</h5>
<h6>다람쥐 헌 쳇바퀴에 타고파</h6>
<!-- hr태그는 구분선을 그려준다 -->
<hr />
<!-- p태그는 문단 구분용도로 사용한다 -->
<p>안녕하세요. 제이본 입니다.</p>
<p>안녕하세요. 제이본 입니다.</p>
<p>안녕하세요. 제이본 입니다.</p>
<hr />
<!-- div태그는 내용 구분 용도로 사용한다 -->
<!-- (사용할 태그가 마땅치 않을 때 범용적으로 사용) -->
<div class="game">
<p>... 게임 관련 내용</p>
</div>
<div class="tv">
<p>... tv 관련 내용</p>
</div>
<hr />
<!-- details는 상세내용을 접을 수 있다 -->
<details>
<summary>설레이는 이 마음은 뭘까</summary>
<p>왠지 잠을 이룰수가 없어</p>
</details>
<h1>장바구니</h1>
<!-- ul / li 순서가 없는 리스트 -->
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>
<h1>TODO List</h1>
<!-- ol / li 순서가 있는 리스트 -->
<ol>
<li>아침 먹기</li>
<li>점심 먹기</li>
<li>저녁 먹기</li>
<li>양치 하기</li>
</ol>
<hr />
<!-- a태그는 하이퍼링크를 생성한다 -->
<!-- href속성에 링크 주소를 입력한다 -->
<!-- target속성으로 띄울 탭을 선택한다 -->
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
<hr />
<!-- img는 이미지를 출력할 때 사용한다 -->
<!-- src는 이미지 파일의 경로나 이미지 링크 주소를 넣는다 -->
<!-- alt는 이미지가 깨졌을 때 어떤 이미지가 있는지 알려준다-->
<!-- width는 이미지의 넓이, height는 이미지의 높이를 설정한다 -->
<!-- 둘 중 하나만 설정 할 경우 이미지 원본의 비율대로 설정된다 -->
<img src="https://zrr.kr/N9WI" alt="우주 오리" width="300" height="" />
<img src="./img/cat.jpg" alt="고양이" width="300" height="300" />
<hr />
<!-- strong은 글자를 굵게 만든다 -->
<p>이 기차 번호는 <strong>999</strong> 입니다</p>
<hr />
<h1>텍스트 입력</h1>
<!-- input은 유저가 서버로 보낼 데이터를 입력하는 태그이다 -->
<!-- type 속성은 input 태그의 타입을 설정한다 -->
<!-- name 속성은 서버로 해당 데이터를 보낼 이름이다 -->
<!-- 유저가 입력한 데이터는 value 속성에 들어간다 -->
<!-- placeholder는 value가 빈값일때 안내 문구가 출력되게 한다 -->
<!-- disabled 속성은 입력할 수 없는 input 태그를 만든다 -->
<!-- disabled 속성이 적용된 input은 서버로 데이터가 전송되지 않는다 -->
<!-- readonly 속성은 읽기전용 input 태그를 만든다 -->
<input type="text" name="id" value="기본데이터" />
<h1>비밀번호 입력</h1>
<input type="password" name="pw" placeholder="비번을 입력해주세요" />
<h1>체크박스 입력</h1>
<input type="checkbox" name="cb" />
체크하세요
<br />
<input type="checkbox" name="cb1" disabled />
비활성
<h1>라디오 버튼 입력</h1>
<input type="radio" name="radio" checked />
<input type="radio" name="radio" />
<h1>이메일 입력</h1>
<input type="email" name="id" />
<h1>날짜 입력</h1>
<input type="date" name="date" />
<h1>파일 입력</h1>
<input type="file" name="id" />
<h1>범위 입력</h1>
<input type="range" name="id" />
<h1>색상 입력</h1>
<input type="color" />
<!-- fieldset은 내용을 박스 형태로 감싼다 -->
<fieldset>
<!-- legend는 fieldset의 제목을 지정한다 -->
<legend>로그인</legend>
<div>
<!-- label은 input의 제목을 지정한다 -->
<!-- label과 input을 따로 쓸 경우 id를 매칭시켜줘야 한다 -->
<label for="id">아이디</label>
<input id="id" type="text" placeholder="아이디를 입력하세요" />
</div>
<div>
<!-- label 내부에 input을 쓸 경우 id매칭이 필요없다 -->
<label>
비밀번호
<input type="password" placeholder="비밀번호를 입력하세요" />
</label>
</div>
<div>
<!-- input의 입력 범위가 label까지 확장된다 -->
<label>
<input type="checkbox" />
아이디 기억하기
</label>
</div>
<div>
<button onclick="alert('로그인중')">로그인</button>
</div>
</fieldset>
<h1>텍스트에어리어</h1>
<textarea placeholder="내용을 입력하세요." rows="10" cols="30"></textarea>
<hr />
<h1>iframe</h1>
<iframe width="560" height="315" src="https://wikidocs.net"></iframe>
<hr />
<h1>audio</h1>
<!-- controls는 일시정지 소리크기 등을 설정하는 패널을 제공한다 -->
<!-- autoplay는 음소거 상태로만 가능하다(크롬기준) -->
<audio src="https://zrr.kr/5Xik" controls></audio>
<hr />
<h1>video</h1>
<video src="https://zrr.kr/Mghf" controls width="400"></video>
<hr />
<h1>유튜브 비디오</h1>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ZmqSOMlgZPU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</body>
</html>
<!-- ./는 현재 파일 경로를 기준으로 다른 파일을 탐색 -->
<!-- s05_1~3은 상대경로 방식이다 -->
<a href="./sub/s05_2.html">2번으로이동</a>
<!-- .이 없는 /는 절대경로를 의미한다 -->
<!-- 절대경로란 현재 프로젝트가 열린 폴더 기준으로 경로를 탐색한다 -->
<!-- 프로젝트 폴더가 변경되면 경로가 무용지물이 된다 -->
<a href="/abs/s06_2.html">2번으로 이동</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 게시판 형태의 화면을 만들 때 많이 사용한다 -->
<!-- 테이블 태그 속성 중 border를 사용하면 2줄 칸이 만들어진다 -->
<table border>
<!-- tr은 테이블의 row를 뜻한다 -->
<tr>
<!-- th는 테이블 column의 제목 -->
<th>번호</th>
<th>상품</th>
</tr>
<tr>
<!-- td는 테이블 column의 내용 -->
<td>1</td>
<td>바나나</td>
</tr>
<tr>
<td>2</td>
<td>사과</td>
</tr>
</table>
<hr />
<table border>
<tr>
<th>번호</th>
<th>상품</th>
</tr>
<tr>
<td>1</td>
<td>바나나</td>
</tr>
<tr>
<td>2</td>
<td>사과</td>
</tr>
<tr>
<td colspan="2">확인</td>
</tr>
</table>
<hr>
<table border>
<tr>
<th>번호</th>
<th>상품</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>바나나</td>
</tr>
<tr>
<td>사과</td>
</tr>
</body>
</html>
https://github.com/k7850