처음부터 다시 배우는 HTML5 & CSS3 1일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. 웹 표준 등장 배경

2. 웹 표준이란

3. 기본적인 웹 표준 문서의 상호 관계

4. 웹 접근성을 높여 주는 웹 표준

5. 환경을 보호하는 웹 표준

6. 브라우저에서 캐시란?

7. 사이트 개발 기간의 단축과 유지 보수의 용이성

8. 정밀하게 제어할 수 있는 사이트 디자인


웹 표준 등장 배경
2011년 IE9의 등장으로 모든 브라우저에서 HTML5가

지원됨에 따라 본격적으로 HTML5의 시대가 열리게

되었음.

CSS3의 속성 또한 IE9부터 구현되면서 이전에는 그래픽으로 처리했거나 여러
트릭으로 구현했던 많은 효과를 이제는 순수하게 HTML과 CSS 코드만으로도
처리할 수 있게 되었음.

특히 HTML5와 CSS3기반의 문서는 사이트를 웹 표준 형식으로 만들어야만 하
게 강제되었음. 그 이유는 HTML5에서는 표현을 위한 태그들이 대거 삭제되었
고, 표현을 담당하는 부분은 CSS에서 담당하게끔 바뀌었기 때문임.


인터넷 초창기에 웹(WWW)이 출현하기 전에는 모든 정보들이 텍스트 기반 으로 구
성됨. 인터넷에서 정보를 얻기 위해서는 주로 텔넷Telnet이라고 하는 표준 접속
방법을 사용하였으며, 한국에서도 PC 통신으로 인터넷을 하던 시절에는 주로 이
런 방법으로 정보 교류를 했음.

윈도우95의 등장은 기존의 인터넷 환경을
깡그리 바꿔놓게 됩니다.
바로 GUI 환경에서 인터넷이
가능한 넷스케이프1.0의 등장 때문임.

이렇게 초창기 인터넷은 넷스케이프가 독주하고 인터넷 익스플로러(IE)가 후발
주자로 따라 가는 형국이었습니다. 하지만 윈도우98부터 IE를 OS자체에 기본으
로 탑재하기 시작하면서 전세계 브라우저 시장은 IE가 지배하게 됨.


인터넷 익스플로러(이하 IE) 6.0 버전에 이르러서는 전세계 브라우저의 IE 점유
율은 90% 이상을 차지함. 이에 따라 MS에서는 IE에 공통적으로 사용하는 표준
이 되는 기술보다는 자기 회사에 유리한 기술을 마구 채용하게 됨.

가장 단적인 예가 ActiveX임.

ActiveX는 오직 윈도우 환경에서만 작동하며, 맥이나 리눅스 환경에서는 동작하
지 않기 때문에 ActiveX를 이용해서 구축한 사이트는 PC에서 윈도우를 사용하
지 않을 경우, 해당 사이트에서 동등한 정보를 취득하기 어려움.

특히 한국의 ActiveX 남용은 심각한 수준으로 모든 금융권과 공공기관의 경우 윈
도우 환경이 아니면 사용이 불가능할 정도


하지만 현재는 IE이외에 파이어폭스, 사파리, 오페라, 구글 크롬 등 많은 브라우
저가 각각의 특징과 빠른 속도로 무장하여 브라우저 전쟁이라고 불릴 정도로 양
상이 바뀐 상태.

특히 아이폰으로 대변되는 스마트폰의 등장으로 이제 IE의 시장 점유율은 점차
하락하고 있음.

MS에서 만든 스마트폰용 OS(윈도우 모바일 시리즈)가 실패를 거듭하다 보니,
스마트폰에서 IE가 차지하는 비중이 낮아지고, 그 자리를 아이폰의 사파리,안드
로이드의 크롬 또는 파이어폭스가 차지하게 됩니다.


예를 들어 웹 페이지를 IE에서만 볼 수 있게 만들어버리면, 아이폰 또는 안드로
이드 계열의 스마트폰 사용자는 해당 웹 페이지를 이용할 수 없게 됩니다.

즉, 특정 웹 브라우저에만 동작하는 웹 페이지는 더는 설 자리가 없어진다는 것
을 의미함.

따라서 모든 브라우저에서 동일한 정보를 제공하고, 사이트의 구조와 표현을 분
리해 줄 필요성이 대두됨에 따라 웹 표준이 필요하게 됨.


