웹 언어의 사용환경은 W3C의 표준 승격보다는 웹브라우저가 얼마나 빠르게 진화하는가에 크게 좌우됩니다. 현재 HTML5의 표준화단계는 5단계중 첫번째인 Working Draft단계로 초안에 불과합니다. 5대 웹브라우저중 인터넷 익스플로러를 제외하고는 적용이 활발히 진행되고 있습니다. 가장 문제가 IE인데요. 앞으로 나올 IE10버전도 문제가 됩니다. 왜냐하면 사용환경이 윈도우 8에서만 작동되기 때문이죠. 우리나라 국민 웹브라우저인 IE가 이런 식이라면 웹디자이너들은 계속 고생하는 수 밖에 없습니다. 윈도우환경을 많이 사용하고 있는 국민 대다수가 새로운 OS가 나오고 웹브라우저가 나온다한들 인터넷 접속환경은 그리 달라지지는 않을것 같습니다. 다행히 IE의 점유율이 계속, 그것도 대폭 떨어지고 있습니다. 단적인 자료이지만 제 블로그 접속자의 IE사용점율을 비교해보면 알 수 있습니다.
제 블로그의 구글 애널리틱스 자료입니다. 물론 블로그마다 성격이 다르면 다른 웹브라우저를 사용할 수도 있으니 차이는 날지도 모르겠습니다. 하지만 큰 차이는 안날 겁니다. 지난해 11월에 IE로 접속한 방문자 84.36%였는데 지난 2월 접속자는 74.97%로 10%이상 감소됐습니다. 구글 크롬의 약진이 돋보입니다. 구글 크롬은 HTML5와 CSS3를 적용하기 위해 작년에 무려 8회나 버전업됐습니다. 지금도 베타버전인 18이 나와있고 19버전이 개발중입니다.
웹브라우저는 소비자와 직접 접할 수 있는 인터넷 환경이기때문에 소비자가 어떤 웹브라우저를 사용하느냐에 따라 HTML5나 CSS3의 기술을 접할 수 있는 기회가 만들어집니다. 외국의 자료를 보면 HTML5와 CSS3, 제이쿼리를 이용한 애니메이션이 아주 신기한게 많습니다. 스크롤만 해도 3D 이미지 슬라이드가 되죠. 애플 사파리의 적극적인 HTML5, CSS3 적용으로 이 웹브라우저에서만 되더군요. 평상시의 화면이나 다른 브라우저에서는 상단의 이미지 갤러리로 나오고 사파리에서는 마우스 스크롤하면 아래 이미지처럼 나옵니다. CSS3의 perspective 속성과 제이쿼리 플러그인을 사용한 것인데 이런 자료가 무료입니다. 이곳 을 클릭하면 데모를 볼 수 있고 다운로드 받을 수 있습니다. 또한 이곳 을 클릭하면 제가 포스팅한 이 사이트의 훌륭한 자료도 있습니다. 이처럼 웹브라우저 환경에 따라서 소비자들은 멋진 웹사이트를 접할 수 있게 됩니다.
IE가 계속 국민 웹브라우저로 남아있는 한 좋은 웹사이트를 보기는 어렵겠지만 웹 개발자들은 IE 핵(Hack)을 만들기 위해서 부단히 노력하고 있습니다. Hack이란 정상적으로 작동하지 않는 것을 우아하지는 않지만 다른 방법으로 해결하는 컴퓨터 솔루션입니다. 해킹의 Hack과는 다른 개념이죠. 그러니 한국의 웹디자이너들은 우아하지 않는 웹디자인을 할 수 밖에 없습니다.
HTML5의 핵은 주로 IE8버전 이하를 대상으로 합니다. IE9버전은 그나마 HTML5와 CSS3를 적용하고 있는 편입니다. 위 화면은 캔아이유즈닷컴의 HTML5 항목이 웹브라우저에 얼마나 적용되고 있는지 알 수 있는 자료로 계속 업데이트 되고 있습니다. 이곳 을 클릭하면 이동합니다. 웹브라우저별 버전에 마우스 오버하면 세계적으로 이 웹브라우저를 얼마나 사용하고 있는지 자료도 나옵니다. 위 내용은 contenteditable속성에 대한 웹브라우저별 지원 내용인데 IE6까지도 지원하는군요. 하지만 스크롤 다운하면 대부분을 지원하지 않습니다.
새로운 의미요소를 보니 IE8버전 이하는 지원하지 않습니다. 분홍색은 지원하지 않는 것이고 짙은 초록은 일부지원, 연두색은 전부 지원입니다. 일부 지원하는 웹브라우저는 HTML5의 새로운 중요 요소인 article, aside, hgroup, header, footer, figure, figcaption, nav, section을 블럭요소로 인식하지 못합니다. HTML5는 HTML4와 호환되도록 설계되었지만 웹브라우저는 업그레이드를 하지 않으니 이들 요소를 인식하지 못하는 것이죠. 그래서 HTML5 버전으로 웹페이지를 만들때는 이들을 블럭 요소로 인식하도록 설정해줘야합니다.
위처럼 설정하고 난 다음에는 일반 태그처럼 다른 속성을 사용하면 됩니다.
그런데 IE8 이하버전은 인식을 전혀 하지 못하므로 자바스크립트로 요소를 만들어줘야 CSS에서 인식을 하게 됩니다.
스크립트 태그는 HTML5에서 type 속성 없이 사용 가능하죠. 위처럼 의미요소를 만들기 위한 코드를 <head>태그 안에 삽입하면 됩니다. 또 다른 방법은 가장 효율적인 방법인데요. IE전용 조건 주석문을 삽입하는 방법입니다.
위코드는 Remy Sharp라는 웹개발자가 만든 것인데 구글의 CDN(Content Distribution Network)에서 다운로드 됩니다 . 어도비 드림위버를 사용해서 HTML5 템플릿을 만들면 위 코드가 자동 삽입됩니다. 용량은 2Kb로 앞에서 모든 의미요소에 대해서 자바스크립트를 만들어줘야하는 번거로움을 줄일 수 있으며 이미 위 코드를 사용한 웹페이지를 방문한 사람이 내 웹사이트에 들어오면 다시 다운로드 하지 않아도 되므로 속도가 빨라지죠. 더구나 구글서버는 잠시도 쉬지 않고 돌아가므로 접속이 끊어질 염려도 없습니다.
이렇게 한다고 100%해결되느냐하면 그렇지 않습니다. 유독 IE만의 특징인 자바스크립트를 사용한 웹페이지를 열면 자바스크립트를 사용할 것인지 묻는 메시지창이 뜨기도 하고 자바스크립트를 사용하지 않도록 일부러 설정해 놓은 경우도 있습니다. 이렇게 되면 의미요소는 CSS에서 통제가 안되고 다른 요소는 통제가 되므로 웹페이지가 엉망이 되어버릴겁니다. 아예 CSS가 전체 요소에 대해서 통제를 하지 않는다면 HTML의 코드 순서대로 나오니 보는데는 지장이 없죠. 하지만 일부만 CSS가 적용된 화면을 보신분은 이런 상황이 어떤지 아실겁니다. 상황에 따라서 흰화면만 나오기도 하고 메뉴만 나오기도하고 아주 다양하게 엉망이 되죠.
이런 경우를 대비해서 또 다른 방법이 있습니다. 그야말로 참으로 우아하지 않은 Hack입니다.
이러면 IE도 꼼짝없이 CSS로 통제됩니다. CSS에서 article앞에 점하나만 더 찍으면 됩니다. 하지만 태그마다 <div> 클래스를 더해줘야하죠. 우아하지 않더라도 어쩔 수 없답니다.
제 블로그의 구글 애널리틱스 자료입니다. 물론 블로그마다 성격이 다르면 다른 웹브라우저를 사용할 수도 있으니 차이는 날지도 모르겠습니다. 하지만 큰 차이는 안날 겁니다. 지난해 11월에 IE로 접속한 방문자 84.36%였는데 지난 2월 접속자는 74.97%로 10%이상 감소됐습니다. 구글 크롬의 약진이 돋보입니다. 구글 크롬은 HTML5와 CSS3를 적용하기 위해 작년에 무려 8회나 버전업됐습니다. 지금도 베타버전인 18이 나와있고 19버전이 개발중입니다.
웹브라우저는 소비자와 직접 접할 수 있는 인터넷 환경이기때문에 소비자가 어떤 웹브라우저를 사용하느냐에 따라 HTML5나 CSS3의 기술을 접할 수 있는 기회가 만들어집니다. 외국의 자료를 보면 HTML5와 CSS3, 제이쿼리를 이용한 애니메이션이 아주 신기한게 많습니다. 스크롤만 해도 3D 이미지 슬라이드가 되죠. 애플 사파리의 적극적인 HTML5, CSS3 적용으로 이 웹브라우저에서만 되더군요. 평상시의 화면이나 다른 브라우저에서는 상단의 이미지 갤러리로 나오고 사파리에서는 마우스 스크롤하면 아래 이미지처럼 나옵니다. CSS3의 perspective 속성과 제이쿼리 플러그인을 사용한 것인데 이런 자료가 무료입니다. 이곳 을 클릭하면 데모를 볼 수 있고 다운로드 받을 수 있습니다. 또한 이곳 을 클릭하면 제가 포스팅한 이 사이트의 훌륭한 자료도 있습니다. 이처럼 웹브라우저 환경에 따라서 소비자들은 멋진 웹사이트를 접할 수 있게 됩니다.
IE가 계속 국민 웹브라우저로 남아있는 한 좋은 웹사이트를 보기는 어렵겠지만 웹 개발자들은 IE 핵(Hack)을 만들기 위해서 부단히 노력하고 있습니다. Hack이란 정상적으로 작동하지 않는 것을 우아하지는 않지만 다른 방법으로 해결하는 컴퓨터 솔루션입니다. 해킹의 Hack과는 다른 개념이죠. 그러니 한국의 웹디자이너들은 우아하지 않는 웹디자인을 할 수 밖에 없습니다.
HTML5를 IE8이전 버전과 호환하기
HTML5의 핵은 주로 IE8버전 이하를 대상으로 합니다. IE9버전은 그나마 HTML5와 CSS3를 적용하고 있는 편입니다. 위 화면은 캔아이유즈닷컴의 HTML5 항목이 웹브라우저에 얼마나 적용되고 있는지 알 수 있는 자료로 계속 업데이트 되고 있습니다. 이곳 을 클릭하면 이동합니다. 웹브라우저별 버전에 마우스 오버하면 세계적으로 이 웹브라우저를 얼마나 사용하고 있는지 자료도 나옵니다. 위 내용은 contenteditable속성에 대한 웹브라우저별 지원 내용인데 IE6까지도 지원하는군요. 하지만 스크롤 다운하면 대부분을 지원하지 않습니다.
새로운 의미요소를 보니 IE8버전 이하는 지원하지 않습니다. 분홍색은 지원하지 않는 것이고 짙은 초록은 일부지원, 연두색은 전부 지원입니다. 일부 지원하는 웹브라우저는 HTML5의 새로운 중요 요소인 article, aside, hgroup, header, footer, figure, figcaption, nav, section을 블럭요소로 인식하지 못합니다. HTML5는 HTML4와 호환되도록 설계되었지만 웹브라우저는 업그레이드를 하지 않으니 이들 요소를 인식하지 못하는 것이죠. 그래서 HTML5 버전으로 웹페이지를 만들때는 이들을 블럭 요소로 인식하도록 설정해줘야합니다.
article, aside, hgroup, header, footer, figure, figcaption, nav, section {
display: block;
}
위처럼 설정하고 난 다음에는 일반 태그처럼 다른 속성을 사용하면 됩니다.
article, p {
font-family: 굴림, Helvetica, sans-serif;
font-size: 12px;
}
그런데 IE8 이하버전은 인식을 전혀 하지 못하므로 자바스크립트로 요소를 만들어줘야 CSS에서 인식을 하게 됩니다.
<script> document.createElement(‘header’); document.createElement(‘article’); document.createElement(‘nav’); </script>
스크립트 태그는 HTML5에서 type 속성 없이 사용 가능하죠. 위처럼 의미요소를 만들기 위한 코드를 <head>태그 안에 삽입하면 됩니다. 또 다른 방법은 가장 효율적인 방법인데요. IE전용 조건 주석문을 삽입하는 방법입니다.
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
위코드는 Remy Sharp라는 웹개발자가 만든 것인데 구글의 CDN(Content Distribution Network)에서 다운로드 됩니다 . 어도비 드림위버를 사용해서 HTML5 템플릿을 만들면 위 코드가 자동 삽입됩니다. 용량은 2Kb로 앞에서 모든 의미요소에 대해서 자바스크립트를 만들어줘야하는 번거로움을 줄일 수 있으며 이미 위 코드를 사용한 웹페이지를 방문한 사람이 내 웹사이트에 들어오면 다시 다운로드 하지 않아도 되므로 속도가 빨라지죠. 더구나 구글서버는 잠시도 쉬지 않고 돌아가므로 접속이 끊어질 염려도 없습니다.
이렇게 한다고 100%해결되느냐하면 그렇지 않습니다. 유독 IE만의 특징인 자바스크립트를 사용한 웹페이지를 열면 자바스크립트를 사용할 것인지 묻는 메시지창이 뜨기도 하고 자바스크립트를 사용하지 않도록 일부러 설정해 놓은 경우도 있습니다. 이렇게 되면 의미요소는 CSS에서 통제가 안되고 다른 요소는 통제가 되므로 웹페이지가 엉망이 되어버릴겁니다. 아예 CSS가 전체 요소에 대해서 통제를 하지 않는다면 HTML의 코드 순서대로 나오니 보는데는 지장이 없죠. 하지만 일부만 CSS가 적용된 화면을 보신분은 이런 상황이 어떤지 아실겁니다. 상황에 따라서 흰화면만 나오기도 하고 메뉴만 나오기도하고 아주 다양하게 엉망이 되죠.
이런 경우를 대비해서 또 다른 방법이 있습니다. 그야말로 참으로 우아하지 않은 Hack입니다.
<div class="article">
<article>
<section></section>
</article>
</div>
이러면 IE도 꼼짝없이 CSS로 통제됩니다. CSS에서 article앞에 점하나만 더 찍으면 됩니다. 하지만 태그마다 <div> 클래스를 더해줘야하죠. 우아하지 않더라도 어쩔 수 없답니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
