[HTML/CSS] 브라우저/반응형 웹
브라우저(Browser)
일명 '웹 브라우저'를 지칭하는 것으로써, 양방향 통신을 통해 HTML 문서나 이미지, 동영상 등을 열람할 수 있는 GUI 기반 소프트웨어 프로그램이다. HTTP 프로토콜을 통해서 서버와 송수신을 한다.
웹(World Wide Web)
- 브라우저 상에서 제공되는 웹은 인터넷 상에서 콘텐츠를 하이퍼텍스트 방식으로 연결해서 제공한다.
- 웹 사이트 = 웹 페이지의 집합
- 웹 브라우저의 종류로는 인터넷 익스플로러, 크롬, 엣지, 파이어 폭스 등이 있다.
웹 브라우저의 동작 원리
브라우저의 구조
브라우저 렌더링
1. 사용자가 브라우저를 통해 웹 사이트에 접속합니다.
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받습니다.
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만듭니다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듭니다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축합니다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정합니다.
7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작합니다. 이 과정을 paint라고 합니다.
반응형 웹
기기의 브라우저 크기에 맞게 레이아웃이 변하는 웹 사이트.
소스 코드는 하나이지만, 접속하는 스크린 사이즈에 맞게 레이아웃이 유동적으로 달라진다.
모바일 퍼스트(mobile first) : 사용자 경험(UX) 디자인 시 모바일 환경을 최우선적으로 디자인하는 것.
특정 장치에 최적화된 페이지로 연결되는 URL이 있다면 반응형 웹이라고 부르지 않는다. ex) m.naver.com
반응형 웹의 장점
- 효율적인 유지 보수
- 검색엔진(SEO) 최적화 유리
반응형 웹의 단점
- 사이트 속도 저하
- 웹브라우저 호환성 문제