리스트, 링크, 사진/동영상/오디오 첨부하기 기능을 사용해보고 싶어서 만들어본 아주 간단한 웹사이트이다.
메인 화면은 index.html 파일로 사진 한 장, 아래에 피아노 음악이 나오는 동영상, 그리고 클릭하면
해당 시가 나오는 페이지로 이동할 수 있는 다섯가지 시 리스트가 나온다.
<메인화면의 구성>
웹페이지 제작에 사용된 사진들은 저작권이 없는 무료 사이트를 이용하였다.
https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#1479ae11437d48c5beef8554c612149e
https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#0f71486d14e74dfa9e6fede335c0e6d2
head 태그 안에 <title>을 넣고
body 태그 안에 <img> 태그로 이미지를 넣고
<ifram>태그로 유튜브의 동영상을 가져와 첨부하였으며
<li>태그와 <a>태그로 시의 리스트를 작성하였다.
해당 리스트를 클릭하면 페이지로 이동하게 된다.
<html>
<head>
<title>beautiful poem</title>
</head>
<body>
<img src="main.jpg" width="800">
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0Vjm-bktb40" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<h1>BEAUTIFUL POEM</h1>
<p>
시는 가장 행복하고 가장 선한 마음의, <br>
가장 선하고 가장 행복한 순간의 기록이다. -셸리 <br>
</p>
<ol>
<li><a href="poem1.html">행복해진다는 것</a></li>
<li><a href="poem2.html">두 사람</a></li>
<li><a href="poem3.html">잠시 후면</a></li>
<li><a href="poem4.html">무엇이 성공인가</a></li>
<li><a href="poem5.html">빛</a></li>
</ol>
</body>
</html>
<시 페이지>
각각의 시 페이지에 들어가보면 맨 위에 음악, 아래에 사진, 시의 제목, 내용 순서대로 확인할 수 있다.
음악은 저작권이 없는 무료 사이트에서 다운 받았다.
https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#80ed5f6009624a859eca6fc844021a83
//음악을 넣는 코드
<audio controls loop>
<source src="Cuore.wav" type="audio/wav">
</source>
</audio>음악을 재생하려면 <audio> 태그를 사용한다.
HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐이며,
loop 속성을 추가하여 음악이 끝나면 다시 처음으로 돌아가 반복적으로 재생되도록 하였다.
자동으로 음악을 재생하는 기능인 "autoplay" 속성은 크롬에서는 아쉽게도 제공하지 않는다고 한다.
사진은 <img>태그로, 시의 제목은 <h2>태그로, 시의 내용은 <p>태그로 단락을 나누어 <br> 줄바꿈 기능을 사용하였다.
<audio controls loop>
<source src="Cuore.wav" type="audio/wav">
</source>
</audio>
<br>
<img src="bird.jpg">
<h2>두 사람</h2>
<p>
이제 두 사람은 비를 맞지 않으리라. <br>
서로가 서로에게 지붕이 되어 줄 테니까. <br>
이제 두 사람은 춥지 않으리라. <br>
서로가 서로에게 따뜻함이 될 테니까.<br>
이제 두 사람은 더 이상 외롭지 않으리라. <br>
서로가 서로에게 동행이 될 테니까. <br>
이제 두 사람은 두 개의 몸이지만 <br>
두 사람의 앞에는 오직<br>
하나의 인생만이 있으리라. <br>
이제 그대들의 집으로 들어가라. <br>
함게 있는 날들 속으로 들어가라. <br>
이 대지 위에서 그대들은 <br>
오랫동안 행복하리라. <br>
</p>
이렇게 만들어본 아주 간단한 시 페이지 사이트이다.
좋아하는 시집을 읽다가 최근에 공부한 HTML의 기초적인 내용을 사용해 보고싶어서 만들게 되었다.
앞으로는 좀 더 복잡한 기능에 도전해보고 싶다.
'프로젝트' 카테고리의 다른 글
| web) video 태그를 사용하여 표현한 4계절 (0) | 2022.01.02 |
|---|---|
| web) 이미지가 있는 버튼 만들기 (2) | 2021.12.23 |
| mysql) TodayILearn (0) | 2021.12.22 |
