크로스브라우징, 웹표준과 핵(hack)

 

 

크로스브라우징(웹표준과 핵(hack), 기본값 초기화(reset))

 

 

HTML과 CSS를 공부하면서  웹표준, 크로스 브라우징(Cross Brwosing),

 

웹접근성, 핵(hack), 리셋(reset)이라는 단어를 자주 보는데요

 

HTML 기초 강좌를 처음 시작할 때만해도 이 단어에 대한 그림이 잘 그려지지 않았어요.

 

그래서 글쓰기를 망설이다가 중간 정리 차원해서 한 번 정리해 보았습니다

 

 

HTML 표준

 

한국에서는 서울말, 전라도말, 제주도말, 부산말 등이 있는데

 

서울말을 표준말이라고 정하고,  공식적인 문서에서 이 표준말로 의사소통을 합니다.

HTML언어 역시 마찬가지인데요.  HTML은 여러 가지 방식으로 코드를 구현할 수 있기 때문에

여러 방언이 많았고, 그래서 W3C를 통해 HTML 공통 표준을 만들고자 하는 노력이 예전부터 있었답니다.

 

*W3C- HTML, CSS, 자바스크립트 등 웹 표준을 만드는 기관

 

브라우저

브라우저란 HTML언어를 번역해서 보여주는 도구라고 했습니다.

 

초기에는 넷스케이프(Netscape)라는 유료 브라우저가 90% 이상 시장 점유율을 보였는데,

이때 NS는 HTML 표준에 신경 쓸 필요가 없었겠죠.

 

오히려, 넷스케이프에서만 지원하는 요소들을 개발했다고 합니다..(다른 브라우저에서는 작동하지 않는)

 

나중에 마이크로소프트가 인터넷 익스플로러(Internet Explorer)로 브라우저 경쟁에 뛰어 들었는데

브라우저를 무료로 배포하면서 IE가 90%이상 시장을 점유하게 됩니다

 

IE 역시 초반에는 HTML 표준에  신경쓰지 않다가 IE 4, 5버전부터 점점 HTML 표준을 지원합니다..

하지만 IE 브라우저만 지원하는 요소들이 여전히 존재하고,  이건 모질라, 오페라, 넷스케이프 같은

 

다른 브라우저 역시 마찬가지라고 합니다

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

 

 

웹 표준을 준수

 

W3C 표준을 따른다는 것은 모든 브라우저에서 볼 수 있는 웹사이트를 만든다는 의미입니다..

 

웹 표준은 HTML 접근성과 시멘틱 HTML 가이드라인을 충족해야 하는데,

웹 접근성은 W3C의 '웹 콘텐츠 접근성 가이드라인'에 기반합니다. 

오늘날 HTML 표준은  HTML4와 XHTML인데, 현재 모든 브라우저가 HTML4를 지원합니다.

가장 최신 버전으로는 HTML5가 있는데,  대부분의 브라우저가 HTML5의 대부분의 특징들을 지원하고 있습니다.

HTML5가 쓰기에 더 간편하므로  모든 브라우저가 HTML5 새로운 특징들을 지원하기 위해 노력하고 있다고 합니다

웹 표준을 예를 들어 설명한다면

중앙 정렬 태그인<center>이나 align 속성이 html5에서는 지원이 되지 않는 퇴화 태그입니다.

대신 html5에서도 지원이 되는(그래서 다른 브라우저에서도 지원되는) text-align 속성이나 다른 방식을 

사용해 중앙 정렬을 하는 것이... 웹 표준을 지킨다는 뜻.

 

 

크로스 브라우징(Cross Browsing)과 버전 호환성(backward compatibility)

 

크로스 브라우징이란 브라우저 간의 상호 호환성을 말하며

 

버전 호환성은, 예를 들어  IE7, IE8, IE9같은 버전 간의 호환성이라고 보면 됩니다.

 

버전 호환성이란 예전에 사용하는 기능을 계속 유지할 수 있도록 해주는 것.

 

컴퓨터마다 운영체제(OS)나 HTML를 렌더링하는 방식 등이 다르므로

모든 브라우저에서 100% 똑같은 화면을 보이게 하는 것은 불가능한데요.

 

아래를 준수하면 어느 정도 통일된 화면을 만들 수 있습니다.

 

 

 

1)웹표준 준수

 

2)브라우저 기본값의 초기화(reset)

 

브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

 

3)핵(hack) 또는 조건부 주석(Conditional comments)의 사용

