Web 개발을 위한 기초 프론트엔드 지식
in Web on Html, Css, Js
HTML(HyperText Markup Language)
웹페이지의 기본 골격을 생성할 때 사용
index.html
<!DOCTYPE html>
<html>
<head>
<title>이정연의 홈페이지</title>
<link href="./practice.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function doSomething(){
let a = document.getElementById('inputA').value;
let b = document.getElementById('inputB').value;
document.getElementById("valueA").innerHTML = a;
document.getElementById("valueB").innerHTML = b;
document.getElementById("valueC").innerHTML = Number(a) + Number(b);
}
</script>
</head>
<body>
<nav>
<a href ="./index.html">Home</a>
<a href ="./blog_list.html">Blog</a>
<a href ="./about_me.html">About Me</a>
</nav>
<h1>첫 번째 크기 헤드라인</h1>
<h2>두 번째 크기 헤드라인</h2>
<h3>세 번째 크기 헤드라인</h3>
<h4>네 번째 크기 헤드라인</h4>
<h5>다섯 번째 크기 헤드라인</h5>
<p>문단은 p로 쓴다. ㅋㅋㅋㅋ</p>
<a href="https://www.google.com">Go to google</a>
<hr/>
<img src="./images/google.png" height="400px">
</body>
</html>
- about_me.html
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<link href="./practice.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<a href="./index.html">Home</a>
<a href ="./blog_list.html">Blog</a>
<a href ="./about_me.html">About Me</a>
</nav>
<h1>About Me</h1>
<h2>천안사람 이정연입니다.</h2>
<p>HTML,CSS,JS,Django로 재미있는 웹 사이트 만드는 것을 좋아합니다.</p>
<a href="index.html">첫 화면으로 가기</a>
<img src="./images/me.jpeg" height="400px">
</body>
</html>
- blog_list.html
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<link href="./practice.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<a href="./index.html">Home</a>
<a href ="./blog_list.html">Blog</a>
<a href ="./about_me.html">About Me</a>
</nav>
<h1>Blog</h1>
<p>아직 작성하지 않았습니다.</p>
</body>
</html>
CSS(Cascading Style Sheets)
HTML의 스타일을 한 번에 관리하기 위한 도구
practice.css
nav {background-color: darkgreen; font-size: 150%; text-align: center}
nav a{color: gold}
- css파일 하나를 생성한 후 html에서 링크를 걸어서 이 파일 하나의 수정으로 모든 html의 스타일을 한번에 관리
JavaScript
웹 브라우저 내에 동적인 영역을 만들 때 사용
html의 head에서 자바스크립트의 함수를 선언 가능
<script type="text/javascript">
function doSomething(){
let a = document.getElementById('inputA').value;
let b = document.getElementById('inputB').value;
document.getElementById("valueA").innerHTML = a;
document.getElementById("valueB").innerHTML = b;
document.getElementById("valueC").innerHTML = Number(a) + Number(b);
}
function whatTimeIsIt(){
alert(new Date());
}
</script>
- html의 body에서 함수를 사용하기 위한 프론트 구현 가능
<button onclick="whatTimeIsIt()">현재시간</button>
<hr />
<label for="inputA">a</label>
<input id="inputA" value=1 onkeyup="doSomething()">
<label for="inputB">b</label>
<input id="inputB" value=2 onkeyup="doSomething()">
<p><span id = "valueA">1</span> + <span id = "valueB">2</span> = <span id = "valueC">3</span>입니다.</p>
js 파일을 여러 html 파일에 적용하기
js 파일을 만들어 함수를 적는다
html 파일에 js 파일 링크를 건다
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<link href="./practice.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="what_time_is_it.js"></script>
</head>
웹페이지 화면
