웹호스팅, 채팅 및 댓글 기능
tawk.to에서 채팅 기능 discuss에서는 댓글 기능을 가져와 보았고 Github에서 서버호스팅을 하였다.
add CSS
CSS를 추가적으로 배우게 되면서 block과 grid를 사용하여 웹페이지를 조금 시멘틱하게 바꿀 수 있었다.
또한 CSS로 창모드가 되었을 때 반응형 웹페이작 되도록 수정했다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 웹페이지에게 UTF-8방식으로 문서를 읽어달라고 요청 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 제목 -->
<title>WEB - welcome</title>
<!-- id>class>태그 선택자
강함에 차이의 이유는 뭘까
id의 값은 다른 곳에서 똑같은 id를 사용하면 안되기 때문
class는 여러명이 가질 수 있다
태그는 더 포괄적이다
결국 우선순위는 덜 포괄적인 순이다
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">Ju Chan's WEB</a></h1>
<div id="grid">
<ol>
<p style="margin:0; font-size: 30px; border-bottom:1px solid gray">List</p>
<li><a href="5-1.html" class="saw" id="aciveid"> HTML</a></li>
<li><a href="5-2.html" class="saw active">CSS</a></li>
<li><a href="5-3.html">JavaScript</a></li>
</ol>
<!-- <h1><a href="index.html"><font color="red"> WEB</font></a></h1>
<ol>
<li><a href="5-1.html"><font color="red"> HTML</font></a></li>
<li><a href="5-2.html"><font color="red"> CSS</font></a></li>
<li><a href="5-3.html"><font color="red">JavaScript</font> </a></li>
</ol> -->
<div class="article">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5LRO2I65aR8"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h2>WEB</h2>
<p>
The World Wide Web (WWW), commonly known as the Web, is an information system enabling documents and
other web
resources to be accessed over the Internet.[1]
Documents and downloadable media are made available to the network through web servers and can be
accessed by
programs such as web browsers. Servers and resources on the World Wide Web are identified and located
through
character strings called uniform resource locators (URLs). The original and still very common document
type is a
web page formatted in Hypertext Markup Language (HTML). This markup language supports plain text,
images,
embedded video and audio contents, and scripts (short programs) that implement complex user interaction.
The
HTML language also supports hyperlinks (embedded URLs) which provide immediate access to other web
resources.
Web navigation, or web surfing, is the common practice of following such hyperlinks across multiple
websites.
Web applications are web pages that function as application software. The information in the Web is
transferred
across the Internet using the Hypertext Transfer Protocol (HTTP).
Multiple web resources with a common theme and usually a common domain name make up a website. A single
web
server may provide multiple websites, while some websites, especially the most popular ones, may be
provided by
multiple servers. Website content is provided by a myriad of companies, organizations, government
agencies, and
individual users; and comprises an enormous mass of educational, entertainment, commercial, and
government
information.
The World Wide Web has become the world's dominant software platform.[2][3][4][5] It is the primary tool
billions of people worldwide use to interact with the Internet.[6]
</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://web-1-bvwnyrvwuv.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>
<!--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/632a84e054f06e12d895ebdf/1gdf1e3nc';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
</script>
<!--End of Tawk.to Script-->
</p>
</div>
</div>
</body>
</html>css
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
margin: 0;
}
/* #activeid {
color: blueviolet;
} */
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 100px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
/* .saw {
color: blue;
}
.active {
color: red;
} */
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
padding-left: 33px;
}
h2 {
margin: 0;
padding: 20px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid .article {
padding-left: 20px;
}
@media(max-width:800px) {
#grid {
display: block;
}
h1 {
font-size: 50px;
}
#grid ol {
border-right: none;
margin-left: 40%;
text-align: center;
}
}
개발/보안