<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST_1</title>
<style media="screen">
body {
background-color: black;
color: white;
<!-- css 파일을 html 내부에서 사용할 때 style 사용한다. 백그라운드 색은 검정,
컬러는 글자 색깔 흰색으로 변경 -->
}
</style>
<script src="test.js">
<!-- script로 JS 코드를 넣을 수 있다. 현재 코드는 src 를 이용해서 외부에서 파일을 가져오고 있다. -->
</script>
</head>
<body>
<p>안녕하세요</p>
<p>Hello</p>
<p>こんにちは</p>
<p>你好</p>
<p>שלום</p>
<p>สวัสดี</p>
</body>
</html>
[test.js]
document.addEventListener('click', function () {
alert('clicked');
//화면을 클릭하면 "clicked" 라는 창이 나타난다.
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>h1 태그는 가장 중요한 제목</h1>
<h2>h2 태그는 그 뒤의 제목</h2>
<h3>h3 태그는 그 뒤뒤의 제목</h3>
<h4>h4 태그는 그 뒤뒤뒤의 제목</h4>
<h5>h5 태그는 그 뒤뒤뒤뒤의 제목</h5>
<h6>h6 태그는 그 뒤뒤뒤뒤뒤의 제목</h6>
<!-- 시맨틱 웹으로 인해서 제목 이외에는 사용하지 않아야 함. 검색엔진에서 태그를 중요한 의미로 받아들일 가능성 큼 -->
<br>
<b>b 태그로 bold체 지정. 중요성의 의미 없음</b>
<p>트와이스 짜잉쁘다</p>
<p><strong> <mark>strong 태그</mark>는 b 태그와 동일하나 중요성의 의미를 가지고 있다. br 태그 가지고 있지 않음</strong></p>
<br>
<p>트와이스 <del>바보</del> 짱짱0</p>
<p>트와이스는 뭐다? <ins>이쁘다</ins></p>
<br>
<p><b>사나</b>가 제일 <sub>귀엽고 이뿌다</sub></p>
<p><b>모모</b>도 <sup>진짜 귀엽고 이쁘다 춤도 잘춘다</sup></p>
<br>
<p>오늘은 유투브에서 TT를 보기로 합시다.</p>
<hr>
<!-- hr 태그는 수평줄 삽입이다. -->
<pre><q>네 좋아요. 너무 좋아요. 너무너무너무 IOI</q></pre>
<!-- q 태그는 인용문으로 사용된된다. -->
<br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="http://hojak99.tistory.com">hojak99의 블로그</a>
<br>
<h2 id="top">맨 위</h2>
<p>1</p><br>
<p>2</p><br>
<p>3</p><br>
<p>4</p><br>
<p>5</p><br>
<p>6</p><br>
<p>7</p><br>
<p>8</p><br>
<p>9</p><br>
<p>10</p><br>
<p>11</p><br>
<p>12</p><br>
<p>13</p><br>
<p>14</p><br>
<p>15</p><br>
<p>16</p><br>
<p>17</p><br>
<p>18</p><br>
<p>19</p><br>
<p>20</p><br>
<p>21</p><br>
<p>22</p><br>
<p>23</p><br>
<p>24</p><br>
<p>25</p><br>
<p>26</p><br>
<p>27</p><br>
<p>28</p><br>
<p>29</p><br>
<br>
<a href="#top">맨 위로 이동한다/</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>순서없는 목록(Unordered List) </h2>
<ul>
<li>임나연</li>
<li>유정연</li>
<li>모모짱</li>
<li>사나짱</li>
<li>박지효</li>
<li>미나짱</li>
<li>김다현</li>
<li>손채영</li>
<li>조쯔위</li>
</ul>
<br><br>
<h2>순서 있는 목록 (Ordered List)</h2>
<p>내가 제일 좋아하는 연예인 TOP 3</p>
<ol>
<li>사나</li>
<li>모모</li>
<li>나연, 정연, 지효, 미나, 다현, 채영, 쯔위</li>
</ol>
<br><br>
<table border="1">
<tr>
<td>나연</td>
<td>정연</td>
<td>모모</td>
</tr>
<tr>
<td>사나</td>
<td>지효</td>
<td>미나</td>
</tr>
<tr>
<td>다현</td>
<td>채영</td>
<td>쯔위</td>
</tr>
<!--
tag - tr: 표 내부의 행 th: 행 내부의 제목 셀 td: 행 내부의 일반 셀
-->
</table>
</body>
</html>
반응형