Mozilla 한국 커뮤니티

같은 웹페이지라도 파이어폭스와 익스플로러에서 서로 다르게 보이는
이유가 무엇인가요?
예로 모질라 사이트를 봐도 서로 다르게 보이더군요.
모질라 첫 화면 같은 경우도 파이어폭스에서 보다 익스플로러가 폭, 길이
모두 큽니다. 글자 간격이나 또 세세하게 다른 부분이 많이 있구요.
왜 이런건지요...
그럼 어떤 브라우저로 보던지 똑같은 웹페이지는 어떻게 해야 만들수 있는
건가요?
아니면 저의 브라우저의 설정이 잘못되어 있는 것인가요?

브라우저마다 소스코드를 이해하여 표현하는 방식이 다르기 때문입니다.
모든 브라우저가 표준을 100% 완벽하게 준수하여 웹페이지를 표현한다면, 동일하게 보이겠지요.
현재 사용하고 있는 브라우저가 표준을 어느정도 따르고 있는지는,
http://www.webstandards.org/files/acid2/test.html

브라우저 별로 비교해 놓은 자료 참조는,
http://en.wikipedia.org/wiki/Acid2

모든 브라우저에서 거의(!!!) 동일한 웹페이지를 만들기 위해서는, 일단 웹표준을 준수하여 웹페이지를 작성하고(http://www.w3.org/에 있는 문서들을 많이 참조해야할 것입니다. 쉽지 않은 일입니다.), 브라우저마다 직접 테스트하면서 미세한 조정을 해야합니다.
http://www.positioniseverything.net/ 에 가시면 이미 알려진 다양한 팁들을 찾을 수 있을 것입니다.

zz님의 글에 덧붙이자면...

금와 wrote:모질라 첫 화면 같은 경우도 파이어폭스에서 보다 익스플로러가 폭, 길이 모두 큽니다. 글자 간격이나 또 세세하게 다른 부분이 많이 있구요. 왜 이런건지요...

이 글에서 미뤄 보건데, 금와님께서는 DTP의 개념에서 생각하시는거 같군요. 애초에 웹은 미세한 단위로 이 그림은 정확히 여기 있고, 저 글은 특정 폰트로 딱 저 위치에 저 사이즈로 있는 식으로 보여주라고 만들어진 물건이 아닙니다. 그런 기술은 PDF쪽이지요. 근래, 특히 한국의 웹디자이너들이 이런 식으로 생각하는데, 이건 근본적으로 잘못 생각하고 걸로 보입니다.

"모든 것이 똑같이 보이는" 상황은 애초에 불가능합니다. 브라우저 뿐만 아니라 언어, OS, 이 모든 것의 버전, 거기다가 컴퓨터 사양 등이 변수로 작용하기 때문에 환경이 같다는 전제가 성립되지 않는 웹에서는 모든것이 딱 정확히 똑같이 보이는건 불가능하다는걸 이해해 주시기 바랍니다.

잘 된 웹 디자인이란 pixel-perfection이 아니라 얼마나 많은 다른 환경들을 수용할 수 있는 것이란걸 명심하세요. 비유를 좀 하자면... 웹디자인은 비트맵처럼 생각하면 안 되고, 벡터처럼 생각하셔야 하는 겁니다.

웹 브라우저별 (X)HTML, CSS, DOM, ECMAScript 적용에 대한 비교는 아래를 참고하세요.

http://www.webdevout.net/browser_support.php