Bootstrap 3.3.7 | Bootstrap 기본 | <meta> 태그에 대해


Bootstrap 자체의 기능은 아니지만, Bootstrap 이용의 Web 페이지를 준비할 때 반드시 작성해 두어야 하는 <meta> 태그가 있다. 그것들에 대해서도 부족한 것을 채워 두도록 하자.

IDEALLY 호환성 보기에 대해

<meta http-equiv = "X-UA-Compatible"content = "IE = edge">

이 태그는 Internet Explorer 대책을 위한 것이다. IE는 버전에 따라 표시가 바뀐다. 경우에 따라서는 마음대로 “호환성보기"라는 모드를 사용하여 IE7의 예전 버전에 따라 표시를 해 버리는 일이 있다. 이를 금지하는 태그가 이것이다. 이 태그를 넣으면 IE에서도 호환성 보기가 되지 않고, 표준 표시대로 된다.

뷰포트의 스케일 설정에 대해

<meta name="viewport" content="width=device-width, initial-scale=1">

이것은 스마트 폰의 Web 사이트를 작성을 해 본 사람이라면 알고 있을 것이다. 스마트 폰의 화면 해상도에 관계없이 동일하게 표시하기 위해 작성한다. 스마트 폰은 “뷰포트"라는 가상 스크린과 같은 것에 Web 페이지를 렌더링하고, 그것을 디바이스의 화면에 집어 넣은 것 같이 표시하고 있다. 그것을 잘 조정해 주기 위한 것이다.

이것들은 IE를 사용하지 않고, 스마트 폰도 이용이 아니라면 불필요한 것이지만, 지금의 시대에는 어떤 환경에서 액세스 올지 알 수 없기 때문에 반드시 기술해 두는 편이 좋다.