웹 표준이란
웹 표준이라 함은 특정 브라우저에서만 사용하는 비 표준화된 기술은 배제하고,

W3C라는 조직에서 정한 표준 기술만을 사용하여, 웹 문서의 구조와 표현 그리

고 동작을 구분해서 사용하는 것임.

한국에서 공업용 제품에는 KS(Korea Standard)라는 마크를 붙이고 나오는 것도 서로
다른 부품과 규격으로 인한 낭비를 막기 위함인데, 웹 표준도 이와 똑같은 이치
라고 보면 된다.


기본적인 웹 표준 문서의 상호 관계
웹 표준은 웹 문서의 구조와 표현(디자인) 그
리고 동작을 별도로 구분함.

HTML 웹 문서의
구조를 담당하는 것은 HTML
표현(디자인)을 담당하는 것은 CSS
Java
CSS 동작을 담당하는 것은 Java Script
Script
이렇게 3가지 요소가 유기적으로 결합하여
작동하게 되면, 웹 문서가 가벼워지며, 유지
보수 및 수정 시에도 간편하고 빨리 처리할
수 있음.


웹 접근성을 높여 주는 웹 표준
웹 접근성이라는 의미는 어떤 브라우저를 사용하든지, 일반인이건 장애인이건
모든 사람이 해당 사이트를 얼마나 제대로 볼 수 있느냐를 의미함.

가장 많이 사용하는 브라우저를 기준으로 웹사이트를 만든다고 해서, 모든

브라우저에서 똑같은 화면이 나오는 것은 아님.

사이트가 웹 표준을 준수하지 않는 경우, 다른 브라우저(파이어 폭스 또는 사

파리 등)에서는 의도하지 않게 엉뚱한 자리에 컨텐츠가 표시되거나, 아예 화면에
표시가 되지 않을 수도 있음.



PC에서 IE는 사용하지 않는 사용자가 IE이외의 브라우저를 이용해서 해당 웹
사이트를 방문할 경우 웹 표준 기술이 적용되지 않은 경우, 위와 같은 메시지가
나오면서, 해당 사이트를 이용할 수 없게 됨.

또한 웹 표준을 이용하지 않은 사이트는 장애인, 특히 시각장애인에게 문제가
될 수 있음. 왜냐하면 시각장애인은 별도의 프로그램을 이용해서 웹 페이지를
읽게 되는데, 웹 표준 이전 사이트는 각종 태그에 표현 요소들이 혼재되어 있어,
해당 프로그램이 오작동을 일으킬 수도 있음.


웹 표준을 준수하여 만들어진 사이트인 경우, HTML 구조는 그대로 놔둔 채, 장
애인을 위한 CSS 파일만 만들어 주면, 장애인용 웹사이트가 완성됨.

웹 표준 기반으로 제작된 Daum 웹 사이트


웹 표준으로 만들어진 사이트는
HTML로 웹 문서의 구조를, CSS로
디자인(스타일)을 만들었기 때문에
CSS(스타일)를 제거하더라도 사이
트 이용에는 문제 없음.

따라서 일반인이 사이트를 보든(CSS
적용), 시각장애인이 스크린 리더기
스타일(CSS)이 제거된 Daum 사이트
(CSS 비 적용)를 이용하여 사이트를
보든 문제없이 이용할 수 있습니다.


환경을 보호하는 웹 표준
웹 표준을 지키는 사이트는 구조와 표현 그리고 양식을 분리해서 개발.

때문에 사이트의 용량이 기존에 비해서 현저하게 작아지게 됨.

특히 CSS는 HTML과 구조가 분리되어 있기 때문에 한 번 해당 페이지를 불러오
게 되면, 브라우저의 캐시에 CSS가 저장되며, 해당 CSS는 메모리에 상주하게 되
어 동일한 CSS는 다시 불러오지 않기 때문에 HTML 코드가 가벼워지는 것 임.

예를 들어 이전 방식의 사이트 개발 시 HTML 문서 하나가 100KB였다면, 웹 표준
을 준수하면 최대 80% 이상의 코드 감소효과가 있음.


“실제로 XHTML+CSS 레이아웃으로 첫 화면을 개편한 미국 야후는 기존과 똑같
은UI를 유지하면서도 첫 화면 HTML 파일 크기를 1/3 가량 줄였다고 한다.
ESPN.com의 경우 50kb의 파일 크기가 감소했고 MSN.com과 Wired.com은 각
각 64%,62% 가량 줄었다고 하며, MSN.com의 경우 하루 940GB의 트래픽 감소
효과를 보았다.” ( KIPA에서 발행한 실전 웹 표준 가이드(2005.5) 인용 )

