HTML/CSS 심화

Chapter1. 브라우저
1.웹과 웹 브라우저의 종류에 대해 이해합니다.
2.브라우저의 특징과 웹의 동작 원리에 대해 이해합니다.
3.브라우저의 구조에 대해 이해합니다.
4.브라우저 엔진의 구조와 콜 스택이 동작하는 원리에 대해 이해합니다.
5.UI 백엔드에 대해 이해합니다.
6.자료 저장소의 종류와 특징에 대해 이해합니다.
Chapter2. 브라우저 렌더링
7.브라우저 렌더링 방식의 도식화에 대해 이해합니다.
8.parsing에 대해 이해합니다.
9.DOM Tree, CSSOM Tree에 대해 이해하고, 둘이 합쳐져 만들어지는 Render Tree에 대해 이해합니다.
10.레이아웃과 페인팅에 대해 이해합니다.
11.리플로우와 리페인트의 개념에 대해 이해합니다.
12.리플로우와 리페인트의 최적화 방법에 대해 이해합니다.
Chapter3. 반응형 웹
13.반응형 웹에 대해 이해합니다.
14.모바일 퍼스트의 개념에 대해 이해합니다.
15.반응형 웹의 특징에 대해 이해하고, 장단점을 파악합니다.
16.미디어 쿼리를 적용하는 법과 작성하는 법에 대해 이해합니다.


1.웹(Web)은 월드 와이드 웹(World Wide Web)이 풀 네임이며 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공하며 웹 페이지들의 집합을 웹 사이트(Web Site)라고 부른다.
웹 브라우저(Web Browser) 종류는 대표적으로 모자익(Mosaic), 넷스케이프(Netscape), 크롬(Chrome) 등의 시대적 순서가 있으며 익스플로러, 사파리, 웨일 등 많은 브라우저들이 있다.

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

3.브라우저는 기존적으로 아래와 같은 층을 유지하며 브라우저 엔진은 자료저장소와 연동된다.
 -사용자 인터페이스
 -브라우저 엔진  => 자료저장소
 -렌더링 엔진
 -통신/자바스크립트 해석기/UI백엔드

4.사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하여 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현한다. 유명 엔진은 게코, 웹킷, 블링크, 트라이던트 등이 있으며 콜스택은 후입선출의 원리에 따라 마지막에 입력된 자료부터 처리한다.

5.UI 백엔드는 select, input 등 기본적인 위젯을 그려주며 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

6.웹 스토리지에는 localStorage와 sessionStorage가 있다. localStorage는 보관기한이 없는 데이터를 저장하며 sessionStorage에는 세션 하나와 연동해 데이터를 저장한다. 만약 세션이 만료(연결해제)된다면 스토리지의 내용은 즉시 삭제된다. 또한 로컬스토리지는 전역적으로 공유가 가능하지만 세션은 하나씩만 연결되기 때문에 공유를 할 수 없다.

7.html이 dom, css가 cssom으로 변화되며 js는 양방향으로 영향을 줄 수 있고 Render Tree로 이동한 후 Layout이 나오고 Paint된다.

8.파싱이란 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계로 HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 한 번 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드(node)라는 요소로 바꾼 다음 노드의 상하관계로 파스트리 또는 문법트리를 만든다.
요약하자면 데이터를 쪼개 트리형태로 만들어준다.

9.DOM Tree는 html을 parsing해서 만들어진 Tree이며 CSSOM Tree는 css를 parsing해서 만들어진 Tree로 그 둘을 복합적으로 합쳐서 만들어진 Render Tree는 CSS가 적용된 Html이라고 볼 수 있기 때문에 개발할 때 일반적으로 생각하는 이미지 그대로 출력이된다.

10.렌더링 내부의 레이아웃은 위치를 계산하는 과정에 대한 것으로 이런 부분은 엔진이 자동적으로 처리해준다. 페인팅은 레이아웃으로 배치가 끝난 경우 픽셀들을 화면에 채워주는 과정이다.

11.리플로우는 렌더링을 다시 하는 것이며 리페인트는 페인트를 다시 해서 화면에 출력하는 과정으로 부드러운 화면을 위한 최소조건인 초당 60렌더링을 위해 변화가 있을 때 마다 계속해서 다시 리플로우 -> 리페인트를 통해 화면을 출력한다.

12.리플로우와 리페인트는 게속해서 진해야 하지만 계속해서 계산을 해야 하기 때문에 계산 과정을 복잡하게 만들면 리플로우에서 과부하가 걸릴 수 있기 때문에 리플로우를 줄이기 위해서 레이아웃 구조를 최적화해줘야한다. 대표적인 문제와 대체법은 아래와 같다.

-left 속성 중 left-top, left-bottom 속성을 사용 => transform에 있는 translate를 사용하면 좌표 값을 사용해 위치를 이동
-visibility/display 사용 => opacitiy를 사용
-지나치게 많은 노드 사용 => 노드 및 레이아웃 최적화를 통해 리플로우를 줄이


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

14.기술의 발달로 인해 스마트폰을 사용하지 않는 사람이 더 적어졌기 때문에 모바일 이용자가 데스크탑 이용자보다 많아 최적화는 모바일을 우선해야 한다는 뜻이다.

15.여러개의 페이지로 나눠졌어야 할 페이지를 조건들을 통해 디자인만 바꿔서 출력하는 특징을 가지기 때문에 해당 페이지에 들어가지 않을 부분들의 데이터까지도 다 들고 있어야 하는 특징이 있다.
장점으로는 나눠질 페이지들이 하나로 통합되어 SEO(검색 노출)에 유리하며 하나의 페이지를 수정해도 다 다른 출력값들에 들어갈 내용물이 수정되므로 유지보수가 편리하다.
하지만 하나의 페이지에 모두 떄려박았으므로 사이트의 속도가 저하되며 수많은 사이즈에 다 맞춰서 분할하기는 현실적으로 불가능하므로 웹브라우저간의 호환성 문제가 있을 수 있다.

16.아래와 같이 @media에 조건을 넣어 해당할 경우 아래의 css를 적용할 수 있다.
@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

오늘은 뭐가 너무 지나치게 많아서 힘든 것 같다.