부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>
참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.
브라우저 및 장치 지원 Browser and device support
부트스트랩은 최신 데스크탑과 모바일 브라우저에 최적으로 만들어졌습니다. 이 말은 오래되거나 덜 진보된 브라우저는 기능적으로는 완벽하게 모든 기능릉 사용할수 없거나 사용에 제안이 걸릴 수 있다는 것을 의미합니다.
지원되는 브라우저 Supported browsers
특히, 다음과 같은 브라우저와 플랫폼의 최신 버전을 지원합니다. Windows에서는 인터넷 익스플로러 8 ~ 11을 지원합니다. 보다 구체적인 지원 정보는 아래에 제공됩니다. 사실 8버전이하는 화면이 이상하거나 몇몇 기능이 작동되지 않는것 같습니다.
| Chrome | Firefox | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|
| Android | 지원 | 지원되지 않음 | N/A | 지원되지 않음 | N/A |
| iOS | 지원 | N/A | 지원되지 않음 | 지원 | |
| Mac OS X | 지원 | 지원 | 지원 | 지원 | |
| Windows | 지원 | 지원 | 지원 | 지원 | 지원되지 않음 |
비공식적으로, 부트스트랩은 리눅스를 위한 Chromium 과 인터넷 익스플로러 7 에서도 공식적으로 지원하는 것은 아니지만 작동은 충분히 됩니다.
인터넷 익스플로러 8 과 9 Internet Explorer 8 and 9
인터넷 익스플로러 8과 9도 지원하지만, 일부 CSS3 속성과 HTML5 요소가 완전하게는 지원하지 않는다는 점을 유념 해 주시기 바랍니다.
또한, 인터넷 익스플로러 8은 미디어 쿼리 지원을 활성화하기 위해서는 Respond.js 파일을 사용해 주십시오.
| Feature | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|
border-radius |
지원되지 않음 | 지원 |
box-shadow |
지원되지 않음 | 지원 |
transform |
지원되지 않음 | 지원, -ms 앞에 붙이면 |
transition |
지원되지 않음 | |
placeholder |
지원되지 않음 | |
CSS3와 HTML5 기능등 브라우저 지원에 대한 자세한 내용은 Can I use... 을 보세요.
인터넷 익스플로러 8과 Respond.js Internet Explorer 8 and Respond.js
인터넷 익스플로러 8에 대한 개발 및 생산 환경에서 Respond.js를 사용할 때 다음 사항을 주의하십시오.
Respond.js 및 크로스 도메인 CSS Respond.js and cross-domain CSS
다른(하위) 도메인 또는 호스팅에서 CSS와 Respond.js를 사용하면 몇 가지 추가 설정이 필요합니다. 자세한 내용은 See the Respond.js docs를 참조하십시오.
file://형식으로 Respond.js을 쓸경우 Respond.js and file://
브라우저의 보안 규칙에 의해 Respond.js파일은 본 페이지가 작동하지 않습니다. 자세한 내용은 See the Respond.js docs를 참조하십시오.
@import형식으로 Respond.js을 쓸경우 Respond.js and @import
Respond.js는 @import 통해 CSS에서 작동하지 않습니다. 자세한 내용은 See the Respond.js docs를 참조하십시오.
IE 호환성 모드 IE Compatibility modes
부트스트랩은 오래된 인터넷 익스플로러 호환성 모드를 지원하지 않습니다. IE 를 위해 최신 렌더링 모드를 사용하세요. 당신의 페이지에 적절한 meta 태그를 포함하는 것을 고려해 보세요.
<meta http-equiv="X-UA-Compatible" content="IE=edge">META 태그로 IE계열의 랜더링 모드를 최신의 버젼으로 보여주는 태그
윈도우즈 폰 8과 윈도우즈 8의 인터넷 익스플로러 10 Internet Explorer 10 in Windows 8 and Windows Phone 8
인터넷 익스플로러 10는 뷰포트 너비로 기기 너비를 구별하지 않습니다. 그래서 부트스트랩의 CSS 내에 미디어 쿼리들을 적절히 적용되지 않습니다. 이것을 수정하려면, 마이크로소프트 이슈가 고쳐질 때까지 이 문제를 해결하기 위해 다음의 CSS 와 자바스크립트를 포함해 사용할수 있습니다.
사실 저도 이 부분은 모르겠습니다. 아직 원도우즈 8을 사용해보지 못해서...
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}자세한 내용이나 사용 가이드로 이곳 Windows Phone 8 and Device-Width을 참조하세요
사파리 퍼센트 반올림
맥을 위한 최신 사파리에서, 렌더링 엔진은 우리의 .col-*-1 그리드 클래스들에서 긴 소수점 이하 자리에서 작은 문제를 가지고 있습니다. 만약 당신이 12 개의 나눠진 컬럼들을 가지고 있다면, 당신은 다른 행의 컬럼들과 비교하여 짧은 것을 볼 수 있습니다. 여기서 우리가 할 수 있는게 별로 없지만 (#9282 보기) 당신에게 몇가지 선택사항이 있습니다:
- 당신의 마지막 그리드 컬럼에 강제적인 우측정렬을 위해
.pull-right을 추가하세요 - 사파리를 위한 완벽한 반올림을 위해 비율을 수동으로 조정합니다. (첫번째 선택사항보다 더 어렵습니다)
우리는 이것을 계속 지켜볼 것이고, 만약 쉬운 해결책을 찾게 된다면 우리의 코드를 업데이트 할 것입니다.
Modal과 모바일 기기
오버플로우와 스크롤링
iOS 와 안드로이드에서 <body> 요소에 overflow: hidden 를 위한 지원은 매우 제한적입니다. 결과적으로, 당신이 두기기의 브라우저에서 모달의 상단이나 하단에 스크롤이 되어 있다면, <body> 내용이 스크롤 되기 시작할 것입니다.
가상 키보드
또한 당신의 모달에서 입력을 사용한다면 명심할 것이 있습니다. – iOS 는 가상 키보드가 실행될 때 고정 위치의 요소들이 업데이트 되지 않는 렌더링 버그가 있습니다. 여기에는 몇가지 차선책이 있는데, 당신의 요소에 position: absolute 를 포함하거나, 포커스시 수동적으로 위치를 잡을 수 있도록 타이머를 맞춰놓는 것이다, 당신의 어플리케이션에 어느 방법을 최적일지는 당신의 몫입니다.
브라우저 확대/축소
부트스트랩이나 다른 웹사이트 모두, 페이지 확대/축소는 필연적으로 몇몇 콤포넌트에서 렌더링 부산물을 보여줍니다. 어떤 이슈인가에 따라, 우리는 그것을 고칠 수도 있습니다. (우선 검색해보고 여차하면 이슈를 열어서). 하지만, 우리는 다른 마땅한 해결책이 없는 만큼 이것들을 무시하는 경향이 있습니다.
써드파티 지원 Third party support
이부분은 저의 잛은 지식으로는 이해가 되지 안흔 관계로 링크로 설명을 대신 합니다. box model and sizing at CSS Tricks. 부트스트랩설명.
나머지 접근성 Accessibility(ko), 라이센스 자주 묻는 질문들 License FAQs(ko), 부트스트랩 맞춤화 Customizing Bootstrap(ko)은 별로 설명이 필요하지 않을것 같아 링크로 대신합니다.
개인적인 말
사실 이번 포스트는 별로 크게 중요하게 생각하지 않는다고 생각해(개인적으로 이쪽 지식이 얕아서) 붙이기 식의 내용과 함께 소개 부분의 마지막으로 참고사항 정도로 알고 있으면 되는 부분같습니다.
나중에 더 많이 공부해서 좀더 나은 설명을 할수 있으면 좋겠지만 지금은 발변역과 변역된사이트에서 복사해 넣기식의 설명으로 조잡하지만 그래도 한번 시작한 이상 해야할일 같아 이렇게 적었습니다.
많은 양해 부탁드립니다.
Thanks to
'라이브러리 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 : 타이포그래피 (0) | 2014.03.26 |
|---|---|
| 부트스트랩 : 그리드 시스템 (0) | 2014.03.23 |
| 부트스트랩 : CSS 개요 (0) | 2014.03.23 |
| 부트스트랩 : 기본 템플릿과 부가 사항 (2) | 2014.03.19 |
| 부트스트랩 : 소개와 다운로드 (0) | 2014.03.16 |