Unit2 - [HTML/CSS] 심화

브라우저

웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램

 

웹(Web)->World Wide Web

이런 브라우저상에서 제공되는 웹(Web)은 HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)라고 한다.

웹 페이지의 집합 => 웹 사이트

 

브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작

 

브라우저 동작 방식

 

브라우저의 구조

 

사용자 인터페이스(User Interface)

UI , 관련된 GUI 부분

 

브라우저 엔진(Browser Engine) =>레이아웃 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

문서 객체 모델(DOM) 자료 구조를 구현

 

렌더링 엔진(Rendering Engine)

콘텐츠를 화면에 출력하는 역할

 

브라우저 엔진 + 렌더링 엔진 => 브라우저 엔진

 

통신(Networking)

HTTP 요청과 같은 네트워크 호출에 사용

 

자바스크립트 해석기(JavaScript Interpreter)

JavaScript는 코드를 위에서 아래로 한 줄씩 읽어 내려가는 방식으로 파싱(parsing)하는 언어(Interpreted Language

 

구글 크롬의 V8 엔진

메모리 구조

힙메모리

힙(heap)은 동적 메모리 할당에 사용되는 자료구조

이 힙을 이용하여 V8은 객체 또는 동적 데이터를 저장

가비지 컬렉션 발생 => 프로그램에서 더 이상 사용되지 않는 객체들을 식별하여 자동으로 제거하는 메커니즘

콜 스택 

JavaScript는 기본적으로 싱글 스레드 기반의 언어

콜 스택이 하나라는 의미이며, 한 번에 한 작업만 사용

스택이 후입선출(LIFO) 구조이다.

콜 스택에 쌓이는 데이터 하나하나를 스택 프레임(Stack Frame)이라고 부른다.

콜스택은 힙과 달리 크기에 제한

=> 스택 오버플로(Stack Overflow)

콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 일어난다.

=>스택 추적(Stack trace)

브라우저의 콘솔 로그를 살펴보면 에러의 발생과 발생한 이유를 훌륭하게 추적

 

UI 백엔드

렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당

OS 사용자 인터페이스 체계를 사용

CLI , GUI

 

자료 저장소

자료를 저장하는 계층

쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재

 

웹 스토리지(Web Storage) 특징

서버를 요청할 때마다 쿠키라는 곳에 저장=> 보안상 취약, 저장소 허용 용량 적음

웹 스토리지가 나옴 => 웹 브라우저가 직접 데이터를 저장,서버로 전송 X , 저장된 데이터가 클라이언트에만 존재

오리진(origin)마다 단 하나씩만 존재(도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자)

 

웹 스토리지 종류

로컬 스토리지(localStorage)

영구적 저장소

도메인 마다 별도의 localStorage가 생성

=> 도메인만 같으면 전역으로 데이터의 공유가 가능

세션 스토리지(sessionStorage)

임시적인 저장소

브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지

 

브라우징이란 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위를 말하며,

브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경

브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징

 

버전이 다르면 웹 스토리지를 사용할 수 없기 때문에  웹 스토로지가 존재하는지 확인한다.

 

브라우저 렌더링

HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

 

파싱(Parsing)

파싱이란 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계

파싱을 파서(parser)가 진행

파서는 HTML파일의 코드를 토큰(문법적 의미)으로 한번 분해

이 토큰들을 문법적 의미와 구조에 따라 노드로 바꿈

노드 상하 관계에 따라 트리 형성

=> 파스 트리 , 문법 트리

 

문서 파싱(document parsing)은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

 

브라우저는 HTML 문서를 받아 들자마자 DOM 트리로 파싱

이때 HTML 토큰이 만들어진다. 

-> 노드 -> DOM 트리

 

브라우저는 HTML 문서를 파싱하면서 CSS 스타일을 만날 경우

텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱 

 

DOM Tree(Document Object Model Tree)

DOM은 HTML문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것

브라우저는 JavaScript 언어만 알아듣기 때문에 HTML의 태그나 속성들을 이해할수 없어서 이해할수 있는 객체로 만든다.

CSSOM Tree(CSS Object Model Tree)

html 파일을 DOM 트리로 파싱하던 브라우저는 <link>, <style> 태그를 만나게 되면 파싱을 잠시 멈추고 해당 리소스 파일을 서버로 요청

이렇게 요청한 파일을 파싱

렌더 트리(Render Tree

텍스트로 구성된 객체

DOM 트리와 CSSOM 트리는 독립적인 트리

이 둘을 합치는 작업이 반드시 필요

렌더 트리는 렌더링을 목적으로 만들어지는 트리

보이지 않을 요소들은 이 트리에 포함 X

ex)DOM트리의 <meta> , CSSOM트리의 display:none

 

레이아웃

레이아웃은 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정

페인팅

위치에 대한 계산을 마치면 이제 화면에 보여주기 위해 브라우저는 화면 위에 레이아웃에서 결정된 대로 그림을 그리기 시작

 

리플로우(Reflow)와 리페인트(Repaint)

렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트

 

 

리플로우와 리페인트의 최적화

DOM은 변경되면 렌더 트리를 다시 구축하기 때문에, 변경될 때마다 리플로우와 리페인트를 다시 해야 한다는 것

다시하면 

리플로우는 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 해 실제로 CPU를 많이 차지

리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하므로 GPU를 많이 차지

 

최적화를 시키자

불필요한 레이아웃을 줄인다.

드랍 현상을 개선

CSS에서 레이아웃, 페인트를 발생시키는 속성들

위치 혹은 너비와 관련된 속성 대신 transform이라는 속성을 사용한다.

죄표값을 사용해 이동 , 레이아웃 발생 X ,  페인트 다시 발생시키는 쪽으로 렌더링 된다.

 

리페인트가 일어나지 않게 해주는 opacity라는 속성

visibility/display 보다 opacitiy를 사용

 

영향을 주는 노드를 줄인다.

JavaScript + CSS를 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄여줄 수 있다.

 

반응형 웹

브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미

 

모바일 퍼스트

사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것

 

반응형 웹의 특징

별도의 URL이 있다면 반응형 웹이라고 부르지 않는다.

별도의 URL은 모바일의 경우

m.xxxxxx.com  

데스크탑 버전의 웹 사이트를 띄운 브라우저를 줄였을 때 반응하지 않는다는 특징

 

효율적인 유지보수

검색엔진(SEO) 최적화 유리

하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화

사이트의 속도 저하

반응형 웹은 하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일용 URL이 동일

웹브라우저 호환성 문제

 

미디어 쿼리

1.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

2.

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

 

미디어쿼리 작성

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

미디어 타입

• all : 모든 미디어 타입
• print : 프린터
• screen : 컴퓨터 화면
• speech : 스크린 리더

조건(너비 및 높이)

min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용

 

방향성

@media (orientation: landscape) { //장치가 가로방향인 경우
    body {
        color: rebeccapurple;
    }
}

 

복잡한 미디어 쿼리

논리곱(and) 미디어 쿼리

media screen and (min-width: 500px) and (orientation: landscape) {
    body {
        color: pink;
    }
}

논리합(or) 미디어 쿼리

@media screen and (min-width: 700px), screen and (orientation: landscape) {
    body {
        color: pink;
    }
}

부정(not) 미디어 쿼리

@media not all and (orientation: landscape) {
    body {
        color: pink;
    }
}

---

CSS 애니메이션

@keyframes 애니메이션이름 {
	0% {            // from 
		CSS속성 : 속성값; 
	}

	50% {           
                  //1~99 or 소수점
		CSS속성 : 속성값;
	}

	100% {          //to 
		CSS속성 : 속성값;
	}
}

animation-name

#dog {
	animation : mal
}

