오늘 갑작스러운 아이디어로 국민의례에 사용되는 애국가 재생 및 묵념시간에 사용되는 audio 파일을 갖고 웹사이트 만들기를 도전하였다.
밑에 함께 사용된 코드도 공유하였다.
참고로 전체적인 틀은 css free를 이용하여 다운로드 받고 사용하였다.
앞으로 사소하지만 유용하게 사용될 수 있는 것들을 계속해서 만들어 나아갈 예정이다. 아직 실력이 부족해서 완성도가 많이 떨어지지만 갈수록 발전해 나가고 싶다. 개발이라는것은 이 시대의 발명가가 아닌가 싶다. 개발은 사람들에게 더욱 편리한 일상을 위한 도구를 만들기도, 조금 더 윤택하고 스마트한 삶 을 지낼수 있게 해주기도 때문에 정말 멋있고 가치있는 일이라고 생각한다.
오늘 만들어 본 것은 이런점을 착안하였다.
우리가 살아가면서 가끔 한번씩은 국민의례를 하는 순간들이 있지 않나 싶다. 학창시절때 방송부 아이들이 시간에 맞춰 오디오를 재생하거나 pc에 있는 애국가 파일이 고장났다며 어떡하냐며 선생님들께 질문하는 모습이 떠오르곤 했다.
요즘 시대에 손쉽게 접근할 수 있는 웹을 통해 안정적으로 국민의례때 사용되는 오디오 파일을 어디서든 사용 할 수 있다면 편리할것 같았다. (물론 나만 그렇게 생각할수도..)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애국가 및 순국선열 및 호국영령에 대한 묵념</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/elusive-webfont.css">
<link href="css/animate.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
</head>
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="el-icon-lines"></i>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><h1>KOREA </h1></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#Home" class="smoothScroll">애국가</a></li>
<li> <a href="#About" class="smoothScroll">순국선열 및 호국영령에 대한 묵념</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- ==== HEADERWRAP ==== -->
<div id="headerwrap" id="home" name="home">
<header class="clearfix">
<h1 class="animated bounceIn">애국가</h1>
<p class="animated slideInLeft">손쉽게 애국가와 순국선열 및 호국영령에 대한 묵념을 재생하세요</p>
<p class="animated slideInRight">We Are Here For You.</p>
<a href="#about" class="btn homebtn smoothScroll">재생하세요 <i class="el-icon-chevron-down homeicon"></i></a>
</header>
</div><!-- /headerwrap -->
<div class="">
<div class="">
<div id="portfolio-carousel">
<!-- PORTFOLIO IMAGE 1 -->
<div class="fade-up col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio01.png" alt="">
<figcaption>
<h5>애국가</h5>
<a href="music.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 2 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio02.jpg" alt="">
<figcaption>
<h5>순국선열 및 호국영령에 대한 묵념</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="..images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 3 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio03.jpg" alt="">
<figcaption>
<h5>국기에 대한 경례</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="..images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 4 -->
<div class="fade-up col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio04.jpg" alt="">
<figcaption>
<h5>PROJECT FOUR</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 5 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio05.jpg" alt="">
<figcaption>
<h5>PROJECT FIVE</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 6 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio06.jpg" alt="">
<figcaption>
<h5>PROJECT SIX</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 1 -->
<div class="fade-up col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio01.png" alt="">
<figcaption>
<h5>PROJECT SEVEN</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 2 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio02.jpg" alt="">
<figcaption>
<h5>PROJECT EIGHT</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 3 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio03.jpg" alt="">
<figcaption>
<h5>PROJECT NINE</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 4 -->
<div class="fade-up col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio04.jpg" alt="">
<figcaption>
<h5>PROJECT TEN</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 5 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio05.jpg" alt="">
<figcaption>
<h5>PROJECT ELEVEN</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- PORTFOLIO IMAGE 6 -->
<div class="fade-up col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="./images/folio06.jpg" alt="">
<figcaption>
<h5>PROJECT TWELVE</h5>
<a href="single-project.html" class="btn btn-primary btn-lg"><i class="el-icon-link"></i></a>
<a href="images/folio01.png" class="btn btn-primary btn-lg launch-lb"><i class="el-icon-zoom-in"></i></a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
</div><!-- /carousel -->
</div><!-- /row -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /row -->
<br>
<br>
</div><!-- /container -->
<!-- ==== SECTION DIVIDER6 ==== -->
<section class="section-divider textdivider divider6">
<div class="container">
<h1 class="fade-down">CRAFTED IN NEW YORK, USA.</h1>
<hr>
<div class="fade-up">
<p>Times Square, New York</p>
<p>+12 12345 123</p>
</div>
</div><!-- container -->
</section><!-- section -->
<div class="container" id="contact" name="contact">
<div class="row row white">
<br>
<h1 class="centered fade-down">THANKS FOR VISITING US</h1>
<hr class="fade-down title-mb">
<div class="col-md-4 fade-up">
<h3>Contact Information</h3>
<p><span class="icon icon-home"></span>Korea<br/>
<span class="icon icon-phone"></span><br/>
<span class="icon icon-mobile"></span<br/>
<span class="icon icon-envelop"></span> <a href="#">dlehdgh2919@gmail.com</a> <br/>
<span class="icon icon-twitter"></span> <a href="#"></a> <br/>
<span class="icon icon-facebook"></span> <a href="#"></a> <br/>
</p>
</div><!-- col -->
<div class="col-md-4 fade-up">
<h3>Newsletter</h3>
<p>Register to our newsletter and be updated with the latests information regarding our services, offers and much more.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-4 control-label"></label>
<div class="col-md-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="text1" class="col-md-4 control-label"></label>
<div class="col-md-10">
<input type="text" class="form-control" id="text1" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<button type="submit" class="btn btn-success">Sign in</button>
</div>
</div>
</form><!-- form -->
</div><!-- col -->
<div class="col-md-4 fade-up">
<h3>Support Us</h3>
<p>mingguming thank you for your positive mind</p>
<p>mingguming sister thank you for your idea</p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<div id="footerwrap">
<div class="container">
<div class="btt-wrapper fade-down"><a class="btt-link smoothScroll" href="#home"><i class="el-icon-chevron-up"></i></a></div>
<ul id="footer-social" class="fade-down">
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-twitter"></i></a></li>
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-facebook"></i></a></li>
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-googleplus"></i></a></li>
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-flickr"></i></a></li>
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-youtube"></i></a></li>
<li><a href="#" target="_blank" title="Like Us"><i class="el-icon-rss"></i></a></li>
</ul>
<h4 class="fade-up">Created by <a href="https://www.tistory.com/member/blog">블랙홀코딩</a> - Copyright 2022</h4>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>index.html 코드
<body>
<h3>애국가</h3>
<audio src="media/애국가.mp3" controls></audio>audio 태그
깃허브를 이용하여 웹호스팅하여 인터넷 세상에 내 창작품을 공개하였다.
https://machdn.github.io/korea-national-ritual/
애국가 및 순국선열 및 호국영령에 대한 묵념
Newsletter Register to our newsletter and be updated with the latests information regarding our services, offers and much more.
machdn.github.io
하지만 기술적인 문제로인해 사용했던 font img 등 소스들이 작동하지 못하여 완전 html 코드들만 동작하는 수준으로 웹사이트가 깨져버렸다.. 이를 해결하기 위해 계속 검색을 하며 고난중이다.. 깃허브에 웹호스팅을 하게되면 디렉토리가 달라져서 그래서 ../ 을 src 앞에 넣는다던지 해야된다는데 나는 무엇이 문제인지 잘 동작하지 않는다.
분명!! 로컬호스트에선 잘 작동되는데.... 웹호스팅상에서는 잘 되지 않는다.. 역시 호락호락하지 않다. 1개를 알게 되면 10가지 의문이 생기고 10가지 의문 중 1가지를 해결하면 엄청나게 기쁨과 동시에 또 다른 문제점이 발생하고 그 문제점을 보다보면 욕심이 생긴다.
이 문제도 정말 해결하고 싶다.. 우선 블로그에 업로드 해두고 잘 해결해봐야겠다.
'프로젝트 (Project)' 카테고리의 다른 글
| [CI/CD] SSH into my VM - Using git action & docker-compose (0) | 2023.05.01 |
|---|---|
| [Woodpecker] Secure & Open-source CI/CD tool 구축 (1) | 2023.04.11 |
| [네이버쇼핑] 전동킥보드DB 만들기 (크롤링, 텍스트 마이닝) (0) | 2022.11.23 |
| BMI 지수를 간단하게 도출해보는 페이지 만들어보기 (with java script) (0) | 2022.10.23 |
| SQLD (SQL개발자) 자격시험 도전! (4) | 2022.10.07 |
댓글