Westudy | Week 1

What You Will Learn

1. HTML과 CSS의 역할에 대해 설명할 수 있다.

HTML : 웹페이지의 구조를 만드는데 사용. 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달.
CSS : 웹페이지의 모양을 만드는데 사용.

2. HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.

Top10 HTML tag
head : 메타데이터
body : 브라우저에 표시될 내용
html : 웹페이지의 시작과 끝
title : 문서제목
meta : 문자 인코딩 및 문서 키워드, 요약정보

<meta charset="utf-8">

div : 컨텐츠 묶기
a : 링크
script : 코드 삽입 또는 참조(JavaScript)
link : 외부파일 연결(CSS)
img : 이미지

3. CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.

Top10 CSS property
font-size : 글자크기
color : 글자색
margin-top : 상단 border외 여백
margin-left : 좌측 border외 여백
width : 너비
margin-bottom : 하단 border외 여백
margin-right : 우측 border외 여백
padding-left : 좌측 border내 여백
padding-top : 상단 border내 여백
height : 높이

4..html 파일과 .css 파일을 연결시킬 수 있다.

html파일 내부 meta태그 내에서

<link rel="stylesheet" href="(파일경로)" />

5. 배운 개념을 활용하여 자기 소개 페이지를 만들수 있다.

작성완료(https://hyeonze.github.io/Westudy/week0/)

Study Keyword

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

HTML : 웹페이지의 구조를 만드는 언어. 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달.
CSS : 웹페이지의 모양을 만드는데 사용되는 언어. 문서의 구조와 스타일을 분리하여 관리할 수 있음.

- HTML, CSS, JavaScript의 관계

HTML : 구조를 만듦.
CSS : 스타일을 입힘.
JavaScript : 움직이도록 해줌.

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

브라우저 동작 방식 : HTML읽기 - HTML파싱 - DOM트리생성 - Render트리생성 - 브라우저표시
상단배치 : HTML파싱도중 script로드 및 파싱 후 HTML파싱.
head내 배치 : 문서 초기화 등 간단한 스크립트(길면 브라우저 파싱 및 렌더링 지연).
body내 배치 : 무거운 스크립트 삽입에 적절(파싱 및 렌더링 후 스크립트 실행).
HTML상단 배치하는 경우 : 마케팅 툴 설치 소스. 사이트 전체 로드 전에 방문자 정보 수집을 원할하게 하기 위함.
async && defer(스크립트속성) : HTML파싱과 동시에 스크립트 로드
async : HTML 파싱이 끝나지 않더라도 스크립트 로드가 완료되는 즉시 스크립트가 실행

<script async src="index.js"></script>

defer : HTML 파싱이 모두 끝난 뒤 스크립트가 실행

<script defer src="index.js"></script>

참고자료

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

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

이벤트 발생 시 브라우저는 이벤트핸들러(리스너) 함수를 호출함. 이벤트 핸들러 등록 방법에는 3가지가 있음.
1.이벤트 핸들러 어트리뷰트

<button onclick="(함수명)">버튼<button>

2.이벤트 핸들러 프로퍼티(돔속성위에 있는걸 지칭할 때 : 찬주님감사합니다)

$btn.onclick = fucntion(){}
//단점 : 재사용시 재할당된 코드만 실행

3.addEventListener

$btn.addEventListener('click', fucntion(){});
//첫 매개변수는 이벤트 타입으로, on을 소거하고 입력함
//둘째 매개변수는 이벤트 핸들러

참고자료

추가학습할 내용 : 브라우저 구조, virtual DOM