본문 바로가기
🕸웹/HTML

[20210614] HTML 기초2

by 캔 2021. 6. 14. 
<!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)

파스타 끓이는 법
  1. 물이 팔팔 끓을 때까지 끓인다.
  2. 파스타를 넣는다.
  3. 원하는 파스타의 익힘 정도와 맞는지 확인한다.
  4. 불을 끄고 면을 건져낸다.

정의 목록(definition list)

운영체제 종류
Windows
미국 마이크로소프트 사가 만든 운영체제
Macintosh
미국 애플 사가 만든 운영체제
Linux
리누즈 토발즈가 만든 오픈 소스 운영체제

숨은 텍스트

대한민국의 수도는?

서울입니다.

하이퍼링크

네이버

멀티미디어

이미지
figure 태그 사용법
입력된 도표

iframe 사용

테이블

학번HTMLCSS
1학기 성적
111 85 79
112 100 95
113 75 79
합계 255 253

폼

폼 연습
검색:
지점:
포장여부:
성별: 남여
공개여부: 내용 공개
이메일:
전화번호:
홈페이지:
년/월:
년/주:
년/월/일:
나라시간:
시/분:
수치:
수치2:
색상:
비밀번호:
글 내용:




저작자표시 비영리 동일조건

'🕸웹 > HTML' 카테고리의 다른 글

[20210614] HTML5 시맨틱 태그  (0) 2021.06.14
[20210611] HTML 기초  (0) 2021.06.11

관련글

티스토리툴바