1. 부트스트랩소개와 사용방법 - 3

2018. 2. 9. 11:56부트스트랩으로디자인하라

1.4 서드파티(Third party) 지원

부트스트랩은 공식적으로 어떤 플로그인이나 애드온 같은 것을 지원하지 않습니다만, 웹 에서 가장 많이 사용하는 몇가지 사항, 예를 들어 구글맵을 웹사이트에 사용하게 될 경우 문제점이 발생할 우려가 있기 때문에 이런 경우 해결할 방법을 제시합니다. 먼저 구글맵이나 구글 맞ㅁ춤 검색엔진의 경우 *{box-sizing:border-box;}을 사용하게 되면 부트스트랩과 충돌이 일어날 수 있습니다. 이런 경우에는 다음의 몇가지 옵션과 같이 처리하면 문제를 피할 수 있습니다.


<style type="text/css">

.google-map-canvas,

.google-map-cavas * {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

</style>

 

위의 코드가 의미하는 것은 .google-map-canvas와 .google-map-cavas의 하위 모든 요소들의 속성을 box-sizing:xontent-box;로 처리하는 것입니다. 이 부분을 LESS로 처리하면 다음과 같이 수정할 수 있습니다.


<style type="text/css">

.google-map-canvas,

.google-map-cavas * {

.box-sizing(content-box);

}

</style>

 

이외에 부트슽랩의 접근성 문제와 라이센스에 관련된 사항 그리고 FAQ등은 부트스트랩 한글 웹사이트를 참조하시기 바랍니다. 또한, 브트스트랩은 맞춤화를 할 수 있습니다. 맞춤화라는 것은 부트스트랩의 모든 부분을 사용하는 것이 아니라 개발자 또는 디자이너가 필요한 부분만 선택하거나, CSS속성들을 필요에 의해서 맞춤화 파일로 만들어 사용하고 사이트에서 필요한 부분은 추가적으로 파일을 만드는 것을 말합니다.

부트스트랩 맞춤화에서 필요한 부분만 별도로 선택하여 컴파일하여 사용할 수 있습니다. 이는 부트스트랩의 모든 기능이 아니라 부분적인 요소들만 필요할 경우 아주 유용하게 사용할 수 있습니다.


컴파일이란 해당 요소를 추가해서 부트스트랩을 최소화하는 것입니다. 즉, bootstrap.css파일에다 추가적인 속성을 넣는 것입니다.