1. HTML을 이용해 웹에서 오디오 파일 실행하기
일단 오디오 파일이 필요하니 유튜브 스튜디오 뮤직 라이브러리를 사용했다(https://studio.youtube.com)
이중 마음에 드는 곡 3개를 오프라인 다운로드로 가지고 왔다.
음악파일을 넣는 것은 매우 간단한데 오디오 태그 <audio>, </audio> 이 둘 사이에 <source src="음악파일. mp3">를 넣어주면 된다. 처음 오디오 태그 뒤에 control을 넣어 음악을 재생할 수 있게 만들어주자. 그 외에 autoplay, muted 등 다른 옵션을 추가할 수 또 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Document</title>
</head>
<body>
<p>Don't Fret</p>
<audio controls autoplay loop>
<source src="music/Don't Fret - Quincas Moreira.mp3" type="audio/mpeg" />
<source src="music/Don't Fret - Quincas Moreira.wav" type="audio/wav" />
</audio>
<p>Hotlanta</p>
<audio controls muted>
<source src="music/Hotlanta - Track Tribe.mp3" />
</audio>
<p>Two Hearts</p>
<audio controls>
<source src="music/Two Hearts - TrackTribe.mp3" />
</audio>
</body>
</html>
그럼 이런 식으로 웹에서 음악을 재생시킬 수 있다.
2. HTML을 이용해 웹에서 비디오 파일 실행하기
: 비디오 파일은 우리 집 고양이 동영상을 사용했다.
동영상 파일도 오디오 파일과 비슷하게 비디오 태그 <video>, </video> 사이에 비디오 소스를 넣으면 된다. 그리고 하이퍼 링크를 통해서 동영상을 클릭하면 내 블로그로 연결되게 만들어보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Document</title>
</head>
<body>
<a href="https://mcgizzang.tistory.com/3">
<video width="500px" controls autoplay muted loop>
<source src="video/cat.mp4" type="video/mp4" />
</video>
</a>
</body>
</html>
3. 파비콘(Favicon) 설정하기
: 파비콘(Favicon)이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지이다. 예를 들어 티스토리의 경우에는 다음과 같이 생겼다.
파비콘은 가장 일반적으로 16*16 아니면 32*32 픽셀로 보인다. 용도에 따라서 다양한 크기로도 사용된다.
일단 정사각형의 사진을 만든다. 내 경우에는 또 우리 집 고양이 맥그리거를 사용했다.
이런 식으로 만든 뒤 HTML 문서 헤드 파트에 다음과 같이 링크를 넣어주면 된다.
<link rel="icon" type="image/jpg" href="img/icon.jpg" />
웹에서 보이는 건 다음과 같다.
4. 텍스트 포매팅
: HTML에서 포매팅은 다음 태그들을 사용하면 매우 간단하게 할 수 있다.
| 태그 | 기능 |
| <b> | 굵은 텍스트 |
| <i> | 이탈릭 텍스트(기울어져 있는 문자) |
| <u> | 밑줄 텍스트 |
| <del> | |
| <big> | 큰 텍스트 |
| <small> | 작은 텍스트 |
| <sub> | 서브스크립트 텍스트 |
| <sup> | 슈퍼스크립트 텍스트 |
| <tt> | 모노스페이스 텍스트 |
| <mark> | 마크된 텍스트 |
예시를 들면 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/jpg" href="img/icon.jpg" />
<title>Document</title>
</head>
<body>
<p>This is normal text</p>
<p>This is <b>bold</b> text</p>
<p>This is <i>italic</i> text</p>
<p>This is <u>underlined</u> text</p>
<p>This is <del>deleted</del> text</p>
<p>This is <big>big</big> text</p>
<p>This is <small>small</small> text</p>
<p>This is <sub>subscript</sub> text</p>
<p>This is <sup>superscript</sup> text</p>
<p>This is <tt>monospaced</tt> text</p>
<p>This is <mark style="background-color: aquamarine">marked</mark> text</p>
</body>
</html>
이런 식으로 나오는 걸 볼 수 있다.
+Bonus 리스트 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/jpg" href="img/icon.jpg" />
<title>Document</title>
</head>
<body>
<h4>Groceries</h4>
<!-- Unordered List -->
<h4>To Get List</h4>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Coffee</li>
<ul>
<li>Coffee Beans</li>
<li>Creamer</li>
<li>Sugar</li>
</ul>
</ul>
<!-- Ordered List -->
<h4>To Do List</h4>
<ol>
<li>Eat breakfast</li>
<li>Go to class</li>
<li>Walk dog</li>
<li>Work</li>
</ol>
<!-- Description List -->
<h4>Mythical Creatures</h4>
<dl style="background-color: aquamarine; border: 2px solid">
<dt>Dragon</dt>
<dd>
드래곤(영어: dragon 드래건)은 서양의 신화 및 전설에서 공룡 및 익룡이나
악어를 닮은 상상의 동물이다. 날카로운 발톱과 송곳니를 갖고 있으며,
등에는 박쥐와 같은 날개가 달려있어 하늘을 날 수도 있다. 입에서는 불이나
연기를 내뿜는다고 한다. 대체로 몸집이 거대하다고 한다.
</dd>
<dt>Phoenix</dt>
<dd>
피닉스(phoenix) 또는 불사조(不死鳥, "죽지 않는 새")는 아라비아 사막에
살며 500년마다 스스로의 몸을 불태워 죽고 그 재 속에서 부활(born again)
또는 재생한다. (regenerate)는 전설상의 새이다. 수명인 500년이 끝나갈
때쯤 피닉스는 나무의 꼭대기로 올라가 자신을 태운다고 한다. 영원 불멸의
상징이다.
</dd>
<dt>Vampire</dt>
<dd>
흡혈귀(吸血鬼)는 민속 또는 신화에서 생물의 정기(일반적으로 혈액의
형태)를 빨아먹는 존재이다. 유럽의 뱀파이어(Vampire), 아라비아의 구울,
중국의 강시 등 다양한 문화에서 흡혈귀의 존재가 선사 시대부터 전래되어
왔지만[7] "뱀파이어"라는 단어는 15초까지 대중화되지 않았고, 발칸반도와
동유럽의 흡혈귀 미신이 서유럽으로 유입되고 나서 부르기 시작되었으며,[8]
그리스에서는 보로라카스(βρυκόλακας), 루마니아에서는 스트리고이(strigoi)
등 다양한 명칭으로 알려져 있었다. 유럽의 흡혈귀 미신이 집단 히스테리
수준으로 발전하여 실제로 시체처럼 걷는 사람들을
뱀파이어리즘(vampirism)으로 신고하기도 하였다.
</dd>
<dt>Werewolf</dt>
<dd>
늑대인간(영어: werewolf 웨어울프[*], 독일어: Werwolf 베어볼프[*]) 또는
리칸트로페(그리스어: λυκάνθρωπος = λύκος; lýkos + ἄνθρωπος; ánthrōpos,
영어: lycanthrope 라이칸스로프[*]) 또는 브리콜라카스(그리스어:
βρυκόλακας)은 신화 또는 민속에서 늑대와 반인반수 또는, 동시에 늑대와
같이 혼혈종이 되는 인간을 의미한다. 종종 민속에서 의도적으로 저주 또는
고통으로 설명되기도 한다(다른 늑대인간에 물려 변하는 예). 이 변환은 종종
보름달이 올랐을 때 변하는 것과 관련되기도 한다. 늑대인간 신화가 최초로
나온 것은 페트로니우스와 틸베리의 거베이스(Gervase of Tilbury)이다.
</dd>
</dl>
</body>
</html>
++ Bonus2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/jpg" href="img/icon.jpg" />
<title>Document</title>
</head>
<body>
<h3>Store Hours</h3>
<table border="1" style="background-color: lightblue">
<tr align="center">
<th width="100">Suday</th>
<th width="100">Monday</th>
<th width="100">Tuesday</th>
<th width="100">Wednesday</th>
<th width="100">Thursday</th>
<th width="100">Friday</th>
<th width="100">Saturday</th>
</tr>
<tr align="center">
<td>Closed</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>10-2</td>
</tr>
</table>
</body>
</html>
'AIoT' 카테고리의 다른 글
| AIoT 정규 34일차 (0) | 2024.02.19 |
|---|---|
| AIoT 정규 33일차 (0) | 2024.02.19 |
| AIoT 정규 31일차 (0) | 2024.02.15 |
| AIoT 정규 30일차 (2) | 2024.02.13 |
| AIoT 정규 29일차 (0) | 2024.02.07 |