1. HTML, CSS란 무엇이며 필요한 이유
| 정의 | 필요한 이유 | |
|---|---|---|
| HTML | 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어. | 전달하고자 하는 의미와 정보를 담음. |
| CSS | 색상, 배치, 모양 등 웹 페이지를 꾸며주는 정적 언어. | 마크업 언어가 실제 표시되는, 시각적인 표현을 담당. 페이지의 정보를 더 효과적으로 전달. |
2. HTML, CSS, JavaScript의 관계
-
HTML: 웹페이지의 내용, 정보 (뼈대) -
CSS: 웹페이지를 예쁘게, 정보를 더 보기 쉽게 꾸며줌 (데코레이션) -
JavaScript: 정적인 페이지에 동적인 기능을 더함 (움직임, 상호작용)⭐️참고! < HTML / CSS / JS의 역할을 시각적으로 표현한 사이트>⭐️
📍 HTML/CSS/Javascript
3. .html, .css, .js세 종류의 파일을 연결하는 방법
1) CSS
: .html 파일의 <head>태그 안에
<link rel=”stylesheet” href=”.css”> 삽입
2) JS
: .html 파일의 <head>태그 안에
or
<body>태그 마지막에 `<script scr=”.js”></script>` 삽입4. script 태그의 위치에 따른 차이점
: html 파일은 상단부터 하향식으로 읽기 때문에(parsing, 파싱)
1. <head>태그 안에 삽입 (상단)
- 장점 : 페이지 로딩 전 JS파일을 먼저 읽어 완벽한 상태의 페이지가 보임.
- 단점 : JS파일이 크거나 인터넷 속도가 느릴 경우, 페이지 로딩이 오래 걸림.
2. <body>태그 마지막에 삽입 (하단)
- 장점 : 페이지 로딩이 빠름.
- 단점 : JS 의존도가 높다면, 페이지가 빨리 로딩 되어도 동작에 제재가 있어 의미가 없음.💡 개선 방법?
head 태그 안에 script 파일을 넣되,
1) 'async' 속성 활용
<script async src="index.js"></script>2) 'defer' 속성 활용 ⭐️추천⭐️
<script defer src="index.js"></script>| 공통 | 차이 | 특징 | |
|---|---|---|---|
| async | HTML 파싱과 script 로딩이 | script 로딩이 끝나면 HTML 파싱 중이라도 바로 실행 | HTML 파싱이 완료되는 시간을 줄일 수 있다. but, script 실행 시 파싱이 멈추는 구간 발생 |
| defer | 동시에 일어난다 | script 로딩이 끝나도 HTML 파싱 중이라면 기다렸다 파싱이 끝난 뒤 실행 | HTML 파싱이 완료되는 시간을 줄일 수 있고, 멈추지도 않음 !👍🏻 |
5. 웹 페이지에서 일어날 수 있는 이벤트의 종류
-
이벤트(Event)란? = 사건
: 사용자가 버튼을 클릭 했을 때, 마우스를 움직였을 때, 키보드를 눌렀을 때 등 어떠한 행동으로 사건이 일어난 것을 말함. -
이벤트의 종류
<Event List(reference)>
MDN : https://developer.mozilla.org/en-US/docs/Web/Events
- 대표적인 이벤트
- UI Event
- Keyboard Event
- Mouse Event
- Focus Event
- Form Event
- Clipboard Event
(참고) https://inpa.tistory.com/entry/JS-📚-이벤트-💯-총-정리
6. 이벤트와 자바스크립트 함수와의 관계
-
이벤트가 발생하면, 그에 맞는 반응이 일어나야 한다.
→ 일반적으로 함수(=이벤트 핸들러)가 실행 됨.< 이벤트 핸들러 사용 방법 2가지 >
- inline 방식 ❌
``` ex) button.onclick = changeColor; ```💡 inline 방식의 문제점
- HTML parsing의 어려움
- 유지보수 어려움 (하나하나 고쳐야)
- 함수
.addEventListener()_추가 /.removeEventListener()_제거 매서드 이용 🙆🏻♀️ex) button.addEventListener(’click’, changeColor); //DOM object.addEventListener('이벤트이름', 함수이름);- 하나의 파일로 여러 파일에 적용 가능 → 유지 보수 용이
- 이벤트 핸들러(리스너) 제거 가능 → 메모리 누수 방지, 필요 없어지면 바로 삭제
- 하나의 이벤트에 대해 여러개의 핸들러(함수)를 등록 가능
-
inline 방식 🤦🏻♀️
button.onclick = changeColor; button.onclick = changeSize; <!--덮어써짐. 첫줄은 실행 안 됨.--> -
함수
.addEventListener()방식🙆🏻♀️button.addEventListener('click', changeColor); button.addEventListener('click', changeSize); //한 번의 'click'으로 두 가지 함수 실행(색 변환, 사이즈 변환)
-
Front-End Developer