홈페이지 웹표준이란?

    요즘 웹페이지 이론에 대해 이모저모 설명 해드리고 있는데요. 어렵다는 이야기가 많아서 ... (제 설명이 그렇게 어려웠나요?) 오늘은 조금 더 기초적인 웹표준에 대해 설명을 드리려고 해요! 단순히 디자이너와 프로그래머만 있던 개발자 사이에 퍼블리셔 개념이 생겨난 것도 바로 이 웹표준이 출몰한 이후 부터 랍니다. 과연 웹표준이란 무엇인지! 지금부터 설명드리도록하겠습니다.

    웹표준이란? 웹을 이용하는 모든 사용자가 어떠한 환경에서도 동일한 결과를 볼 수 있도록 하는 크로스브라우징을 의미합니다. 

    웹표준이 탄생하게 된 배경부터 간단히 설명을 해드리겠습니다. 웹 시장이 커지면서 익스플로러 뿐만 아니라 크롬, 파이어폭스, 오페라 등등 다양한 브라우저가 생겨나게 되었습니다. 각 브라우저마다 html 확장 기술을 독자적인 개발형태로 브라우저를 구현합니다. 자사 주력 기술도 각기 다르기 때문에 웹개발자들이 모든 브라우저에서 동일한 형태의 웹을 제공하기가 점점 어렵게 되었습니다. 이런 문제점이  www 창시자 팀 버너스리의 주도 하에 w3c라는 공식 웹 표준기구가 만들어졌고, 웹표준화 정책을 설립하여 배포중에 있습니다.

    웹 표준화는 호환성에 기반을 두고 있기 때문에 특정 브라우저나 기술에 종속적이지 않아야 합니다. 이런 웹 표준화 규정은 PC에만 국한되는 게 아닙니다. 최근 모바일웹으로 추세가 옮겨짐에 따라 브라우저 간의 크로스브라우징이 더 중요하게 여겨지고 있습니다. 때문에 특정 웹 브라우저에서만 구동되는 웹페이지는 점차 사라지고 있습니다. 그러면서 자연스럽게 웹 접근성 측면에서 호환성이 매우 중요하게 되었지요.

    기존의 테이블 코딩은 구조와 표현기능이 명확히 구분이 되지 않았습니다. 그러나 웹표준은 html마크업으로 구조를 빌딩하고 CSS로 표현 할 수 있게 되었습니다. 즉 구조와 표현이 분리 되어있다는 것이지요. 따라서 홈페이지 구현 후, 유지보수 측면에서도 효율적입니다. 그냥 끝내면 아쉬우니까 오늘은 크로스 브라우징에 관련 팁을 간략히 정리 해드릴게요 ^_^/

css의 크로스 브라우징

- css hack

1. html필터 - *html filter : ie4~6까지만 css를 적용

  사용 : *html p{color:red;}

2. 언더스코어 핵

  속성명 앞에 언더스코어(_)를 붙이면 익플 4~6까지만 적용

  사용 : p{_color:red; color:blue;} <6이전은 빨강, 6이후는 파랑으로 보임

3. 해시 핵 (많이 쓰임)

  속성명 앞에 샵#을 붙이면 ie4~7만 적용

  사용 : p{#color:red; color:blue;}

단, 위 3가지 방법은 css 유효성검사 통과 못함

4. 조건 주석문 (가장 많이 쓰임!)

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="css/ie6.css">

<![endif]-->

익플에서만 가능한 비표준 확장 방식

유효성 검사 통과

- 코딩 규칙 (항상 똑같다)

위에서부터 밑으로, 왼쪽에서부터 오른쪽으로

헤더 / 메인이미지 / 컨텐츠 / 푸터

헤더 : 로그인, 로고, 네비게이션gnb

메인이미지

컨텐츠

푸터

1. 사이트 이름 정하기 (헤드>타이틀)

2. div로 랩핑하기 (div > id=wrap 구조태그라서 식별자인 id사용

3. 헤더 / 메인이미지 / 컨텐츠 / 푸터 로 전체 뼈대를 먼저 div로 잡아야 함

<div id="header"></div>

<div id="main_img"></div>

<div id="content"></div>

<div id="footer"></div>

   구조화 (뼈대는 구룹으로 잡기 때문에 id로 작업)

   컨텐츠 안에 있는 것은 class를 사용해서 작업

4. ul>li*5>a