참고 키워드
W3C (World Wide Web Consortium) ? 팀 버너스리를 중심으로 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직
렌더링 ? html, css, javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정
html, css, js -> DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite 과정을 거친 후 웹 페이지가 로드됩니다!
(브라우저마다 렌더링 엔진이 존재하는데 웹프로그래밍을 하면서 사용되는 태그, 선택자들마다 엔진에 호환 범위가 다르기 때문에 엔진마다 웹 페이지가 다르게 동작할 수 있습니다. 하지만 w3c에서 정한 웹 표준 명세가 있기 때문에 대부분 비슷하게 보여줄 것입니다.)
출처: https://simostory.tistory.com/53
과거 웹 페이지는 넷스케이프 네비게이터용과 마이크로소프트 인터넷 익스플로러용 두 가지 버전으로만 만들어졌다.
웹의 모든 잠재력을 이끌어 내기 위해서는 웹 상호 간의 호환성이 있어야 한다는 "웹 상호 운용성"을 목표로, w3c는 웹 표준을 제정했다.
w3c에서 웹 표준을 제정할 당시에는 기존 브라우저들이 새로 만들어진 표준으로 대부분의 웹 사이트를 제대로 표현할 수 없었다.
그래서, 브라우저들은 렌더링을 할 때 표준 모드(새로운 표준으로 제작된 사이트)와 호환 모드(예전 방식으로 제작된 사이트를 렌더링하기 위한) 두 가지 모드를 제정했다.
두 가지 모드를 구분하기 위해 브라우저가 HTML에서 찾는 것 ? DOCTYPE
문서의 첫 부분에 기술된 <!DOCTYPE html>을 기준으로 표준모드와 호환모드 중 무엇으로 렌더링할지 결정됩니다!
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Hello World!</title>
</head>
<body>
</body>
</html>
익스플로러 9나 이전 버전에서는 DOCTYPE 이전에 주석이나 xml 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환모드로 렌더링합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">출처: https://webdir.tistory.com/38 [WEBDIR]
오늘날 현존하는 모든 브라우저들은 (옛날 익스플로러 6조차도) DOCTYPE을 표준 모드로 렌더링합니다. 더 복잡한 DOCTYPE을 사용할 필요도 없고 정말 특별한 경우가 아니라면 <!DOCTYPE html>을 명시하여 브라우저가 표준 모드로 렌더링하게 하는 게 권장됩니다!!
'엘리스 ai 트랙 > FE' 카테고리의 다른 글
| var vs let vs const (0) | 2022.02.21 |
|---|---|
| 스코프 (0) | 2022.02.14 |
| BFC (Block Formatting Context) (0) | 2022.02.05 |
| z-index (0) | 2022.02.02 |
| 사용할 링크 모음! (0) | 2022.01.23 |