DEV/html

sample3

purple 2020. 1. 8. 19:09

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<video width = "400" controls = "controls" loop = "loop">
	<source src="mov_bbb.mp4" type="video/mp4">
	<source src="mov_bbb.ogg" type="video/ogg">
</video>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type = "text/css">

.cls li {	/* .(도트)는 클래스임  즉 .(클래스) cls 의 list 를 의미함*/
	display: inline;		/* 리스트를 가로 모드로  맨 아래 보면 있음 */ 
}

</style>

</head>
<body>

<!-- list -->
<ul>   <!-- ul 이란 unordered list 즉 순서없는목록을 의미 -->

<li> 순서없는 목록 </li>
<li> tea </li>
<li> milk </li>

</ul>



<!-- 동그란 기 -->
<ul style = "list-style-type : disc">

<li> coffee </li>
<li> tea </li>
<li> milk </li>

</ul>



<!-- 네모기호-->
<ul style = "list-style-type : square">

<li> coffee </li>
<li> tea </li>
<li> milk </li>

</ul>


<!-- 기호 없음 -->
<ul style = "list-style-type : none">

<li> coffee </li>
<li> tea </li>
<li> milk </li>

</ul>


<ul style = "list-style-type : disc">

<li> 
	<a href = "#"> coffee</a> 
</li>
<li> tea </li>
<li> milk </li>

</ul>





<!--  ordered list 순서가 있는 목록 (1,2,3, ... 숫자가 매겨진다) -->

<ol>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>




<ol type = "2"> 			<!-- type 숫자에 뭐가 들어가든 실질적인 차이가 없다. -->
	<li> apple2 </li>
	<li> pear2 </li>
	<li> banana2 </li>
</ol>



<!-- HTML5 에서 바뀐내용으로 이걸 더 쓴다. start에 들어가는 숫자부터 시작하는 목록임. 1이면 1부터 시작, 2면 2부터 시작함 -->

<ol start = "1">
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>

<ol start = "2">
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>


<!-- A부터 시작 -->
<ol type = "A">
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>


<!-- 로마자 숫자 -->
<ol type = "I">
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>

<!-- 로마자숫자 소문자 -->
<ol type = "i">
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
	<li> apple </li>
	<li> pear </li>
	<li> banana </li>
</ol>



<!-- list 안의 list. unordered list 든 ordered list 든 어떤것이 밖에 오고 안에오는지는 쓰는사람 마음임 둘다 가능 -->
<ul> 

<li> coffee 
	<ol>
		<li> 블랙커피 </li>
		<li> 밀크커피 </li>
	</ol>
</li>
<li> tea </li>
<li> milk </li>

</ul>



<!-- 가로모드 리스트. 단, 가로모드로 할때는 숫자넘버링이 안나오므로 직접 써줘야한다..ㅎㅎ.. -->
<br>
<p> 좋아하는 과일은 ? </p>
<ol class = "cls">
	<li> 1. apple </li>
	<li> 2. pear </li>
	<li> 3. banana </li>
</ol>










</body>
</html>

index1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

/* iFrame 이란? : web page in web :  웹 페이지 안의 웹 페이지 */


<h3> index1 </h3>

<iframe src = "index.html" width = "400" height = "300"> </iframe>

<iframe src = "http://www.nate.com" width = "400" height = "300"></iframe>
<br>


<iframe src = "www.youtube.com" width = "400" height = "400"> </iframe> <!-- 서버의 문제로 안나오는것 코드는 맞음 -->

</body>
</html>

index2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor = "#000000" text = "#ffffff">

<div align = "center">


<h1> 타히티 사진 </h1>
다음 사진을 클릭하면, 확대 사진을 볼 수 있습니다.
<br><br>

<a href = "./images/tahiti01.jpg" target = "photo">
	<img alt = "" src = "./images/tahiti01s.jpg">
</a>

<a href = "./images/tahiti02.jpg" target = "photo">
	<img alt = "" src = "./images/tahiti02s.jpg">
</a>

<a href = "./images/tahiti03.jpg" target = "photo">
	<img alt = "" src = "./images/tahiti03s.jpg">
</a>

<a href = "./images/tahiti04.jpg" target = "photo">
	<img alt = "" src = "./images/tahiti04s.jpg">
</a>

<a href = "./images/tahiti05.jpg" target = "photo">
	<img alt = "" src = "./images/tahiti05s.jpg">
</a>
<br><br><br>

<iframe src = "./images/tahiti01.jpg" width = "400" height = "266" name = "photo">
</iframe>



</div>




</body>
</html>

index3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<video width = "400" controls = "controls" loop = "loop">
	<source src="mov_bbb.mp4" type="video/mp4">
	<source src="mov_bbb.ogg" type="video/ogg">
</video>


</body>
</html>