1. HTML, CSS란 무엇이며 필요한 이유
HTML - HyperText Markup Language
- 웹 페이지의 내용과 구조를 담당하는 언어로써 HTML태그를 통해 정보를 구조화한다.
- HTML 은
.htm.html과 같은 확장자를 가진다.
즉, 모든 웹 페이지는 HTML을 이용해 구조가 결정된다.
CSS - Cascading Style Sheet
- 마크업 언어가 실제 표시되는 방법을 기술하는 언어.
- HTML의 각 요소의 style 을 정의하여 화면 등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어.
JavaScript
- 자바스크립트는 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어.
- 자바스크립트로 작성한 프로그램을 script 라고 부른다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데 , 웹 페이지를 불러올 때 자동으로 실행된다.
- 자바스크립트는 개발자가 별도의 컴파일을 수행하지 않아도 되는 인터프리터 언어(Interpreter language)이다.
2. HTML, CSS, JavaScript의 관계
정보의 구조화 / styling의 정의 / 제어
.html, .css, .js세 종류의 파일을 연결하는 방법
HTML 내부에 link 태그와 script 태그를 사용해 연결해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS LINK-->
<link rel="stylesheet" href="style.css" />
<title>WOOKIE'S BIRTHDAY</title>
</head>
<body>
<!-- JavaScript -->
<script src="index.js"></script>
</body>
</html>
4. script 태그의 위치에 따른 차이점
브라우저의 동작방식
브라우저가 HTML 코드를 읽어 내려가며 parsing 하면서 DOM 트리가 생성되고 이어서 Render 트리가 생성된 뒤 브라우저에 display된다.
HTML 코드의 중간에 <script></script> 태그를 삽입할 경우
브라우저는 HTML을 읽어내려가는 과정에서 script요소를 만나면 parsing 을 중단하고 자바스크립트 코드를 로드하고 parsing 하게 된다. 이 작업을 마친 뒤 다시 뒤에 남은 HTML코드를 마저 읽어내려간다.
즉, 이 과정에서 중단되는 시점으로 인해 우리가 보는 Display에 표시되는 것이 지연된다. (화면 레이아웃이 제대로 구성되지 않은 상태로 사용자에게 뷰를 제공하게 될 확률이 높기 때문에 사용자 경험(UX) 측면에서 좋지 못하다.)또 DOM 조작을 위한 코드가 스크립트 태그 안에 존재한다면 아직 파싱되지 않은 HTML요소에 있어서는 오류가 발생할 수 있다.
때문에 모든 HTML 코드가 parsing 된 후에 브라우저가 script요소를 해결할 수 있도록 body 태그의 맨 하단에 작성해준다.
5. 웹 페이지에서 일어날 수 있는 이벤트의 종류
이벤트란? DOM 요소와 관련되어 발생하는 사건들.
자바스크립트를 이용해 동작시킨다.
ex) click , scroll, keyDown etc..
6. 이벤트와 자바스크립트 함수와의 관계
event handler - 각 이벤트가 실행될 때 수행할 동작들을 함수로 작성해준다.
// HTML
<button type="button">ON</button>
// JavaScript
const button = document.querySelector("button"); // DOM Element
// addEventLitsner(type, litsner)
// 버튼을 click 했을 때 handleClick함수를 실행시켜준다.
button.addEventListener("click",handleClick);
// handleClick 함수는 버튼의 text를 변경해준다.
function handleClick() {
button.textContent = "OFF";
}