Week 1 학습가이드
🖥 HTML, CSS란 무엇이며 필요한 이유
HTML - 프로그래밍 언어가 아닌, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.
CSS - HTML로 작성된 문서의 표시 방법을 기술하기 위한 stylesheet 언어이다.
html 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.
👊 HTML, CSS, JavaScript의 관계
웹문서를 사람 이라고 표현을 한다고 했을 때,
html은 웹브라우저를 통해 사용자에게 보이는 웹 문서의 내용을 작성하는 언어이므로 웹 문서를 제작하는 기본적인 뼈대가 된다.🦴
CSS는 기존의 HTML 문서에 다양한 모양을 추가하거나, 변경하여 웹 문서의 모양을 표현하여 웹문서의 피부와 근육이 된다.💪
JS는 웹 문서에 복잡한 기능을 구현 할 수 있는 프로그래밍 언어로, 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등의 기능을 할 수 있다.
웹문서의 뇌가 된다.🧠
🫂 HTML, CSS, JavaScript 세 종류의 파일을 연결하는 방법
우선 기본적으로 index.html 이라는 HTML 파일이 존재한다고 가정한다.
CSS를 html에 연결하기 위해서는 우선 기본적인 css 파일을 만들어야 한다.
index.html 파일을 열고 <head>와 </head> 사이에 css 파일을 연결시켜준다.
<head>
<link href="styles/style.css" rel="stylesheet">
</head>JS는 내부에서는<script> 태그로 동작 할 수가 있다.
<script> 는 <body> 바로 밑에 위치한다.
<html>
<head>
</head>
<body>
<p id="hello"> This is HTML </p>
<script>
document.getElementById("hello").innerHTML="hello JS";
</script>
</body>
</html>외부에서는 <script> 태그의 <src> 의 속성을 사용하여 JS 파일을 HTML 파일에 연결하여 사용 할 수가 있다. <src> 속성은 url 또는 외부 파일의 파일 위치를 지정하는데 사용된다. <script> 태그의 <src> 속성에 JS 파일의 이름을 입력하면 된다.
<script src="xxx.js"></script>📍 <script> 태그의 위치에 따른 차이점
결론부터 말하자면 <body> 태그의 최하단이 가장 좋다.
먼저 기본적으로 HTML 파일은 위에서부터 아래로 읽는다.
만약 HTML 태그들 사이에 <script> 태그가 위치한다면 두가지 문제가 발생되는데
- HTML을 읽는 과정에 스크립트를 마난면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
- DOM 트리가 생성되기전에 JS가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
위와 같은 상황을 막기 위해 <script> 태그는 <body> 태그의 최하단에 위치하는 게 가장 좋습니다.
🎉 웹 페이지에서 일어날 수 있는 이벤트의 종류
리소스 이벤트
ex)
load - 리소스와 그 의존 리소스이 로딩이 끝났을 때
unload - document 또는 의존 리소스가 언로드될 때
네트워크 이벤트
ex)
online - 브라우저가 네트워크 접근을 얻었을 때
offline - 브라우저가 네트워크 접근을 잃었을 때
CSS 이벤트
ex)
animationstart - css 애니메이션이 시작되었을 때
transitionend - css 트렌지션이 완료되었을 때
Form 이벤트
ex)
reset - 리셋 버튼이 눌렸을 때
submit - 제출 버튼이 눌렸을 때
Printing 이벤트
ex)
beforeprint - 프린트 대화상자가 열렸을 때
afterprint - 프린트 대화상자가 닫혔을 때
Mouse 이벤트
ex)
click - 마우스 버튼을 눌렀다 뗄 때
mouseover - 요소 위로 마우스를 위치했을 때
Keyboard 이벤트
ex)
input - input의 값이 변경 될 때
keydown - 사용자가 키를 처음 눌렀을 때
Drag and Drop 이벤트
ex)
drag - 요소나 텍스트 선택이 드래고되고 있을 때
drop - 요소가 유효한 드랍 대상에 드랍되었을 때
등등 여러가지 이벤트가 존재한다.
출처 mdn (https://developer.mozilla.org/ko/docs/Web/Events#%EB%8D%9C_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B4%EA%B3%A0_%EB%B9%84%ED%91%9C%EC%A4%80%EC%9D%B8_%EC%9D%B4%EB%B2%A4%ED%8A%B8)
🔗 이벤트와 자바스크립트 함수와의 관계
JS를 통해 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트를 핸들링 할 수 있게 하는것이 바로 eventListner이다.
이 이벤트 리스너를 이용하면 특정 DOM에 이벤트가 발생하였을 때 특정 함수를 호출할 수가 있다.
document.addEventLitener(이벤트명,실행할 함수명,옵션)각 매개 변수를 보면
이벤트명 : JS에서 발생할 수 있는 이벤트명을 입력한다 ex) click, submit ...
함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수명을 입력한다.
옵션 : 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
예시
window.addEventListner('scroll',function(){
console.log(window,scrollY)
});위의 예시는 전체창에서 scroll 이벤트가 발생될 때 마다 현재 페이지에서 얼마나 위에서부터 스크롤 했는지 px 단위로 알려준다.
