toggle버튼을 만들어서 Day-Night 기능을 설정하였다.
또한 객체, 함수, 제이쿼리 라이브러리 등을 사용하면서 코드를 간략하게 줄여보았다.
배워간 것
기본적으로 C파생언어인 JavaScript를 배우는 것이기에 문법들만 익히면 됐다.
하지만 프로그래밍 언어로 HTML같은 코드를 지배할 수 있다는 사실을 배울 수 있었다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 웹페이지에게 UTF-8방식으로 문서를 읽어달라고 요청 -->
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 제목 -->
<title>WEB - welcome</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 class="saw"><a href="index.html">Ju Chan's WEB</a></h1>
<div class="toggle">
<input id="night-day" type="button" value="night" onclick="nightHandle()">
</div>
<div id="grid">
<ol>
<p style="margin:0; font-size: 30px; border-bottom:1px solid gray">List</p>
<script>
List();
</script>
</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 class="saw2" id="disqus_thread"></div>
<script>
discuss();
</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">
twak();
</script>
<!--End of Tawk.to Script-->
</p>
</div>
</div>
</body>
</html>CSS
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
margin: 0;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-size: 100px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding:20px;
padding-left: 10px;
border-bottom: 1px solid gray;
}
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;
}
}
#night-day{
text-align: center;
width:131.5px;
height:50px;
font-size: large;
font-weight: bold;
background-color: cornflowerblue;
}
.toggle{
margin-left: 0px;
}
.active{
margin-right:0px;
margin-bottom:10px;
font-size:20px;
font-weight: bold;
width: 80px;
border-bottom: 1px solid gray;
}
JavaScript
var Links = {
setColor : function (color) {
target = document.querySelector('body');
// All = document.querySelectorAll('.saw');
target.style.color = color;
document.querySelector('a').style.color = color;
// for (var i = 0; i < All.length; i++) {
// All[i].style.color = color;
// }
$('.saw').css('color',color)//이 웹페이제 있는 모든 a를 jquery가 통제한다. 그리고 그 컬러 값을 이 함수의 컬러
//값으로 변경한다
// $('body').css('color',color);
}
}
var Body = {
SetTime: function (time) {
document.querySelector('#night-day').value = time;
// $('#night-day').value=time;
},
SetBackgroundColor: (color) => {
// target.style.backgroundColor = color;
$('body').css('backgroundColor',color);
}
}
function nightHandle() {
// saw라는 클래스가 있는 태그들의 배열을 All변수에 담아줌
if (document.querySelector('#night-day').value == 'night') {
Links.setColor('white');
Body.SetBackgroundColor('black');
Body.SetTime('day');
}
else {
Links.setColor('black');
Body.SetBackgroundColor('white');
Body.SetTime('night');
}
}
function List() {
var lan = ['HTML', 'CSS', 'JavaScript'];
var cntArr = ["5-1.html", "5-2.html", "5-3.html"];
var cnt = 0;
for (var i = 0; i < lan.length; i++) {
document.write('<li"><a href=' + cntArr[cnt] + '><div class="saw active">' + lan[i] + '</div></a></li>');
cnt++;
}
}
function twak() {
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);
})();
}
function discuss() {
(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);
})();
}
개발/보안