Notice
Recent Posts
Recent Comments
Link
먼지나는 블로그
생활코딩 WEB1 부록 본문
동영상 삽입
<!doctype html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>HTML</h2>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</p>
<p><a href="http://www.w3.org/TR/html5"
target = "_blank" title = "html5 specification"> Hypertext Markup Launguage (HTML)</a> is the standard markup
language for <strong>creating <u>web</u> pages </strong>
and web applications. Web browsers receive HTML documents
from a web server or from local storage and render them
into multimedia web pages. HTML describes the structure of
a web page sematically and originally included cues for
the appearance of the document.
<img src="cat.jpg" width="100%"></p>
<p style="margin-top:45px;">
This HTML usage data comes from 11.3 million
index pages gathered from top twenty Google results,
for about 30 million keywords - chosen by keyword volume.
To learn more about this data,
visit the FAQ section.</p>
</body>
</html>
기존에 작성했던 html코드에서 iframe코드만 넣어
내 웹사이트에 동영상을 추가할수 있게 되었다
밑에 있는 영상 공유 -> 퍼가기를 누르면 iframe이라는 태그로 적힌
코드 한문장이 나오게 되는데 해당 코드를 <p>태그 안에 넣어주었다
https://www.youtube.com/watch?v=LVLHprUg-PM&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=32
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</p>result
정상적으로 불러와지는 것을 확인할 수 있다
댓글 기능
<p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-uwrtt5hwxf.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</p>
1.html코드에 dispus를 이용해 댓글기능을 추가하는 과정이다
아래 사이트에 나와있는 코드를 추가할 경우 댓글을 자유롭게 올리거나 수정할 수 있는 기능이 추가된다
추가하고도 댓글기능이 표시가 안되는 경우가 간혹있는데
그럴 경우 위에 사이트 주소가 file://로 시작하는 것이
아닌지 살펴볼 필요가 있다
127.0.0.1/index.html로 접속해 리로드해보면
아래의 결과가 나타나게 된다
https://web1-uwrtt5hwxf.disqus.com/admin/install/platforms/universalcode/
result
채팅 기능
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/60d58bff7f4b000ac0397cf2/1f912loe2';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->talkto를 사용해 채팅기능을 추가해보고자 한다
body태그가 끝나기 직전에 해당코드를 추가하면 아래의 그림과 같이
관리자와의 채팅을 자유롭게 할 수 있다
