반응형 그리고 Doctype

🙋🏻‍♀️·2022년 8월 2일
0

✅반응형 웹 디자인?

  • 하나의 웹 사이트에서 PC, 스마트폰, 태블릿PC 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 따라서 유지보수가 효율적이다. 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타난다.

  • 반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 불편하게 느낄 수도 있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 불필요하게 많은 데이터를 소비할 수도 있고, 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될수 있다. 또한 IE8 이하에서 깨진다는 단점이 있다.(요즘은 IE8이하 쓰는 사람 거의 없음)




✅Doctype?

  • 문서 형식 선언(Document Type Declaration) 쉽게 말하자면 내가 작성하려는 HTML 문서가 어떤 문서 형식을 갖고 있는지 선언해주는 것을 말한다.

  • 웹 브라우저에서 문서 형식 선언이 없으면 쿼크모드로 렌더링을 해서 각 브라우저마다 다른 형태의 결과물을 보여주게 되는데 이것을 방지하기 위해서 문서 형식 선언을 하고 그로인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.

📌쿼크모드
: 오래된 웹 페이지의 하위 호환성 유지를 위해 사용되며, W3C나 IETF의 표준을 엄격하게 준수하지 않는다. 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.

  • Doctype 무선언 -> 쿼크모드로 렌더링 -> 브라우저마다 다른 결과물 출력
  • Doctype 선언 -> 표준모드로 렌더링 -> 브라우저별로 같은 레이아웃으로 결과물 출력

0개의 댓글