<복습>
https://wook-2124.tistory.com/59
[JavaScript] #1.4 Vanilla JS (#코딩공부)
https://youtu.be/1fc0MHYb_DE <복습> https://wook-2124.tistory.com/58 [JavaScript] #1.2 Super Powers of JS / #1.3 ES5, ES6 ESWTF (#코딩공부) https://youtu.be/dBH_aMCuztk <복습> https://wook-2124.tist..
wook-2124.tistory.com
<준비물>
Online IDE, Editor, and Compiler - Fast, Powerful, Free
Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS
repl.it
<코드기록>
// index.html
<!DOCTYPE html>
<html>
<head>
<title>JH</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>This works!</h1>
<script src="script.js"></script>
</body>
</html>
// 원래 index.html에 적혀있던 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
//style.css
body{
background-color: peru;
}
h1{
color:aliceblue;
}
// script.js
console.log("I'm Working. I'm JS. I'm worth it. I'm beautiful.");1. HTML(HyperText Markup Language)
<link>로 css 파일인 style.css을 연결해주고, <h1>으로 html 나타낼 text를 적어주자.
<h1> ~ <h6> 태그는 HTML 문서에서 제목(heading)이나 text를 정의할 때 사용한다.
<h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의한다.
<h1>이 텍스트는 h1 요소를 사용한 제목</h1>
<h2>이 텍스트는 h2 요소를 사용한 제목</h2>
<h3>이 텍스트는 h3 요소를 사용한 제목</h3>
<h4>이 텍스트는 h4 요소를 사용한 제목</h4>
<h5>이 텍스트는 h5 요소를 사용한 제목</h5>
<h6>이 텍스트는 h6 요소를 사용한 제목</h6>
<p>이 텍스트는 p 요소를 사용한 단락</p>2. CSS(Cascading Style Sheets)
index.html의 body의 background-color를 red로 설정해줬다.
index.html의 background-color가 red로 나타나고 <h1>요소로 적은 This works!도 보인다, 그리고 이 index.html의 title은 JH라는 웹사이트이다.
red는 너무 난잡하니 color를 임의로 바꿔주고,
<h1>요소의 color도 바꿔줬다.
3. JS(JavaScript)
index.html에 src(source)="script.js"로 script.js 파일을 추가했다.
js파일에 alert를 써주면 "__"에 적어둔 경고문이 뜰 것이다.
위와 같이 경고문이 뜨는 것을 알 수 있다. 정적인 html에 동적인 기능을 추가하는게 javascript의 주요 역할이다.
console.log(javascript) = print(python)이라고 생각하면 된다. 즉, console에 "___" 문구 혹은 () 안에 들어있는 변수(variable)을 띄우는 것이다.
변수(variable)에 대해서는 다음시간에 알아보겠다! :)
※ 신종 코로나 바이러스 조심하세요!!!!
'JavaScript > Clone Website' 카테고리의 다른 글
| [JavaScript] #1.8 Data Types on JS - String, Boolean, Number, Float (#코딩공부) (0) | 2020.03.11 |
|---|---|
| [JavaScript] #1.6 Your first JS Variable / #1.7 let, const, var (#코딩공부) (0) | 2020.03.08 |
| [JavaScript] #1.4 Vanilla JS (#코딩공부) (0) | 2020.03.07 |
| [JavaScript] #1.2 Super Powers of JS / #1.3 ES5, ES6 ESWTF (#코딩공부) (0) | 2020.03.06 |
| [JavaScript] #1.1 Why JS (#코딩공부) (0) | 2020.03.05 |
댓글