100KB가 아주 작은 수 같지만, 이 사이트가 구글이나 다음, 네이버 같은 곳이면
하루 방문자만 100만 명이 훨씬 넘어갑니다.

예를 들어 100만 명이 웹사이트를 방문한다고 가정하면 , <100KB×100만>은 1
억KB의 트래픽이 몰리게 되는 것이고, 웹 서버에 많은 부하를 주게 되고 웹 서버
는 방문객의 트래픽을 유지하기 위해 더 많은 서버를 사용하게 되어 더 많은 전
기를 소모할 수 밖에 없음.


웹 표준을 준수하여 100KB의 웹 페이지를 20KB로 줄이게 되면 전체 트래픽은
2,000만KB로 줄어들게 됨.

따라서 서버 한 대당 처리할 수 있는 트래픽이 2,000만 KB라면 가정한다면, 이전
방식의 웹 페이지는 서버가 5대 필요하던 것을 이제는 1대로 감당할 수 있다는
의미.

또한 사용자도 이전에 비해 더 빨리 웹 페이지가 화면에 뜨기 때문에, 훨씬 짧은
시간에 해당 웹 페이지를 볼 수 있게 됨.


브라우저 캐시란?
인터넷을 사용하기 위해선 브라우저를 사용해야 합니다. 브라우저는 IE, 파이어폭스,
사파리, 크롬, 오페라 등 여러 브라우저가 있습니다. 각 브라우저들은 한번 방문했던
웹사이트의 정보를 컴퓨터의 하드에 저장합니다. 이렇게 저장된 웹사이트의 정보를
캐시라고 합니다. 그러면 왜 이런 정보들을 하드에 저장할까요? 그것은 웹사이트의
속도 때문입니다.

한번 방문했던 웹사이트의 기본적인 이미지 파일, CSS 파일, 속성 파일들을 저
장하여, 다시 같은 웹사이트를 방문하게 되면, 저장되어 있는 캐시를 불러냅니다. 그
리고 현재 웹사이트와 비교해서 이전에 있던 캐시와 동일한 정보가 있으면, 캐시에
있는 정보들을 웹 브라우저에 뿌려주게 됩니다. 그렇게 되면, 느린 인터넷 환경에서
도 상대적으로 빠르게 웹사이트를 볼 수 있습니다.

지금도 회사 내부에 프록시 서버, 즉 캐시 서버를 두고 사용하는 기업들이 있습니다.
이 프록시 서버가 하는 일도 같은 역할을 합니다. 회사 내부 사용자 한 명이 사이트를
방문하게 되면,그 내용을 프록시(캐시) 서버에 저장해 두고, 다음 방문자가 동일한 사
이트에 방문하면, 해당사이트로 바로 가는 것이 아니라 프록시 서버에 있는 데이터를
보여 주게 됩니다. 그렇게 함으로써, 네트워크 비용이 대폭 감소하게 되는 것입니다.


사이트 개발 기간의 단축과 유지 보수의 용이성
웹 표준 사이트인 경우 HTML을 이용하여 사이트의 구조를 표현하고 CSS를 통
해 사이트를 꾸미게 됩니다. 구조와 표현이 분리되기 때문에 디자이너는 디자인
에 집중할 수 있고 기획자는 구조에 집중할 수 있으며 프로그래머는 개발에 집중
할 수 있게 됨.

디자인 & 코 디버깅 & 테
사이트 기획 프로그래밍 사이트 완성
딩 스트

웹 표준 이전 방식의 개발 프로세스

웹 표준 이전 방식에서는 웹 문서의 디자인과 코딩이 전부 끝나고 나야, 웹 페이
지에 대한 프로그래밍을 적용할 수 있었음. 또한 웹 페이지의 디자인을 변경하기
위해서는 웹 문서(HTML)을 열어 프로그래밍이 혼합된 문서를 열어 수정해야 하
기 때문에, 문서가 복잡해지고, 웹 문서 수정 과정에서 프로그래밍과 연관된 코드
를 지울 수 있는 위험성이 항상 존재했음.


사이트 개발 기간의 단축과 유지 보수의 용이성

