<!DOCTYPE html>
<html>
<head>
<title>HTML 연습2</title>
</head>
<body>
<hr>
<h3>순서가 없는 목록(unordered list)</h3>
<hr>
<b>파스타 종류</b>
<ul type="square">
<!--
ul 태그는 순서가 없는 목록을 만드는 태그이다. 각 항목을 담은 li 태그를 ul 태그로 감싼다.
type="[disc|circle|square|none]" 속성으로 마커의 모양을 변경할 수 있다.
-->
<li> 롱 파스타</li>
<ul type="disc">
<li>스파게티</li>
<li>페투치네</li>
</ul>
<li>숏 파스타</li>
<ul type="disc">
<li>링귀네</li>
<li>펜네</li>
<li>마카로니</li>
</ul>
</ul>
<hr>
<h3>순서가 있는 목록(ordered list)</h3>
<hr>
<b>파스타 끓이는 법</b>
<ol>
<!--
ol 태그는 순서가 있는 목록을 만드는 태그이다. 각 항목을 담은 li 태그를 ol 태그로 감싼다.
type="[1|A|a|I|i]" 속성으로 마커의 모양을 변경할 수 있다.
-->
<li>물이 팔팔 끓을 때까지 끓인다.</li>
<li>파스타를 넣는다.</li>
<li>원하는 파스타의 익힘 정도와 맞는지 확인한다.</li>
<li>불을 끄고 면을 건져낸다.</li>
</ol>
<hr>
<h3>정의 목록(definition list)</h3>
<hr>
<b>운영체제 종류</b>
<dl>
<!--
dl은 정의를 기술하는 태그이다. 태그이다. 정의 대상을 dt 태그에, 대상에 대한 설명을 dd 태그에 담은 후 태그로 감싼다.
-->
<dt>Windows</dt>
<dd>미국 마이크로소프트 사가 만든 운영체제</dd>
<dt>Macintosh</dt>
<dd>미국 애플 사가 만든 운영체제</dd>
<dt>Linux</dt>
<dd>리누즈 토발즈가 만든 오픈 소스 운영체제</dd>
</dl>
<hr>
<h3>숨은 텍스트</h3>
<hr>
<details>
<!--
details 태그는 텍스트를 숨길 수 있는 태그이다. details 태그 안에 summary 태그와 숨길 텍스트를 담는다.
이때, 표시할 텍스트를 summary 태그 안에 써준다.
-->
<summary>대한민국의 수도는?</summary>
<p>서울입니다.</p>
</details>
<hr>
<h3>하이퍼링크</h3>
<hr>
<a href="https://www.naver.com/" target="_self">네이버</a>
<!--
a 태그(anchor tag)는 텍스트를 하이퍼링크로 만들어주는 태그이다.
다른 웹사이트나 문서로 연결할 텍스트를 a 태그로 감싸준다.
href 속성에 연결할 페이지의 경로나 url을 써준다.
-->
<hr>
<h3>멀티미디어</h3>
<hr>
<span></span>
<!--
span 태그는 인라인 태그이다. 한 줄에서 앞 요소 뒤에 붙는다. 블록의 일부로 출력할 때 사용한다.
-->
<div style="background:olive;">
<!--
div는 블록 태그이다. 한 줄 전체를 차지한다.
-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/1024px-Littlebluedog.svg.png"
width="200" height="200" alt="이미지">
<!--
img 태그는 이미지를 입력하는 태그이다. src에는 이미지의 경로나 url을 입력한다.
width와 height 속성으로 이미지의 너비와 높이를 설정할 수 있다.
alt 속성에는 이미지 파일이 삭제되었거나 경로 이동 등으로 인해 표시될 수 없는 경우 대신 표시할 문구를 입력한다.
-->
</div>
<div style="background:skyblue;">
<video src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Grizzly_bear_and_her_cubs_eating_grass.webm"
width="400px" height="200px" autoplay controls loop muted>브라우저가 video 태그를 지원하지 않습니다.</video>
<!--
video 태그는 동영상 파일을 삽입하는 태그이다. src에는 동영상의 경로나 url을 입력한다.
img와 마찬가지 방법으로 동영상의 너비와 속성을 설정할 수 있다.
태그 안에는 동영상 파일을 표시할 수 없는 경우 표시할 문구를 작성한다.
autoplay는 자동 재생, controls는 재생 컨트롤, loop은 반복 재생, muted는 음소거 기능을 각각 활성화할 수 있는 속성이다.
-->
<hr>
</div>
<div style="background:dodgerblue;">
<audio src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg" autoplay controls loop muted>브라우저가 video 태그를 지원하지 않습니다.</audio>
<!--
audio 태그는 소리 파일을 삽입하는 태그이다. src에는 동영상의 경로나 url을 입력한다.
img와 마찬가지 방법으로 동영상의 너비와 속성을 설정할 수 있다.
태그 안에는 동영상 파일을 표시할 수 없는 경우 표시할 문구를 작성한다.
autoplay는 자동 재생, controls는 재생 컨트롤, loop은 반복 재생, muted는 음소거 기능을 각각 활성화할 수 있는 속성이다.
-->
</div>
<figure id="1-1">
<!--
figure 태그는 도표를 담는 태그이다. figure 태그 안의 figcaption에 도표에 대한 설명을 적는다.
-->
<figcaption>figure 태그 사용법</figcaption>
<pre> 입력된 도표<pre>
</figure>
<hr>
<h3>iframe 사용</h3>
<hr>
<iframe src="https://tistory.com" style="width:100%; height:300px">
<!--
iframe 태그는 다른 웹페이지를 현재 웹페이지 표시하는 태그이다.
src에 표시할 웹페이지의 경로나 url을 입력한다.
-->
</iframe>
<hr>
<h3>테이블</h3>
<hr>
<table border="1px">
<!--
table 태그는 표(테이블)을 입력하는 태그이다.
caption 태그에는 표의 캡션(표 제목 등)을 입력한다.
table 태그는 각각 머리글, 몸통, 바닥글에 해당하는 thead, tbody, tfoot 태그로 구성된다.
thead에는 각 열의 머리글을 th 태그에 넣고, tbody는 각 열의 데이터를 td 태그에 담고 그것을 행 태그인 tr로 감싸서 입력한다.
tfoot는 바닥글을 마지막 줄에 넣어주며 tbody와 동일하게 tr과 td 태그를 사용한다.
-->
<caption>1학기 성적</caption>
<thead>
<th>학번</th>
<th>HTML</th>
<th>CSS</th>
</thead>
<tbody>
<tr>
<td>111</td>
<td>85</td>
<td>79</td>
</tr>
<tr>
<td>112</td>
<td>100</td>
<td>95</td>
</tr>
<tr>
<td>113</td>
<td>75</td>
<td>79</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>255</td>
<td>253</td>
</tr>
</tfoot>
</table>
<hr>
<h3>폼</h3>
<hr>
<form>
<!--
form 태그는 고객 정보나 주문 정보 등 서버 측에 데이터를 전송해야 할 때 사용하는 태그이다.
action, enctype method, name, target 등 속성이 존재한다.
-->
<fieldset>
<!--
fieldset은 폼 태그의 입력 필드를 사각형으로 묶어주는 태그이다. lengend 태그로 사각형 상단에 제목을 입력할 수 있다.
-->
<legend>폼 연습</legend>
<label for="title">제목</label>
<!--
label 태그에는 입력 필드를 설명하는 레이블을 입력한다.
-->
<input type="text" value="" placeholder="제목을 입력하세요"><br>
<!--
input 태그들은 폼 태그가 전달할 각각의 데이터를 입력받는 태그이다.
input 태그는 type 속성을 어떻게 지정하느냐에 따라 모양이 달라진다.
value 속성엔 입력할(혹은 미리 입력해둘) 값이다.
placeholder에는 옅은 색으로 표시하였다가 입력 시 사라지는 예시이다.
-->
검색: <input type="search" value="" placeholder="검색어를 입력하세요"><br>
지점: <input type="text" list="branches">
<datalist id="branches">
<option value="서울">
<option value="인천">
<option value="대전">
<option value="대구">
<option value="광주">
<option value="울산">
<option value="부산">
</datalist><br>
포장여부:<select name="package">
<option value="1" selected> 포장 안 함</option>
<option value="2">포장함</option>
</select><br>
성별: 남<input type="radio" name="sex" value="M">여<input type="radio" name="sex" value="F"><br>
공개여부: 내용 공개<input type="checkbox" value="1" checked><br>
이메일: <input type="email" value="" placeholder="abc@korea.kr"><br>
전화번호: <input type="tel" value="" placeholder="010-1234-1234"><br>
홈페이지: <input type="url" value="" placeholder="www.abcdefgh.co.kr"><br>
년/월: <input type="month" value="2021-06"><br>
년/주: <input type="week" value="2021-W24"><br>
년/월/일: <input type="date" value="2021-06-14"><br>
나라시간: <input type="datetime-local" value="2021-06-14T20:00:00.32"><br>
시/분: <input type="time" value="20:00"><br>
수치: <input type="number" min="0.0" max="10.0" step="0.5"><br>
수치2: <input type="range" min="0.0" max="10.0" list="temperatures">
<datalist id="temperatures">
<option value="10">
<option value="50">
<option value="100">
</datalist><br>
색상: <input type="color" value="#001bfff" onchange="document.body.style.color=this.value"><br>
비밀번호: <input type="password" value=""><br>
글 내용:<textarea width=100% height="200px"></textarea><br>
<input type="submit" value="제출"><br>
<input type="button" value="버튼"><br>
<input type="reset" value="리셋"><br>
<input type="img" src=""><br>
<button>버튼 태그</button>
<!--
button 태그는 input 태그의 submit, reset, img 타입과 동일하지만 닫는 태그가 존재한다.
-->
</fieldset>
</form>
</body>
</html>
순서가 없는 목록(unordered list)
파스타 종류
- 롱 파스타
- 스파게티
- 페투치네
- 숏 파스타
- 링귀네
- 펜네
- 마카로니
순서가 있는 목록(ordered list)
파스타 끓이는 법
- 물이 팔팔 끓을 때까지 끓인다.
- 파스타를 넣는다.
- 원하는 파스타의 익힘 정도와 맞는지 확인한다.
- 불을 끄고 면을 건져낸다.
정의 목록(definition list)
운영체제 종류
- Windows
- 미국 마이크로소프트 사가 만든 운영체제
- Macintosh
- 미국 애플 사가 만든 운영체제
- Linux
- 리누즈 토발즈가 만든 오픈 소스 운영체제
숨은 텍스트
대한민국의 수도는?
서울입니다.
하이퍼링크
네이버
멀티미디어
입력된 도표
iframe 사용
테이블
학번HTMLCSS
111 | 85 | 79 |
112 | 100 | 95 |
113 | 75 | 79 |
합계 | 255 | 253 |
폼
'🕸웹 > HTML' 카테고리의 다른 글
[20210614] HTML5 시맨틱 태그 (0) | 2021.06.14 |
---|---|
[20210611] HTML 기초 (0) | 2021.06.11 |