[개발자되기: HTML/CSS 심화] Day-48

Kyoorim LEE·2022년 7월 21일
0

브라우저

브라우저의 특징과 웹 동작 원리

브라우저 동작 방식

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

  • 자원: HTML 문서, PDF, 멀티미디어
  • 자원의 주소: URI(Uniform Resource Identifier)

브라우저 구조 (코드스테이츠 자료)

  • UI : 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI부분 통칭
  • 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각표현으로 변환시키며 DOM 자료구조를 구현
  • 렌더링 엔진: 요청한 콘텐츠를 화면에 출력. HTML, CSS 등을 파싱하여 최종적으로 화면에 뿌려주고 HTML 및 XML 문서와 이미지를 표시.
  • 통신: HTTP 요청과 같은 네트워크 호출에 사용
  • 자바스크립트 해석기: 자바스크립트 엔진이라고도 불림. 대체적으로 웹브라우저에서 이용되며 브라우저마다 전용 엔진이 탑재되어 있음

V8엔진 (구글크롬)

V8 엔진 구조

힙 메모리

동적 메모리 할당에 사용되는 자료구조
객체 또는 동적 데이터를 저장

콜 스택

JavasScript는 싱글스레드 기반의 언어 (콜 스택이 하나라는 뜻 - 한번에 한 작업만 사용)
후입선출 구조

스택 오버플로우

콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때
같은 함수를 무한 호출하게 되면 터지게 됨

스택 추적

브라우저 콘솔을 살펴보고 에러의 발생과 발생 이유를 추적해 내는 것

UI 백엔드

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

자료저장소

자료를 저장하는 계층
영구적 저장소인 로컬스토리지와 임시적 저장소인 세션스토리지가 있음

웹 스토리지 특징

웹 브라우저가 직접 데이터를 저장하게 도와줌
사용자측에서 더 많은 정보를 안전하게 저장할 수 있게 해줌
이 정보는 절대로 서버로 전송되지 않음 => 클라에만 존재하므로 네트워크 트래픽 비용 절감

웹스토리지는 origin마다 단 하나씩만 존재
origin: 도메인과 프로토콜 한 쌍으로 이뤄진 식별자
하나의 origin에 속하는 모든 웹페이지는 같은 데이터를 저장하므로 같은 데이터에 접근 가능

웹 스토리지 종류

  • 로컬 스토리지: 보관기한이 없는 데이터 저장, 브라우저 탭 닫히거나 컴퓨터 재부팅해도 사라지지 않음. 도메인마다 별도의 localStorage가 생성됨. 도메인만 같으면 전역으로 데이터 공유 가능
  • 세션 스토리지: 하나의 세션만을 위한 데이터 저장. 브라우저 탭이나 창 닫으면 데이터 사라짐.
    도메인 별로 별도 생성되는데 브라우저가 다르면 서로 다른 영역이 됨 -> 같은 도메인이어도 다른 브라우저에서 열었으면 서로 데이터 공유 불가능

웹스토리지 문법

  • window.localStorage : 만료 날짜가 없는 데이터 저장 시 쓰임
  • window.sessionStorage : 세션이 있는 데이터 저장시
//window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 undefined를 반환하고, 존재한다면 function을 반환합니다.
if (typeof(Storage) !== "undefined") {

    // web storage를 위한 코드 부분

} else {

    // web storage를 지원하지 않는 브라우저를 위한 안내 부분

}

웹스토리 활용 예시

  • 블로그 글 작성 시 창을 벗어난 경우 작성 내용을 복구 및 백업해주는 기능
  • 입력 form을 통해 정보 입력하다가 창 벗어난 경우 복구 및 백업해주는 기능
  • 현재 읽은 글의 히스토리 저장(카운팅 or 읽은 글 표시)


브라우저 렌더링

브라우저 렌더링 과정

-코드스테이츠 자료-

  • 브라우저를 통해 웹사이트 접속
  • 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 리소스 다운받음
  • 렌더링 엔진은 전달받은 HTML 문서를 파싱하여 DOM 트리를 만듦
  • 이어서 다운받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM(CSS 객체 모델)트리를 만듦
  • 만든 DOM 트리와 CSSOM트리를 결합해 Render 트리 구축
  • 레이아웃 과정을 통해 각 요소 배치위치 결정
  • 레이아웃 과정 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작 => paint

렌더링 주요 개념

문서파싱 (document parsing)

브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것 => HTML파일을 바탕으로 DOM 트리를 구축 및 CSS 파일로 CSSOM 트리를 만드는 것

브라우저 입장:
HTML 문서 받고 => DOM 트리로 파싱 => HTML 토큰 생성됨 (시작태그, 마침태그, 속성이름, 값 포함되어있음)

