부트스트랩 Bootstrap 3 시작 2편

내용이 길어 전편에 이어갑니다.

부트스트랩 버젼 2에서는 IE 7까지 지원을 했었습니다. 물론 버젼 3에서도 IE7도 충분이 잘 동작합니다.

동작하는데는 문제가 없지만 부트스트랩 버젼3에서는 CSS3 를 많이 사용함으로 IE9 이하에서는 동일하게 보여지지 않을 수 있습니다.

또한 미디어쿼리를 지원하지 않기 때문에 respond.js 등을 링크 시켜야 합니다.

호환성을 위해 IE 최신모드를 사용하도록 head 안에 아래와 같은 코드를 추가해야 합니다.

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

이것은 IE 최신버젼을 사용하라는 내용입니다.

Windows Phone 8 and Internet Explorer 10

윈도우8과 익스플로러 10에서 뷰포트 장치의 너비를 구분하지 못하는 일이 있어 미디어쿼리를 제대로 설정할 수가 없습니다.

MS쪽에서 이 문제를 해결할때까지 아래와 같은 방법으로 해결하라고 합니다.

자세한 지침은 여기 링크를 참고하세요.

나머지는 사파리에서의 버그 문제를 해결하고 안드로이드와 IOS에서 body 에 대한 문제를 해결하는 overflow: hidden 에 대한 이기이고, 가상 키보드에 대한 이야기 등입니다.

부트스트랩 3은 공식적으로 타사 블러그인이나, 추가 기능을 제공하지 않지만 몇가지 잠재적인 문제가 있는것에 대해서 해결책을 제시 합니다.

그 예중 한가지가 부트스트랩 3을 사용하면서 구글 지도를 사용하는 경우입니다.

구글 지도의 너비를 content-box 로 하라는 이야기 입니다.

부트스트랩 버젼 3에서는 skin navigation 즉 메뉴 건너뛰기를 제공합니다.

이는 gnb(메인메뉴, 글로벌메뉴) 등을 건너뛰고 바로 본문으로 가게하기 위함입니다.

스크린리더나 컴퓨터를 다루는데 있어 마우스를 사용하지 못하는 사람들을 위해 만들어놓은 기능인데요. 우리나라에서도 많이 사용합니다.

접근성에서 아주 기본적인건데요. 기본 클래스를 부트스트랩 3에서는 제공하고 있습니다.

클래스는 sr-only 인데요. body 다음에 바로 사용해야 정상적으로 사용하는 겁니다.

간단한 예는 아래의 이미지를 참고하시면 됩니다.'

나머지는 중첩된 header 와 추가 리소스에 대한 이야기 입니다.

부트스트랩 버젼 3은 개인,회사 모두 상업적이던 개인적이던 다운로드 및 사용이 가능합니다.

단 재배포할때는 부트스트랩 사본을 포함해야 하며, 쪼개서 배포하지 말라고 합니다.

부트스트랩 버젼2에서도 그랬듯 버젼 3에서도 사용자들이 커스터마이징 할 수 있도록 도구를 제공합니다.

홈페이지 상단 우측에 Costomize 를 클릭하면 사용자가 원하는 색상 등 다양한 것을 지정할 수 있으며, 원하는 파일만도 다운로드 받을 수 있습니다.

사용자가 원하는대로 지정이 모두 끝나면 하단에 Compile and Download 를 클릭하여 지정한 형태의 파일을 받을 수 있습니다.

클래스를 변경하거나 수정하려면 less 파일을 수정하면 됩니다.

다음은 CSS 에 대해서 알아보겠습니다.

demun(대문블로그)