<!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>
<img src="../images/basic.jpg" alt="송아지">
<img width='200' src="../images/basic.jpg" alt="송아지">
<!-- 가로 세로 중 하나만 지정하면 나머지부분은 비율에 맞춰 자동조정 -->
<img width='200px' height = '100px' src="../images/basic.jpg" alt="송아지">
<img src="../images/basic.jpg" alt="송아지">
</a>
</body>
</html>
<!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>
<iframe width="896" height="567" src="https://www.youtube.com/embed/GBkR7ztxhTw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="896" height="567" src="https://www.youtube.com/embed/GBkR7ztxhTw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
*자바 스크립트 맛보기*
<!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>
<style>
.box {
width: 300px;
height: 300px;
background : orange;
margin : 100px;
</style>
</head>
<body>
<div class="box">
<script>
const $box = document.querySelector('.box');
$box.onclick = e => {
alert('박스 줄이기!');
$box.style.background = 'red';
$box.style.width = '150px';
$box.style.height = '150px';
};
</script>
</div>
</body>
</html>
'HTML입문' 카테고리의 다른 글
| HTML_입력양식(form,label,textarea,select,input)_22.04.06(wed) (0) | 2022.04.07 |
|---|---|
| HTML_표컨텐츠태그(table)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_인라인태그(강조태그,링크태크)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_컨텐츠태그(제목태그,목록태그)_22.04.06(wed) (0) | 2022.04.07 |
| HTML_블록요소와 인라인요소(22.04.05_tue) (0) | 2022.04.07 |