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 문서입니다. 이를 IE9, Firefox, Chrome, Safari, Opera를 이용해서 열어보면 다음과 같이 각각 나타납니다.
HTML5의 input 요소를 이용하여 여러분이 현재의 날짜를
선택할 수 있도록 하는 예제 하나를 보더라도 이렇게 웹 브라우저 별로 다양한 모습으로 나타냅니다. 여러분들이
이 책을 학습하면서 어떤 때는 IE9를, Firefox를
아니며 Chrome 브라우저를 이용하여 예제들을 테스트해보게 될 것입니다. 각 웹 브라우저별로 현재 표준화가 진행중인 HTML5의 명세(Specification)를 지원하거나 지원하지 않은 브라우저도 있고 방금 전 소개한 브라우저에 따라서 브라우저
엔진이 다르기 때문에 해석하는 방법도 다르기에 위와 같이 다른 결과들을 나타나게 되는 것입니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로 그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다.끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (6) | 2013.07.31 |
|---|---|
| 1.3.1 HTML5의 요소(Element) 작성 방법 (3) | 2013.07.31 |
| 1.3 HTML5의 구조(structure) (6) | 2013.07.31 |
| 1. HTML5의 구조 및 기본 지식 익히기 (5) | 2013.07.31 |
| HTML5 등장 배경 및 표준화 현황 (3) | 2013.07.31 |