#dog{
    animation-name:mal 
}

animation-duration

#dog {
	animation : mal 5s ;
}
#dog {
	animation-name : mal;
	animation-duration : 5s;
}

animation-delay

#dog {
animation : mal 5s 5s;
}
#dog {
animation-name : mal;
animation-duration : 5s;
animation-delay:5s
}

animation-direction

#dog {
animation : mal 5s normal;
}
#dog {
animation-name : mal;
animation-duration : 5s;
animation-direction: reverse;
}

normal : 기본값

reverse: 역방향

alternate : 순방향 -> 역방향

alternate-reverse : 역방향 -> 순방향

 

animation-iteration-count

#dog {
animation : mal 5s infinite;
}
#dog {
animation-name : mal;
animation-duration : 5s;
animation-iteration-count:5;
}

infinite : 무한 반복

animation-interation-count : 5 

//5번 반복

 

animation-play-state

애니메이션이 재생 상태를 설정

#dog {
animation : mal 5s pause;
}
#dog {
animation-name : mal;
animation-duration : 5s;
animation-play-state:pause;
}

기본값 :running

정지 :pause

 

animation-timing-function

linear

ease(기본값)

ease-in

ease-out

ease-in-out

 

animation-fill-mode

none : 기본 값 ,요소의 스타일을 유지

