week 1_HTML & CSS

Hi! I'm JENNIE·2022년 5월 20일
1

pre>wecode

목록 보기
3/7
post-thumbnail

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>
공통차이특징
asyncHTML 파싱과 script 로딩이script 로딩이 끝나면 HTML 파싱 중이라도 바로 실행HTML 파싱이 완료되는 시간을 줄일 수 있다.
but, script 실행 시 파싱이 멈추는 구간 발생
defer동시에 일어난다script 로딩이 끝나도 HTML 파싱 중이라면 기다렸다 파싱이 끝난 뒤 실행HTML 파싱이 완료되는 시간을 줄일 수 있고, 멈추지도 않음 !👍🏻


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

  1. 이벤트(Event)란? = 사건
    : 사용자가 버튼을 클릭 했을 때, 마우스를 움직였을 때, 키보드를 눌렀을 때 등 어떠한 행동으로 사건이 일어난 것을 말함.

  2. 이벤트의 종류
    <Event List(reference)>
    MDN : https://developer.mozilla.org/en-US/docs/Web/Events

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

  • 이벤트가 발생하면, 그에 맞는 반응이 일어나야 한다.
    → 일반적으로 함수(=이벤트 핸들러)가 실행 됨.

    < 이벤트 핸들러 사용 방법 2가지 >

  1. inline 방식 ❌
     ```
     ex) button.onclick = changeColor;
     ```
     

    💡 inline 방식의 문제점

    • HTML parsing의 어려움
    • 유지보수 어려움 (하나하나 고쳐야)
         
  2. 함수 .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'으로 두 가지 함수 실행(색 변환, 사이즈 변환)
profile
Front-End Developer

0개의 댓글