728x90
반응형
목록 태그에는
<ul> <ol> <li> 가 있다
<ul> : 순서가 없는 목록
<ol> : 순서가 있는 목록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_1</title>
</head>
<body>
<h1>이건 h1이고요</h1>
<h2>이건 h2이고요</h2>
<h3>이건 h3입니다</h3>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2
</div>
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
<p>이 벽화가 그려진 시기는 <del>청동기</del> <ins datetime="2020-12-30">구석기</ins> 시대이다.</p>
<p>이 벽화가 그려진 시기는 <del>청동기</del> <u>구석기</u> 시대이다.</p>
<ol>
<li>목록1</li>
<li value="5">목록2</li>
</ol>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<ol>
<li>목록3-1</li>
<li>목록3-2</li>
</ol>
</ul>
</body>
</html>
<img>:
이미지 태그
3가지 속성을 가진다
scr : 이미지의 경로
height : 이미지의 세로크기
width : 이미지의 가로크기
alt : 이미지가 열리지 않았을 때 대신하여 출력하는 문장
이미지 경로에는 2가지 경로가 있음.
절대 경로와 상대경로
절대경로 : 웹 페이지나 이미지의 고유한 경로
로컬에서 파일을 작성할 때 절대 경로는 C:/Users/..로 시작하는 파일경로 전체를 의미
다른 pc에서는 열리지 않을 수 있음(사람에 따라 경로가 달라서)
상대경로 : 상대경로에서 작성하는 html문서가 기준 폴더가 됨
html 문서로 부터 어느 위치에 이미지가 존재하는지만 고려해서 경로를 작성
*같은 폴더 안에 있다면 파일명만 적어도 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_1</title>
</head>
<body>
<div style="text-align: center">
<img src="업사진.jpg" width="500" height="300">
</div>
</body>
</html>
<video>:
동영상 삽입, 유튜브 동영상 삽입
<video src="영상 주소" autoplay controls loop></video> <!-- <video>와 </video> 사이에는 아무것도 입력해서는 안됩니다. -->
속성
autoplay : 자동 재생
control : 재생 제어하는 제어기 표시
loop : 비디오 반복재생
width, height : 너비와 높이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_1</title>
</head>
<body>
<div style="text-align: center">
<img src="업사진.jpg" width="500" height="300">
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/T0agInBEMrM?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
<div>안에 넣어서 가운데 정렬할 수도 있는데 이건 안한것.
728x90
반응형
