하이퍼 텍스트 마크업.. 웹페이지의 가장 기본적이며 지배적인 언어이다.
2022년 8월달 처음으로 HTML을 접하고 나는 나만의 첫 웹페이지를 갖게 되었을때 엄청난 물건을 얻은것 같았다.
처음으로 코딩이라는것을 해보고 처음으로 나의 웹페이지를 가졌을때 가장 먼저 든 생각은 누구나 내 웹페이지를 볼 수 있게 만들고 싶다는 생각이였다. 그렇게 github를 통해 서버를 만들어 인터넷 주소창에 주소만 입력할수 있다면 내 페이지를 볼 수 있게 만들었는데 굉장히 혁명적이였다.
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
</style>
</head>
<body>
<h1><a href="index-1.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1-1.html">HTML</a></li>
<li><a href="2-1.html">CSS</a></li>
<li><a href="3-1.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>var Links = {
SetColor:function(color){
// var alist = document.querySelectorAll('a');
// var i = 0;
// while(i < alist.length){
// alist[i].style.color = color;
// i = i + 1;
// }
$('a').css('color', color);
}
}
var Body = {
setColor:function (color){
// document.querySelector('body').style.color = color;
$('body').css('color', color);
},
SetBackgroundColor:function (color){
// document.querySelector('body').style.backgroundColor = color;
$('body').css('backgroundColor', color);
}
}
function nightDayHandler(self){
var target = document/querySelector('body');
if(self.value === 'night'){
Body.SetBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.SetColor('white')
} else {
Body.SetBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.SetColor('blue');
}
}<!doctype html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index-1.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1-1.html">HTML</a></li>
<li><a href="2-1.html">CSS</a></li>
<li><a href="3-1.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
</p>
</body>
</html><!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index-1.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1-1.html">HTML</a></li>
<li><a href="2-1.html">CSS</a></li>
<li><a href="3-1.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
</p>
</body>
</html><!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index-1.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1-1.html">HTML</a></li>
<li><a href="2-1.html">CSS</a></li>
<li><a href="3-1.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>나의 깃허브에도 업로드 했지만 이 블로그에도 남겨둔다. 생활코딩님의 유튜브를 참조해 진행해본 나의 첫 연습 결과물이다.
댓글