forwards : 재생중 x -> 마지막 키프레임 스타일 유지

backwards : 재생중 x -> 첫번째 키프레임 스타일 유지

both : 재생전 -> 첫번째 키 프레임 스타일 , 재생 후 -> 마지막 키프레임 스타일

 

 

실습

margin-left 속성은 해당 요소의 왼쪽 마진을 -50px로 설정하여, 요소를 수평 중앙으로 정렬

 

---

캔버스 요소 

높이와 너비 변경 방법

1.<canvas>의 태그 속성으로 설정

  canvas.width = window.innerWidth * 0.5;
  canvas.height = window.innerHeight * 0.4;
  화면 크기 가져와 비율에 따라 설정
  
  canvas.style.width = "50vw";
  canvas.style.height = "40vh";
  픽셀의 크기까지 해당 단위에 비례해 확대하는 개념으로 사용자제

const canvas = document.querySelector("#canvas");
높이와 너비를 설정해주지 않으면 300px * 150px 기본으로 설정

<canvas id="canvas" width="50vw" height="40vh"></canvas>
    		// vw, vh를 전달해도 캔버스 요스는 펙셀 단위로만 명시해야 인식된다.

2.DOM으로 설정

 

캔버스로 사각형 그리기

색칠된 사각형 그리기

ctx.fillStyle = 'pink'
ctx.fillRext = (10, 10, 100, 50)

선으로만 그리기

ctx.lineWidth = 5; //굵기
ctx.strokeStyle = "black"; //색
ctx.strokeRect(10, 10, 100, 50) //사각형 그리기
ctx.clearRect( 20, 20, 80, 30) //사각형 지우기

캔버스로 클릭이벤트 만들기

마우스 위치

• X좌표 : event.clientX
• Y좌표 : event.clientY

캔버스 위치

• X좌표 : ctx.canvas.offsetLeft
• Y좌표 : ctx.canvas.offsetTop

canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft
	const y = event.clientY - ctx.canvas.offsetTop
		// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성해보겠습니다.

	ctx.fillRect(x - 15, y - 15, 30, 30);
		// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 된다.
}

 

차트 만들기

body태그 안에 script 태그 안에

<canvas id="Chart" width="600" height="400"></canvas>

차트를 DOM을 이용해 인스턴스화

let Canvas = document.getElementById("Chart").getContext("2d");

label 및 data를 정의한 뒤, config 객체 안에 넣어 Chart constructor에 전달

<script>
...

const labels = [
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
    ];

    const data = {
        labels: labels,
        datasets: [{
        label: 'abcChart',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [1, 2, 3, 4, 5, 6, 7],
        }]
    };

    const config = {
        type: 'line',
        data: data
    };

    //chart constructor
    const myChart = new Chart(
        myCanvas,
        config
    );

</script>