WIL#4 ) Nov. 2nd Week (2)

29346 단어 keywords WIL Nov2 Nov2

🚀 What I Learned

HTML과 CSS의 역할에 대해 설명할 수 있다.
HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.
CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.
.html 파일과 .css 파일을 연결시킬 수 있다.
배운 개념을 활용하여 자기 소개 페이지를 만들수 있다.

11월 2주차 스터디 키워드

HTML, CSS란 무엇이며 필요한 이유
HTML, CSS, JavaScript의 관계
.html, .css, .js 세 종류의 파일을 연결하는 방법
script 태그의 위치에 따른 차이점
웹 페이지에서 일어날 수 있는 이벤트의 종류
이벤트와 자바스크립트 함수와의 관계

🔑 HTML, CSS란 무엇이며 필요한 이유

HTML(Hyper Text Markup Language) : 구조(기획자)
웹페이지를 만드는 컴퓨터 언어이다. 페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다. 웹페이지를 만들면 정보를 public하게 공유할 수 있다는 점이 유용하며 이러한 웹페이지를 만들기 위한 언어로서 HTML은 필요하다.
CSS(Cascading Style Sheets) : 스타일(디자이너)
웹페이지에 시각적 표현(디자인)을 입히는 언어이다. 실제 화면에 표시되는 방법(색상, 폰트 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다. 웹페이지를 HTML로 만들다가 디자인을 입히고 싶어서 CSS를 개발했다.
JS(JavaScript) : 동적처리(개발자)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당한다.

Why?

A. 웹 사이트를 만들기 위해서는 사용자에게 보여줄 웹 문서가 있어야 하는데 그것을 작성하기 위해 HTML이 필요하다. 또한 아무런 디자인 없이 그냥 웹 문서 그대로를 보여줄 수도 있지만 사용자가 보기 편하고 예쁘도록 디자인을 입히기 위해 필요한 것이 CSS이다.

HTML5 기본 구조

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8"> 
    <title> HTML 기본 구조 </title>
</head>
<body>
 HTML5 기본 구조 
</body>
</html>

DOCTYPE 선언

< !DOCTYPE html > 은 브라우저에 제공하려고 하는 HTML이 현재의 웹표준에 의거해서 실행한다는 일종의 선언문이다. 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도이다. 'html'이 버전을 의미한다. 즉, < !DOCTYPE html > 은 아래 문서가 HTML5 형식으로 작성되었다는 의미이다.

HTML Tag

HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할이다. HTML tag 영역에 head tag와 body tag가 포함되어 있다.
[html lang="en"] : 언어지정을 할 수 있다. (한국어 : ko, 영어: en, 중국어: zh)

Head Tag

문서의 정보를 나태내는 범위 : 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위이다. Head Tag 영역에 meta charset, title tag가 포함되어 있다.

- meta charset
< meta charset="utf-8" > 태그는 html 파일의 인코딩을 알려주는 태그이다. 쉽게 말해 브라우저에게 text를 어떻게 그릴지 컴퓨터에 말해주는 태그이다. (utf-8은 유니코드를 의미)

Body Tag

문서의 구조를 나타내는 범위 : 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위이다.

🔑 HTML, CSS, JavaScript의 관계

HTML은 웹브라우저를 통해서 사용자에게 보이는 웹 문서를 작성하는 언어로 웹 문서의 내용 작성에 집중한다. 즉, 웹 문서의 뼈대를 구축하는 개념이다.

CSS는 기존 HTML 파일에 다양한 모양을 추가, 변경하여 웹사이트에 통일감을 부여하고, 글자의 모양, 크기, 간격 등을 자유롭게 제어하는 언어로, 웹 문서의 디자인 표현에 집중하는 언어이다. 즉, HTML은 뼈대, CSS는 디자인을 입히는 개념이다.

JavaScript는 웹 문서를 HTML을 이용해서, 정보를 보거나 웹 문서끼리 연결하는 것 외에 팝업창을 열거나 전화번호 또는 이메일 주소 체크 등 기능적 요소나 동적 요소 제어를 위해 사용되는 언어로 웹문서에 제공하는 동적제어에 집중을 하는 언어이다. 즉, JavaScript는 HTML로 뼈대를 만들고 CSS로 디자인을 입힌 웹 문서에 움직임을 넣는 개념이다.

🔑 .html, .css, .js 세 종류의 파일을 연결하는 방법

index.html 이라는 파일을 생성한다.
html 기본 구조를 입력한 후 style.css, main.js 파일을 생성한다.
CSS는 head 태그 안에 link 태그를 사용해서 href="style.css"로 링크를 걸어준다.
JS는 head 태그 안에 script 태그를 넣어서 해주는 방법과 body 태그 가장 아래에 script 태그를 넣어주는 방법 2가지가 있다.

🔑 script 태그의 위치에 따른 차이점

script 태그란?

< script > 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용한다.

< script > 요소는 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있다. 하지만 src 속성이 명시된 < script > 요소에는 스크립트 코드를 직접 명시해서는 안 된다.

참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있다.

async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.
async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용된다.

📌 Parsing이란?

해당 언어의 문법 검사기 라고 할 수 있다. 네트워크로 받은 HTML과 CSS 파일을 토큰화 시키고 Parse Tree를 생성한다. 이 Parse Tree를 DOM Tree로 만들어 랜더하게 된다.

head

head에 삽입하는 경우 웹사이트가 완벽한 형태로 보여진다는 장점이 있으나, JS파일이 크거나 인터넷이 느릴 경우에 웹사이트를 보기 까지 시간이 오래 걸린다.

[1]
<head>
  <script src="main.js"></script>
</head>

[2]
<head>
  <script asyn src="main.js"></script>
</head>

[3]
<head>
  <script defer src="main.js"></script>
</head>

첫 번째 방법으로 추가했을 때 HTML parsing을 하다 멈추고 JS를 fetching(script download) 및 실행(executing)한 뒤 HTML parsing을 재개한다. 이 경우 웹사이트가 완벽한 형태로 보여진다는 장점이 있으나, JS파일이 크거나 인터넷이 느릴 경우에 웹사이트를 보기까지 시간이 오래 걸린다.

두 번째 방법은 HTML parsing과 JS fetching이 병렬적으로 이루어진다. fetching 시간을 절약할 수 있으나, JS가 DOM 요소를 조작하고자 할 때 HTML parsing이 끝나지 않아 필요 요소가 아직 정의되어 있지 않을 수 있다는 단점이 있다. 또한 사용자가 해당 페이지를 보는데 여전히 시간이 오래 걸린다. JS fetching이 된 순서로 진행되어 순서가 중요한 경우에 문제가 될 수 있다.

세 번째 방법도 두 번째 마찬가지로 HTML parsing과 JS fetching이 병렬적으로 이루어진다. 하지만 HTML parsing이 완료되어야 JS가 실행된다. JS가 작성된 순서대로 실행된다.

body

<body>
    <div></div>
    <div></div>
  <script src="main.js"></script>
</body>

HTML 컨텐츠를 빨리 확인할 수 있으나, 웹사이트가 JS 의존도가 높은 경우 정상적으로 작동하기 위해서는 기다려야 한다. body 하단이 아닌, 중간에 위치하게 되면 HTML을 읽는 과정에서 스크립트를 만나 중단 시점이 생겨 그만큼 지연될 수 있다는 문제가 있다. 따라서 body 최하단에 위치하는 것이 좋다. 불가능할 경우, async과 defer의 속성을 활용해 원하는대로 스크립트 로딩 순서를 만들 수 있다.

head 태그 내부의 script를 사용하는 2가지 추가방법

1. head + async

<!DOCTYPE html>
<html>
	<head>
		<meta charSet="utf-8"/>
		<title>Document</title>
		<script async src="main.js"></script>
	</head>
	<body></body>
</html>

async를 사용하게 되면 JS Fetching 작업이 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다. 하지만 async도 JS가 HTML보다 먼저 정의되기 때문에 자바스크립트 의존적인 웹 사이트 경우 head에 그냥 놓는 것이랑 비슷한 문제를 일으킬 수 있다.

2. head + defer

<!DOCTYPE html>
<html>
	<head>
		<meta charSet="utf-8"/>
		<title>Document</title>
		<script defer src="main.js"></script>
	</head>
	<body></body>
</html>

defer의 방식은 HTML을 parsing 하는 동안 JS를 fetching 해놓고 HTML parsing을 완료해서 일단 사용자에게 화면을 먼저 보여주고 바로 이어서 JS를 실행하게 된다. 만약 실행해야하는 자바스크립트 파일이 여러개이고 순차적으로 실행해야 하는 상황이라면 async는 순차적으로 실행하는게 불가능하고 defer는 가능하다.

결론적으로 script를 넣을때는 head 부분에 defer를 쓰는 것이 가장 효율적인 방식이다.

🔑 웹 페이지에서 일어날 수 있는 이벤트의 종류

이벤트란?

A. 마우스를 클릭했을 때, 키를 입력했을 때, 특정 요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것을 의미한다.

이벤트의 종류

마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

키 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소의 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생

🔑 이벤트와 자바스크립트 함수와의 관계

함수를 미리 짜 놓으면 나중에 필요하게 되는 반복 작업과 피로를 줄일 수 있다. 또한 복잡한 코드라면 함수로 표현하여 더 깔끔하게 보는 것이 편리하다. 어떤 이벤트가 발생했을 때 이를 처리하는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.

이벤트 핸들러/리스너 : 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것을 의미한다. 이벤트 핸들러는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리한다.

이벤트를 객체와 연결하는 방식

이벤트를 객체와 연결하는 방식
인라인 방식 / 고전 방식	DOM Level 0	단점 : 동일한 객체에 동일한 이벤트 여러번 적용 불가
표준 이벤트 방식 / 인터넷 익스플로러 방식	DOM Level 2	DOM Level 0의 단점을 보완하기 위한 것

인라인 방식

인라인 방식은 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다.
HTML 코드에 자바스크립트를 추가함으로써 결국 HTML코드와 스크립트가 섞여 사용되기 때문에 관점에 따라서는 유지 보수에 좋지 않다.

<태그명 on이벤트명 = 자바스크립트 코드> </태그명>

프로퍼티 방식

자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식이다.
HTML 코드와 자바스크립트가 섞여 사용되지 않는다.
하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러만 바인딩 가능하다.

[1]
 객체.on이벤트명 = function() {
  }

[2]
 function 함수명() {
  }
 객체.on이벤트명 = 함수명

addEventListener() 방식, attachEvent() 방식

프로퍼티 방식에서는 1개의 이벤트 핸들러만 바인딩 가능했지만, 하나 이상의 이벤트 핸들러를 바인딩할 수 있다.
캡처링과 버블링을 지원한다.

객체.addEventListener('이벤트타입', 함수명[, 이벤트전파방식]);
이벤트타입 : 바인딩 될 이벤트의 문자열

함수명 : 이벤트 리스너

이벤트 전파 방식 : 캡쳐링 사용 여부

❗️ 사용시 유의점

IE 9 이상에서 동작한다. (IE 8이하에는 attachEvent() 방식을 사용해야 한다.)

프로퍼티 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>이벤트</title>
  </head>
  <body></body>
  <script>
    function loadEnd1() {
      alert("실행1");
    }

    function loadEnd2() {
      alert("실행2");
    }

    window.onload = loadEnd1;
    window.onload = loadEnd2;
  </script>
</html>

✔️ 결과 : loadEnd2() 함수만 실행, 즉 동일한 window 객체에 대해 이벤트 핸들러('onload')는 마지막 하나만 적용된다.

✔️ 해결 : '이벤트리스너' 이용하여 해결 → 인터넷 익스플로러에서 적용되는 것 과 그 외 (크롬, 파이어폭스 등)에서 적용되는 것으로 나뉜다.

인터넷 익스플로러 이벤트 리스너 추가/삭제 방법

✔️ 이벤트 리스너 추가

객체.attachEvent('on이벤트명',function(){

});

✔️ 이벤트 리스너 삭제

객체.detachEvent('on이벤트명',function(){

});

표준 이벤트 리스너 추가/삭제 방법 (크롬, 파이어폭스 등)

✔️ 이벤트 리스너 추가
객체.addEventListner('이벤트명',function(){

});

✔️ 이벤트 리스너 삭제
객체.removeEventListner('이벤트명',function(){

});

onclick 이벤트 타입

개발 과정에서 가장 많이 사용하는 마우스 왼쪽 클릭 이벤트이다. 마우스 왼쪽 클릭 이벤트 요소는 onclick 인데 모든 HTML 태그에 포함되어 있다. onclick 외에도 3가지 종류의 버튼 이벤트가 더 있다.

ondbclick : 마우스 왼쪽 더블 클릭을 하게 되면 발생하는 이벤트
onmousedown : 마우스 왼쪽이나 오른쪽 버튼을 눌렀을 때 발생하는 이벤트
onmouseup : 마우스 왼쪽이나 오른쪽 버튼을 놓았을 때 발생하는 이벤트

onsubmit 이벤트 타입

onsubmit 는 서버 사이드 프로그램과 연계해서 작업할 때 많이 쓰인다. 이것은 폼에 있는 개체들의 정보를 다음 페이지로 넘기는 기능을 한다. 그래서 form 에 있는 객체들의 유효성 체크 함수들이 항상 따라 다닌다. form 에 있는 데이터들이 제대로 들어가 있는지 체크해서 사용자에게 알리기 위함이다. false를 리턴하게 되면 다음 페이지로 전송되지 않고 이벤트는 취소된다.

onmouseover 과 onmouseout 이벤트

마우스를 텍스트나 이미지 위에 올려 놓았을 때 발생한다.

onmouseover : 마우스가 개체 위로 올라왔을 때 발생하는 이벤트
onmouseout : 마우스가 개체에서 빠져 나갔을 때 발생하는 이벤트

Author And Source

이 문제에 관하여(WIL#4 ) Nov. 2nd Week (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@threeplef/WIL4-Study-Keywords

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

3. vue-news app (Store 구현)

Minikube

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다