브라우저가 HTML문서 파싱 시 CSS 스타일 만난 경우: 1. 텍스트 만나면 - CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱
2. 테그 만나면 - 렌더링 차단 & HTML 파싱 중단 => script 파일 다운받아 파싱 후 실행 => 다시 HTML 파싱 시작

DOM Tree

DOM이란 - Document Object Model
HTML문서의 요소들의 중첩관계를 기반으로 노드들을 트리구조로 구성한

브라우저는 JavaScript 언어만 알아듣기 때문에 HTML 태그나 속성은 이해히자 못함 => 이해할 수 있는 형태인 객체로 바꿔준 것이 바로 DOM Tree

CSSOM Tree

CSSOM - CSS Object Model

브라우저는<link>, <style>태그를 만나면 파싱을 멈추고 리소스 파일을 서버로 요청함

요청하여 받은 파일을 파싱하여 만든 트리가 CSSOM

CSSOM 트리 구축 후 브라우저는 다시 html 파일의 파싱을 멈췄던 부분으로 다시 돌아가서 마저 DOM 트리를 파싱함

Render Tree

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

사용자의 눈에 보이지 않는 요소들(<meta>, display:none)은 트리에서 제외됨

레이아웃

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

렌더트리에는 요소들의 크기 혹은 위치와 관련된 정보들(from CSSOM)들이 있음. 렌더링 엔진에서 렌더트리를 위에서 아래로 읽어내려가며 각 요소들의 위치와 크기를 파악함

페인팅

위치에 대한 계산을 마친 후,
레이아웃에서 결정된 대로 그림을 그리기 시작

픽셀을 채워나가는 과정

리플로우와 리페인트

브라우저 화면 크기 조절하거나 다른 사이트로 이동하는 등 화면에 요소가 추가 or 삭제 or 아예 다른 요소 불러와야하는 상황이 생기면 화면에 있던 요소들의 크기가 바뀌게 됨 => 모든 요소의 위치와 크기를 다시 계산하고 그려주어야함

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

리플로우와 리페인트 최적화 방법

리플로우 발생요인

left 속성 중 left-top, left-bottom 속성을 사용하면 위치가 변경되어 레이아웃이 발생됨

이 경우 transform 을 사용하는 것이 좋음.
좌표값을 사용해 위치를 이동하고 레이아웃은 발생시키지 않으므로

리페인트 발생요인

visibility/display 보다 opacity를 사용하는 것이 성능 개선에 도움이 됨

영향을 주는 노드 줄이기

position absolute/ fixed이용하면 영향받는 주변 노드들을 줄일 수 있음



반응형 웹

여러 장치의 다양한 특성에 대응할 수 있는 하나의 웹 문서
브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹사이트

모바일 퍼스트(mobile first)

UX를 디자인 할 때 모바일일 경우를 최우선으로 두기

반응형 웹 특징

하나의 URL을 기반으로 화면이 바뀜

cf) 도메인 앞에 "m"이 붙는 경우는 반응형 웹이 아님

반응형 웹 장/단점

장점단점
효율적 유지보수 - 하나의 HTML 소스만 있기 때문에 관리 쉬움사이트의 속도저하- 모바일 전용 사이트에 비해 무거움
SEO 최적화웹브라우저 호환성 문제 - 현존하는 웹브라우저 스펙 및 사양이 워낙 다양하므로 호환 안되는 경우 간혹 있음

미디어쿼리

반응형 웹 디자인의 핵심 부분
뷰포트(브라우저 창) 크기에 따라 서로다른 조판 생성 가능

미디어 쿼리 적용법

  1. HTML 파일 내 <head> 태그 안에 <link> 태그 위치시킴
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
  1. HTML 파일 내 <head> 태그 안에서 <style> 태그 열어 작성
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>
  1. CSS 파일 안 또는 태그안에 직접 작성

미디어 쿼리 구문

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

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

-미디어 타입: 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줌
-조건(너비 및 높이): 지정한 창 너비나 높이 기준이 만족되면 스타일이 적용되고 만족하지 않으면 적용되지 않음

  • CSS 입력부분: 조건문을 통과하고 미디어 타입이 올바른 경우 스타일이 적용됨

미디어 타입 종류

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

조건 (너비 및 높이)

min-width, max-width, width

@media screen and (width: 600px) {
	body {
		color : red;
	}
}
// or
@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
} // 뷰포트가 400px보다 좁을 경우 파란색

방향성 orientaton (가로/세로모드)

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

복잡한 미디어 쿼리

논리곱(and) 미디어 쿼리

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
} // 두 조건 모두 만족해야 텍스트 파란색으로 

논리합(or) 미디어 쿼리

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
} // 뷰포트 넓이가 600px 이상이거나 장치가 가로방향인 경우 텍스트가 파란색

부정(not) 미디어 쿼리

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
} // 세로인 경우에만 텍스트가 파란색
profile
oneThing

0개의 댓글