웹 브라우저 & 크로스 브라우징

J·2024년 1월 24일
1

기획

목록 보기
6/7

웹 브라우저

인터넷에서 웹페이지 / 온라인 컨텐츠를 검색하고 조회하기 위한 소프트웨어 응용 프로그램

기술적으로 HTML, CSS, JavaScript, 통신 프로토콜, 고유의 엔진을 가지는 특징이 있다.
예를 들어 크롬 / 엣지의 경우 Blink, 사파리는 Webkit, 파이어폭스는 Gecko 라는 엔진을 사용한다.

현재 데스크탑 및 포터블 디바이스 시장에서 크롬 브라우저가 압도적인 강세를 보이고 있다.
Blink 엔진 기반으로 성능과 보안에 중점을 두고 있으면서도 타 엔진 대비 압도적으로 빠른 로딩 시간과 높은 호환성을 제공하기 때문이다.

렌더링

웹 페이지에서 화면을 사용자에게 보여주기 위해 이루어지는 일련의 과정

이 때 사용되는 스택은 HTML, CSS, JavaScript 이다.

HTML

HTML은 페이지의 기본적인 외골격을 담당한다. 어떤 요소와 내용이 들어있는지 알려주는 기능을 한다.

CSS

CSS는 전체적인 페이지의 디자인을 담당한다. 커서를 갖다 댔을 때 색깔이나 크기, 간단한 애니메이션도 적용할 수 있다.

JavaScript

JavaScript는 페이지에 동적인 이벤트를 주는 기능을 담당한다.
예를 들어 네이버 메인 페이지에 진입해서 지도 탭을 눌렀을 때 지도 페이지로 새롭게 진입하는 기능은 JavaScript 언어를 통해 그렇게 하도록 설계됐기 때문이다.

위 3가지의 요소들을 통해 사용자는 특정한 페이지의 내용 / 디자인 / 이벤트 등을 파악할 수 있게 되는 것이고, 그것이 이루어지는 과정을 렌더링이라고 부른다.

크로스 브라우징

웹 사이트 및 애플리케이션을 각기 다른 웹 브라우저에서 동일하게 보이고 작동하게 하는 과정

MDN

웹 개발을 하기 위해 필요한 문서들의 저장소 사이트로, JavaScript의 특정 문법(ex. getDate)을 서치해 보면 해당 문법이 어느 브라우저의 몇 버전에서 사용이 되고 안 되는지 파악할 수 있다.

0개의 댓글