웹 브라우저
: 웹 서버와의 양방향 통신을 통해 제공되는 정보를 HTML 및 일반미디어, 멀티미디어 등의 컨텐츠를 볼 수 있게 해주는 GUI 방식의 SW이며 브라우저는 페이지 다운로드 용도로 응용계층의 HTTP를 사용해 통신함
웹
: 브라우저에서 제공되는 웹은 다양한 정보를 hypertext 방식으로 연결해 제공하며, HTML 언어를 사용해 작성한 문서 형태로 만들면 웹 페이지, 이러한 관련되고 연결한 웹 페이지들을 모아 만든 것을 웹 사이트라고 함
브라우저 특징 및 웹 동작 원리
- 브라우저간 기본 공통 동작: 요청 -> 응답 -> 렌더링
사용자의 입력에 따른 요청을 생성->DN을 검색해 IP 정보확보 -> DNS 서버에서 URL & IP 기반한 HTTP 메시지 생성-> TCP를 사용해 웹서버로 전달
-> HTTP 요청에 따른 데이터 반환후 HTTP 응답 메시지 생성-> TCP를 사용해 웹 브라우저 전달 -> 데이터 처리후 렌더링
브라우저의 구조
-
UI?
: 브라우저 동작에 관련한 GUI를 제공해 사용에게 기능을 사용할 수 있도록 함 -
브라우저 엔진?
: UI와 렌더링 엔진 사이에 위치해 동작을 제어하며, 스트립트에서 사용하는 DOM 자료 구조를 구현하며 HTML 문서 및 기타 자원들을 사용자의 장치에 맞추어 웹 페이지를 시각적인 표현으로 변환하는 것 -
Rendering 엔진?
: HTML, CSS를 파싱하여 화면에 렌더링해주는 역할을하며, 브라우저 엔진과 관련이 깊음 -
Javascript 해석기
: Js 코드를 위에서 아래로 라인별로 읽어 기계어로 변환시켜 Js 동작을 실행시킴Js해석기 동작을 이해하기 위해 Call Stack과 스택 오버 플로우 개념을 익히면 좋음
-
UI 백엔드
: 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할, 일반적으로 OS UI(CLI) 체계사용 -
자료 저장소
: 자료를 저장하며, 반영구 저장인 로컬 스토리지와 임시 저장소인 세션 스토리지로 나누어짐
브라우저 렌더링
간단 과정
-> 서버로부터 HTML, CSS, Js등의 리소스 받음
-> HTML문서를 파싱해 DOM 트리를, CSS 스타일 요소를 파싱해 CSSOM 트리를, 이 둘을 결합해 Render 트리 구축
-> 레이아웃을 통해 요소의 배치를 결정
-> paint, UI 백앤드에서 Render 트리를 화면에 그림
파싱 (Parsing)
: 코드 파일를 실행시키기 위해 구문 분석하는 과정.
- 문법적 의미를 가지는 최소범위를 기준해 토큰 단위로 나누고 이러한 토큰을 문법적 의미와 구조를 기준으로 node로 다시 나눔
- 이러한 노드를 사용해 트리를 만들고 이렇게 만든 트리를 파스 트리 혹은 문법 트리라 칭함
Dom Tree
: HTML을 파싱하며 토큰을 노드로 변환한 후 해당 노드들과 노드들의 관계성을 바탕으로 만든 트리이며, Dom Tree에는 HTML요소들의 모든 태그, 속성, 콘텐츠 정보를 가짐
CCSOM Tree
: CSS를 파싱하며 토큰을 노드로 변환한 후 해당 노드들과 노들들의 관계성을 바탕으로 만든 트리이며, CSSOM Tree에는 CSS 선택자, 선택자에 할당 값, CSS 적용 규칭 정보를 가짐
Render Tree
: CSSOM 트리와 DOM 트리를 바탕으로 생성하는 트리이며, Dom Tree에 랜더링 요소들의 css 정보를 가져와 적용하는 방식으로 Render Tree가 생성됨 --> 실질적인 배치 정보는 가지지 않았음으로 레이아웃 과정이 요구되며, 요소의 스타일 정보 변경시 다시 레이아웃과정과 paint 과정이 요구됨
- 레이아웃, paint, reflow & repaint
레이아웃
: 생성 혹은 기하학적인 요소가 변경된 Render Tree의 노드들을 처음부터 모두 방문하며 요소들의 기하학적 css 요소값을 Px 단위로 변경해주어 실질적인 요소 배치를 위한 값을 변경
Paint
: 레이아웃 과정을 마친 요소를 화면에 그려주는 과정
reflow(레이아웃) & repaint
: 요소의 기하학적 속성 변경시 다시 레이아웃과 paint를 실시하는 과정
reflow 와 repaint를 줄이자
: 해당 과정들을 많은 CPU,GPU 자원을 사용함으로 프레임 드랍과 같은 성능문제를 발생 시킴, 따라서 reflow 혹은 repaint를 발생 시키지 않는 속성 사용을 권장(ex) translate, opacitiy..등)
반응형 웹
: 실시간으로 변화하는 브라우저의 크기에 반응해 레이아웃을 변화시키는 웹 사이트
장점
- 하나의 HTML만들 가지고 관리함으로 효율적으로 유지보수 가능
- 반응형 웹의 경우 pc 및 기타 다른 장치에게서도 사용자에게 같은 경험성을 기대할 수 있으며, 해당 특징은 검색 우선순위에 가산점이 부여돼 SEO에 유리함
단점
- 반응형 웹의 경우 기타 다양한 장치에도 적합하도록 구현해야하기에 소스가 무거워 짐 (=> http server compression 기술로 많이 해결)
- 브라우저간의 사양이 다름으로 브라우저 환경에 따라 다르게 동작할 우려 있음(=> 개발자의 역량이라 생각됨)
따라서, 구글이 권장하듯 반응형으로 웹사이트를 제작하는게 트랜드인 것으로 보임
미디어 쿼리
: HTML-, CSS 혹은 태그안에서 사용할 수 있으며, 미디어 쿼리 조건을 바탕으로 css 적용 여부를 판단함
- Media Type
: 해당 미디어 쿼리가 어떤 종류의 미디어을 위한 것인지all, print, screen, speech. --> 보통 screen
- 조건
: 특정 조건에 부합하는 경우에만 미디어 쿼리 css를 적용할 수 있도록함보통 width 및 방향에 관련한 조건을 많이 사용
논리 및 부정 연산 적용 가능 (or and not)
CSS 애니메이션
@keyframes
@keyframes turn{ half{ transform: rotate(0.5turn); // 반바퀴 돌기 } otherhalf{ transform: rotate(0.5turn); // 반바퀴 더 } }animation 속성
animation : 순서대로 해당 속성들을 설정할 수 있음
- 이름: [animation-name]
- 실행시간: [animation-duration]
- 시작 지연시간: [animation-delay]
- 재생 방향: [animation-direction]
- 반복 횟수: [animation-iteration-count]
- 재생 상태: [animation-play-state]
- 애니메이션 중 중간 상태: [animation-timing-function] (시간 간격으로 설정가능)
- 애니메이션 동작 전 후 상태: [animation-fill-mode]
==> mdn에 나와있는 animation 설정과 예제를 참고하면 좋을 듯
Canvas
: Javascript와 함께 사용하여 보다 다양한 그래픽 요소 및 애니메이션을 구현할 수 있는 HTML 요소
특징 및 사용법
- canvas 요소는 DOM으로 조작하는 것이 일반적임으로 id 지정을 권장
- width와 height 속성 지원 (defalt 300px * 150px), px만을 허용
- DOM을 사용해 속성 지정시 반응형 단위 사용가능(vw,vh,window.)
canvas.style.width = '48vw'
canvas.style.height = '27vh'
canvas.width = window.innerWidth * 0.5- canvas 요소로 사각형 그리기
canvas.fillRect (x,y,width,height) - canvas 요소로 도형 색 채우기
canvas.fillStyle (color) - lineWidth 선굵이, strokeStyle 선 색상 strokeRect 사각형 만들기
- clearRect 그림 지우기
- event.clientX, event.clientY 마우스 클릭 위치
