웹사이트가 다른 브라우저에서 다르게 보이는 이유는 무엇입니까?
브라우저의 역할
브라우저의 주요 기능은 브라우저 창에 표시하도록 서버에 요청하여 html 문서, pdf, 이미지 등과 같은 사용자가 선택한 웹 리소스를 표시하는 것입니다.
html과 같은 일부 문서의 경우 css는 브라우저의 렌더링 엔진에서 해석해야 합니다.
차이의 이유
브라우저마다 렌더링 엔진이 다르고 HTML 및 CSS와 같은 소스 코드를 약간 다른 방식으로 해석하는 경우가 많기 때문에 웹사이트 모양이 다르거나 제대로 표시되지 않을 수 있습니다.
상자의 차이
CSS에서 div, h, p 등의 각 요소는 box라는 개념을 가지고 있습니다. 상자는 외부에서 여백, 테두리, 패딩 및 텍스트나 이미지와 같은 콘텐츠로 구성됩니다.
box {
width: 400px;
}
위와 같이 콘텐츠의 너비를 정의하는 경우가 있는데 World Wide Web의 주요 국제 표준 기구인 W3C box model은 너비를 콘텐츠 너비로 정의하는 반면 Internet Explorer box model은 다음 중 하나입니다. 주요 브라우저이며 처음부터 Windows 컴퓨터에 설치되어 너비를 콘텐츠 + 패딩 + 테두리로 정의합니다.
DOCTYPE
html 코딩 경험이 있으신 분들은 아래와 같은 코드를 보셨을 것입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
또는
<!DOCTYPE html>
DOCTYPE은 HTML 태그가 아니라 "문서 유형 정의"를 나타내는 DTD 선언입니다.
HTML은 SGML(Standard Generalized Markup Language) 기반 언어이며 DOCTYPE 선언과 DTD는 SGML에서 파생됩니다.
많은 웹 브라우저는 DOCTYPE 선언 및 해당 내용의 유무에 따라 표준 호환 모드 및 호환 모드와 같은 다양한 방식으로 문서를 표시합니다. 이 표시 방법의 전환을 DOCTYPE 스위치라고 합니다. DOCTYPE 스위치가 작동하는 방법에 대한 간단한 설명은 DOCTYPE 선언이 HTML 문장의 시작 부분에 배치되지 않으면 이전 버전의 브라우저 표시에 맞게 조정된다는 것입니다.
HTML5는 더 이상 SGML을 기반으로 하는 언어가 아닙니다. 따라서 HTML4까지 사용된 언어와 달리 DTD가 필요하지 않습니다. 그러나 DOCTYPE 스위치를 사용하면 브라우저가 표준 호환 모드에서 작동할 수 있으므로 HTML5에서는 DOCTYPE 선언 자체가 여전히 필요합니다.
추가 지식
브라우저에 대해 더 알고 싶다면 here을 클릭하여 내가 생각하는 최고의 리소스에 액세스하십시오.
위의 텍스트 링크를 클릭할 수 없으면 아래 URL을 복사하여 인터넷 브라우저에 붙여넣으십시오.
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Reference
이 문제에 관하여(웹사이트가 다른 브라우저에서 다르게 보이는 이유는 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duck_programmer/why-does-your-website-look-different-in-different-browsers-283e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
