다음 지도 API v3 와 트위터 부트스트랩(Twitter Bootstrap) CSS

 

다음 지도 API v3를 이용해서 간단한 기능의 웹 페이지를 작성하던 중에 발견한 내용을 정리합니다.

다음 지도 API v3 를 이용해보려고, 우선 다음에서 제공하는 매뉴얼대로 테스트 페이지를 작성해서 실행해 보았습니다. 시키는대로 하면 아래와 같이 이쁘게 지도가 표시가 됩니다.

다음 지도 API v3 홈페이지 : http://dna.daum.net/apis/maps/v3

간단하게 API 사용법을 살펴본 후에, 제가 만들어보려던 웹 페이지를 만들면서 트위터의 부트스트랩 CSS 파일을 불러오도록 소스를 작성하였습니다.
트위터 부트스트랩 홈페이지 : http://twitter.github.com/bootstrap/

그렇게 트위터의 부트스트랩 CSS를 적용시키니까, 아래와 같이 지도가 제대로 표시가 되지 않더군요.

헐~...
트위터 부트스트랩에 있는 CSS 파일의 내용과 맞지 않는 부분이 있는 것 같습니다.
그래서 잠시 들여다보고 이유를 찾아냈습니다.

bootstrap.css 파일을 열어서 img 부분을 살펴보면 아래와 같습니다.

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

다음 지도 API 가 지도를 특정 div 내에 img로 올리는 모양인데, max-width: 100%; 저부분이 문제인거 같습니다.

주석 처리한 후 확인을 해보니, 정상적으로 잘 보입니다.

트위터 부트스트랩은 원래대로 두고, 웹 페이지에 아래와 같이 style 을 지정해 봤는데, 소용이 없네요.

#map img {
/*  max-width: 100%; */
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

CSS가 상속이 되니 안 될수 밖에요...
그래서, 아래와 같이...

#map img {
  max-width: none;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

설정무시를 했더니 정상적으로 표시가 되는군요.
트위터 부트스트랩 건드리지 않고, 깔끔하게 해결할 방법을 찾았습니다.