티스토리 뷰
1.2 웹 브라우저(Browser)의 기능과 한계
익스플로러(Internet Explorer), 파이어폭스(Firefox), 크롬(Chrome), 사파리(Safari), 오페라(Opera) 같은 웹 브라우저들은 HTML 문서들 속에 포함된 다양한 태그(tag)를 읽어서 시각적 혹은 청각적으로 웹 페이지를 여러분들이 보고 들을 수 있도록 나타내는 역할을 합니다.
구체적으로 말하자면 각 웹 브라우저 별로 독자적인 웹 브라우저 엔진 혹은 “layout engine” 혹은 “rendering engine” 이라 불리는 컴포넌트가 포함되어 있는데 이 웹 브라우저 엔진이 HTML, XML, Image 등과 같은 내용(content)를 포함하는 마크업 데이터나 이 책에서 다루는 CSS나 XML 기반의 스타일 형식인 XSL(eXtnsible Stylesheet Language) 등과 같은 형식 정보들을 읽어서 브라우저 창에 나타내는 역할을 합니다.
참고로 Internet Explorer 계열은 Trident, Firefox는 Gecko, Chrome과 Safari는 Webkit, 마지막으로 Opera는 Presto 같은 브라우저 엔진을 사용합니다.
HTML5를 학습하기 전에 이렇게 웹 브라우저 엔진에 대해서 간략하게 나마 설명하는 이유는 HTML5 예제를 작성하고 상황에 따라 웹 브라우저를 선택하여 실행했을 때 화면에 나타내는데 사용하는 브라우저 엔진이 다른 만큼 그 결과도 조금씩 다를 거라는 것을 미리 알려드리기 위함입니다. 다음과 같은 HTML5 문서가 “browserdiff.html”로 가정합니다.
<!doctype html>
<html>
<head>
</head>
<body>
날짜 선택 : <input type="datetime" name="idatetime" />
</body>
</html>
위와 같이 여러분이 현재의 날짜를 선택할 수 있도록 input 요소를 이용하여 나타내도록 하는 HTML5 문서입니다. 이를 IE, Firefox, Chrome, Safari, Opera를 이용해서 열어보면 다음과 같이 각각 나타납니다.
HTML5의 input 요소를 이용하여 여러분이 현재의 날짜를 선택할 수 있도록 하는 예제 하나를 보더라도 이렇게 웹 브라우저 별로 다양한 모습으로 나타냅니다.
여러분들이 이 책을 학습하면서 어떤 때는 IE를, Firefox를 아니며 Chrome 브라우저를 이용하여 예제들을 테스트해보게 될 것입니다.
각 웹 브라우저별로 현재 표준화가 진행중인 HTML5의 명세(Specification)를 지원하거나 지원하지 않은 브라우저도 있고 방금 전 소개한 브라우저에 따라서 브라우저 엔진이 다르기 때문에 해석하는 방법도 다르기에 위와 같이 다른 결과들을 나타나게 되는 것입니다.
'HTML5-CSS' 카테고리의 다른 글
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (0) | 2016.04.28 |
|---|---|
| 1.3.1 HTML5의 요소(Element) 작성 방법 (0) | 2016.04.28 |
| 1.3 HTML5의 구조(structure) (0) | 2016.04.19 |
| HTML5 구조/기본지식 알아보기 (0) | 2016.04.01 |
| HTML5 란? (0) | 2016.03.30 |
