2020. 4. 8. 00:41ㆍ생활코딩/생활코딩웹
개요
지금까지 배웠던 것을 토대로 javascript를 사용하여 만들어봅니다.
실습
이번에는 저번에 만든index.html을 사용하여 제작하여보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="http://localhost/style.css?after">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<div id="control">
<input type="button" value="white" onclick="document.getElementById('target').className='white'" />
<input type="button" value="black" onclick="document.getElementById('target').className='black'" />
</div>
</body>
</html>
위의 코딩을 보면 style.css와 연결되어있으며 저번의 코딩에서 body에 id값 target 지정하여주고 div를 사용하여줍니다 여기서 div는 Division의 약자로 웹사이트의 전체적인 틀을 만들때 주로 사용합니다. 여기서 div안에 id값 control을 지정해줍니다 그리고 control은 나중에 css에서 지정해 줍니다.
그리고 div안에 버튼을 만들어주고 버튼이벤트를 onclick로 지정해주며 document.getElementById('target')을 입력해줍니다 위의 코드는 id = target으로 이벤트 값을 가져가는 것입니다 다음 className을 black와 white로 지정합니다
그리고 실행을 시키면
이렇게 버튼이 생긴것을 볼 수 있습니다. 다음은 css부분을 보겠습니다
body.black {
background-color:black;
color:white;
}
body.white {
background-color:white;
color:black;
}
header{
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right:1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol{
list-style:none;
}
article{
float:left;
padding:20px;
}
#control {
float:right;
}위의 코딩을 보면 index에서 css값인 body.white와 body.black을 가져옵니다 값에는 각각 배경은 흰색으로 바꾼다와 검은색으로 바꾼다라고 되어있으며 control을 보면 float가 오른쪽에 보여주도록 되어있습니다.
자 여기서 black버튼을 눌러보겠습니다.
이렇게 잘적용된것을 볼 수 있습니다.
다음으로 javascript.html로 넘어가 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css?after">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<div id="control">
<input type="button" value="white" onclick="document.getElementById('target').className='white'" />
<input type="button" value="black" onclick="document.getElementById('target').className='black'" />
</div>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>
index.html처럼 버튼을 추가하며 style.css에 맞춰 id를 지정하여주고 실행하여봅니다.
위의 처럼 평범하게 설명이 나오지만 여기서 black를 누르면
이렇게 글자가 흰색으로 보입니다 이렇게 보이는 이유는 css에 body.black을 보면 color:white가 보일것이다 이는 글자의 색을 흰색으로 바꾸어주는 기능입니다 이렇게 나머지도 전부 하나하나 바꿔줍니다
변수와 상수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="http://localhost/style.css?after">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<div id="control">
<input type="button" value="white" onclick="document.getElementById('target').className='white'" />
<input type="button" value="black" onclick="document.getElementById('target').className='black'" />
</div>
<article>
<h2>연산자</h2>
계산을 할 때 사용되는 것입니다.
</article>
</body>
</html>
연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="http://localhost/style.css?after">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<div id="control">
<input type="button" value="white" onclick="document.getElementById('target').className='white'" />
<input type="button" value="black" onclick="document.getElementById('target').className='black'" />
</div>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
</ul>
</article>
</body>
</html>
이렇게 지금까지 배웠던것들을 사용하여 서로 값을 가져오면서 활용할 수 있다는 것을 알 수 있습니다.
참고한 수업 링크
'생활코딩 > 생활코딩웹' 카테고리의 다른 글
| 데이터베이스(MySQL) 이론 (0) | 2020.04.09 |
|---|---|
| PHP 실습 (0) | 2020.04.09 |
| 프로그래밍 접근방법 (0) | 2020.04.07 |
| UI vs API (0) | 2020.04.07 |
| 함수 (0) | 2020.04.07 |