표준과 비표준에 대한 고찰
로빈아빠
본문
웹사이트 개발 관점에서 웹브라우저를 분류를 해보면 크게 인터넷익스플로러(IE) 와 비IE(파이어폭스(FF), 오페라, 사파리, 모질라 등)로 나누어 보면 되겠다.
비IE 는 대부분 웹표준(W3C)에 기반하여 만들어졌기 때문에 표준을 지원하지 않는 IE 와는 다르게 약간의 표현 방식에 차이가 있다.
따라서 IE 와 FF 두 개의 브라우저만 지원되게 된다면 거의 모든 브라우저에 정상적으로 보여진다고 가정을 하여도 되겠다.
표준 방식을 채택했을 경우의 장점으로는 크로스브라우징환경에서 브라우저에 따른 제약을 많이 받지 않는다. 다만, 표준을 채택함에 따른 제약을 가져오게 된다.
다음은 표준 방식을 채택했을 경우에 따른 제약 사항이다.
[제약 사항 나열]
․ 모든 속성이 상속이 되기 때문에, 매번 속성을 지정해 주는 번거로움이 있다.
․ 심지어 text-align (정렬) 마저 상속이 되기 때문에 굉장히 번거롭다.
․ 또한 익스플로러에서는 Event 마저 상속이 되어 버리기 때문에 굉장히 번거롭다. -> onresize에서 문제가 생김
표준을 채택하여 작성하였을 때는 위와 같은 문제를 가지고 있다. 표준에 기반하여 프로그램이 작성되는 것이 추세이기는 하지만, 위와 같은 모든 문제를 풀기에는 너무나 많은 시간이 소요된다. 이럴것이면 차라리 비IE 용과 IE 용으로 나누어서 해결하는 편이 낳을 것이라고 판단된다.
따라서 비표준을 이용하여, 각각의 브라우저에 맞게 css 코드를 달리하여 주면 되겠다.
#info_float_layer_box {width:295px;height:20px;border:1px solid #aaaaaa;background-color:#ffffff;padding:5px;}
* html #info_float_layer_box{width: 310px;height: 32px;}그림 1 비표준을 이용하였을 경우 css 처리방법
위를 보면 #로 시작하는 부분은 익스플로러를 제외한 브라우저를 위한 부분이고 * 부분은 IE 전용 코드 이다. 즉, 각 브라우저에 따라 css 코딩을 달리해 주는 기법을 쓰면 비표준 문제는 해결된다.
HTML 4.01 Strict
아래와 같은 코드 삽입으로 표준화된 html 문서 제공이 가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
위와 같은 코드를 사용하면 기존의 방식과 다름을 느낄 수 없다. 기존 브라우저와의 호환성을 맞추면서 새로운 규격을 준수하기 떄문에 그렇다.
XHTML 1.0 Strict
※ XHTML 은 더욱 더 엄격하다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
필자는 비표준을 이용하는 것에 찬성이다. 물론 각 브라우저에 따라 불편함이 있지만, 표준을 사용하였을때의 불편함보다는 덜 하기 때문이다.
물론 border 와 padding 과 같은 미세하게 디자인이 엉클어지는 경우도 발생하지만, IE은 * html 을 사용하면 해결이 되기 때문에 상관없다.
비IE 는 대부분 웹표준(W3C)에 기반하여 만들어졌기 때문에 표준을 지원하지 않는 IE 와는 다르게 약간의 표현 방식에 차이가 있다.
따라서 IE 와 FF 두 개의 브라우저만 지원되게 된다면 거의 모든 브라우저에 정상적으로 보여진다고 가정을 하여도 되겠다.
표준 방식을 채택했을 경우의 장점으로는 크로스브라우징환경에서 브라우저에 따른 제약을 많이 받지 않는다. 다만, 표준을 채택함에 따른 제약을 가져오게 된다.
다음은 표준 방식을 채택했을 경우에 따른 제약 사항이다.
[제약 사항 나열]
․ 모든 속성이 상속이 되기 때문에, 매번 속성을 지정해 주는 번거로움이 있다.
․ 심지어 text-align (정렬) 마저 상속이 되기 때문에 굉장히 번거롭다.
․ 또한 익스플로러에서는 Event 마저 상속이 되어 버리기 때문에 굉장히 번거롭다. -> onresize에서 문제가 생김
표준을 채택하여 작성하였을 때는 위와 같은 문제를 가지고 있다. 표준에 기반하여 프로그램이 작성되는 것이 추세이기는 하지만, 위와 같은 모든 문제를 풀기에는 너무나 많은 시간이 소요된다. 이럴것이면 차라리 비IE 용과 IE 용으로 나누어서 해결하는 편이 낳을 것이라고 판단된다.
따라서 비표준을 이용하여, 각각의 브라우저에 맞게 css 코드를 달리하여 주면 되겠다.
#info_float_layer_box {width:295px;height:20px;border:1px solid #aaaaaa;background-color:#ffffff;padding:5px;}
* html #info_float_layer_box{width: 310px;height: 32px;}그림 1 비표준을 이용하였을 경우 css 처리방법
위를 보면 #로 시작하는 부분은 익스플로러를 제외한 브라우저를 위한 부분이고 * 부분은 IE 전용 코드 이다. 즉, 각 브라우저에 따라 css 코딩을 달리해 주는 기법을 쓰면 비표준 문제는 해결된다.
HTML 4.01 Strict
아래와 같은 코드 삽입으로 표준화된 html 문서 제공이 가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
위와 같은 코드를 사용하면 기존의 방식과 다름을 느낄 수 없다. 기존 브라우저와의 호환성을 맞추면서 새로운 규격을 준수하기 떄문에 그렇다.
XHTML 1.0 Strict
※ XHTML 은 더욱 더 엄격하다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
필자는 비표준을 이용하는 것에 찬성이다. 물론 각 브라우저에 따라 불편함이 있지만, 표준을 사용하였을때의 불편함보다는 덜 하기 때문이다.
물론 border 와 padding 과 같은 미세하게 디자인이 엉클어지는 경우도 발생하지만, IE은 * html 을 사용하면 해결이 되기 때문에 상관없다.
관련링크
댓글목록
등록된 댓글이 없습니다.