[컴퓨터 용어] hack 뜻을 찾아 보다

 

 

4) DOCTYPE 선언

위의 1) 2) 방법을 해도 안 될 경우 사용하는 것이 바로 핵(hack)인데요

 

예를 들어 IE일 경우는 A 스타일

 

FireFox일 경우 B스타일

 

Opera일 경우 C 스타일을 적용하는 코드를 작성하는 것입니다.

 

 

/***** 선택자 핵의 예(Selector Hacks) ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/***** Selector Hacks ******/

 

 

/***** 속성 핵의 예(Attribute Hacks) ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

 

 

Conditional comments(조건부 주석)

 

CC는 IE에서만 작동합니다

IE 구 버전들은 화면을 올바로 표시하기 위해 이 조건적 주석을 첨가하는 것이 좋다고 하네요.

(조건부 주석은 이 목적으로 고안되었으니까요)

 

하지만 CC는 IE9까지만 지원하며 IE10이상에서는 CC를 인식하지 못합니다.

 

CC는 엄밀히 말해서는 HACK이지만(일부 브라우저에 특별한 스타일을 주도록 하는 목적이기에)

 

CC는 브라우저 핵에 기초하지 않고 의도된 특징에 기초하기에, 사용하기에 더 안전하다고 합니다.

 

되도록 CSS를 통해 해결 방법을 찾아본 후 방법이 없을 때 이 CC와 HACK을 이용하는 게 좋다고 합니다.

 

 

Conditional comments(조건적 주석) 구문

 

1.기본 구조는 html 주석과 같음

 

<!-- -->

 

html, css, javascript 주석 처리 방법

 

2. 다른 브라우저에서는 이 부분을 주석으로 보고 무시하지만

  IE는 이 부분을 인식하도록 프로그램 되어 있음.

 

<!-- [if IE]>

 

 만일 IE라면 이란 뜻..

3. CC 구문은 html 주석 구조이기 때문에 css가 아닌 html에 포함되어야 함.

 

4. 하지만 <link> 태그를 이용해 외부 스타일 시트를 참조할 수도 있음.

예:

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="all-ie-only.css" />

<![endif]-->

 

[html 기초] head 에 들어가는 태그 (title, style, script, meta 태그)

 

Conditional comments(조건적 주석) 사용 예

 

ie hack.htm

 

<p>
<!--[if IE]>
이 브라우저는 IE입니다<br />
<![endif]-->
 
<!--[if IE 6]>
이 브라우저는 IE 6입니다<br />
<![endif]-->
 
<!--[if IE 7]>
이브라우저는 IE 7입니다<br />
<![endif]-->
 
<!--[if IE 8]>
이 브라우저는 IE 8입니다<br />
<![endif]-->
 
<!--[if IE 9]>
이 브라우저는 IE 9입니다<br />
<![endif]-->
 
<!--[if gte IE 8]>
이 브라우저는 IE 8이상 입니다<br />
<![endif]-->
 
<!--[if lt IE 9]>
이 브라우저는 IE 9 미만입니다<br />
<![endif]-->
 
<!--[if lte IE 7]>
이브라우저는 IE 7 이하입니다<br />
<![endif]-->
 
<!--[if gt IE 6]>
이브라우저는IE 6 초과입니다<br />
<![endif]-->
 
<!--[if !IE]> -->
이 브라우저는 IE 5-9가 아닙니다<br />
<!-- <![endif]-->
</p>

 

설명☞

 

! = not  

!IE = not IE 

gt = greater than 보다 큰
gte = greater than or equal 보다 크거나 같은

lt = less than 작은

lte = less than or equal 작거나 같은

 

위 코드를 실행하면 다음과 같이 나옵니다.

 

 구글 크롬 실행 화면

 

 

인터넷 익스플로러 실행화면

 

크로스브라우징과 웹표준과 핵(hack)에 대해 간략하게 살펴보았는데요

 

다음 글에서는 핵 사용법에 대해 자세히 다뤄 보겠습니다~

 

 

 

 

「 참조 사이트 」

 

http://www.quirksmode.org/css/condcom.html

http://css-tricks.com/snippets/css/browser-specific-hacks/

http://www.websitecodetutorials.com/code/ie/safe-ie6-ie7-ie8-ie9-css-hacks.php

http://www.mozilla.or.kr/docs/web-developer/standard/crossbrowsing.pdf

http://html.net/tutorials/html5/lesson14.php 

 

「 관련글 」

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)