웹 표준 방식에서는 웹 문서의 디자인 및 코딩과 더불어 프로그래머가 기본적인
폼에 대한 문서 디자인이 가능하며, 프로그래밍이 끝난 문서를 디자인(CSS)을
입힐 수 있게 됨에 따라, 개발 기간이 단축되며, 웹 사이트의 디자인을 변경 할 때
는 HTML 문서를 여는 것 보단 대부분 CSS만 수정하면, 웹 사이트의 디자인이 변
경되기 때문에 이전 방식의 개발보다 훨씬 안전하며, 수정이 쉽다.

디자인 & 코
딩
디버깅 & 테 사이트 완성
사이트 기획
스트

프로그래밍

웹 표준 방식에 의한 개발 프로세스


정밀하게 제어할 수 있는 사이트 디자인
웹 표준 이전에는 투명한 1×1 픽셀의 GIF 이미지를 이용하여 레이아웃을 디자인
하거나 디자인 요소의 간격 조정을 하곤 했습니다. 그게 정석이었고 많은 디자이
너가 사용하던 방법이었음.
이렇게 1×1 픽셀의 GIF 이미지와 table 태그만 있으면, 거의 모든 웹 페이지 레이
아웃은 전부 만들 수 있었음. 하지만 이렇게 만들어진 웹 페이지인 경우 디자인
을 위해 쓸데없는 코드가 많이 생성되어, 파일 사이즈가 커지고 복잡해진다.

하지만 웹 표준을 적용하면 투명 이미지와 table 태그는 웹 페이지 레이아웃을
잡는데 전혀 사용하지 않습니다.
CSS에서 margin과 padding이라는 그리고 float를 이용해서 웹 페이지 레이아웃
을 꾸미게 되기 때문에, HTML 문서 자체는 훨씬 간단하고 구조적인 장점을 지니
게 됨. 특히 margin과 padding의 값은 픽셀 및 퍼센트 등 여러 단위를 사용할 수
있어 보다 정밀하게 사이트를 제어할 수 있음.


정밀하게 제어할 수 있는 사이트 디자인
CSS LOUNGE(http://css-lounge.com/)라는 사이트를 참조하면, CSS를 이용해
만들어진 여러 예제를 볼 수 있음.
웹 사이트 개발 시 많은 사이트를 벤치 마킹하게 되면 개발할 때 많은 도움이 되
며, 특히 외국 사이트인 경우 참신한 아이디어들이 많음.

CSS LOUNGE(http://css-lounge.com/)


“웹에서의 픽셀과 퍼센트의 의미”
픽셀은 모니터상의 하나의 점을 의미합니다.

그래서 인쇄 디자이너가 아닌 웹 디자이너는 픽셀이라는 의미에 더 익숙해 있을지도 모릅니다. 픽셀은
모니터 해상도가 640×480이라면, 가로 640개의 픽셀과 세로 480개의 픽셀이 찍혀 있는 것을 의미합니
다. 초기 웹 페이지의 표준 웹사이트의 기준은 640×480 픽셀 모드로 디자인을 했지만, 현재는
1024×768 픽셀을 기준으로 사이트 디자인 작업을 하게 됩니다.

웹사이트의 퍼센트의 단위는 흔히 일상에서 사용하는 퍼센트와 같은 의미로 사용됩니다만, 웹사이트
개발 관점에서 보면 퍼센트는 웹사이트의 크기를 유동적으로 표시할 때 사용합니다. 보통 웹 개발자는
고정된 사이트 크기로 작업하는 것이 편하고 디자인도 세련되게 표시할 수 있습니다. 하지만 때에 따라
서는 웹사이트 크기가 유동적으로 변하는 것이 필요할 수 있습니다.

고정적인 웹사이트를 만들 때 1024×768 크기의 사이트를 만들면, 화면 크기가 1980×1080인 경우 브라
우저를 전체 화면 모드로 했을 때 브라우저 공간이 상당히 많이 비게 됩니다.

그렇지만 퍼센트로 만들게 되면 사용자의 PC 상의 화면 크기에 구애 받지 않고 사이트의 내용을 보여
줄 수 있는 것입니다. 참고로 구글(google)에서 서비스하는 사이트들이 모든 화면을 퍼센트 단위로 제작
하고 있습니다.

처음부터 다시 배우는 HTML5 & CSS3 1일차

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 1일차

Similar to 처음부터 다시 배우는 HTML5 & CSS3 1일차 (20)

처음부터 다시 배우는 HTML5 & CSS3 1일차