본문 바로가기

JavaScript7

[javascript] offsetWidth, clientWidth, scrollWidth, clientX, pageX, screenX, 1. offsetWidth, offsetHeight https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidthhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight - element의 border를 포함한 가로, 세로 길이 2. clientWidth, clientHeight https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/clientWidthhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/clientHeight - element의 bord.. 2016. 1. 11.
[Javascript] bootstrap 사용법 및 grid bootstrap - http://getbootstrap.com/트위터 개발자가 만들었고 다양한 컴포넌트를 제공한다. 반응형 웹을 만들 때 가장 많이 쓰이는 것 같고 크로스 브라우징도 잘 해결됨 Bootstrap CDNThe folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.Copy 사실 사용법은 별거 없다. getting-started에 있는 CDN가져와서 붙이면 된다. (integrity를 포함하면 너무 길어서 일단 지움)이렇게 단순히 붙이는 것보다 제일 중요한건 grid라고 생각한다. bootstrap의 grid는 기본적으로 화면의.. 2015. 11. 3.
[Javascript] Highmap으로 네이버 부동산 지도 따라하기 github - https://github.com/ssm-lim/bPolygon/tree/master/bPolygon/highmap 다음 지도가 아닌 highmap활용으로 최종 결론이 나서 구글링과 API를 보면서 추가했던 기능을 function객체 형태로 정리하고 주석 붙어놓았다. 주로 highmaps event trigger에 대한 내용을 추가했다. 1. select - 참조 // 단일 사용 chart.series[0].data[0].select(); // 여러 데이터 중 하나만 실행 $.each(chart.series[0].data, function(idx, obj){ if(obj.properties.code == code){ obj.select(true); } }); 해당 데이터에 select를 .. 2015. 10. 20.
[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 5. 소스코드 github - https://github.com/ssm-lim/bPolygon 네이버 부동산(http://land.naver.com/)에 있는 Map같이 행정구역 경계 단위를 표시하는 것을 다음 map Api로 구현했습니다. 잘 된것 같진 않지만 이런 방법으로 대충 비슷하게 구현이 되더라...... 하는 의미에서 봐주시면 될 것 같습니다.. #dmap_event api에서 제공하는 addListener로 이벤트 처리. 마무리 버전. #dmap_cls_event class 지정으로 이벤트 처리. 만들었다가 사용할 수 없어서 별도의 주석은 달지 않았지만 dmap_event와 큰 차이는 없습니다. #highmaps highmap을 이용하여 만들었으며 클릭시 지역이 확대되는 기능이 있음. 그 외의 기능 없음... 2015. 9. 24.
[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 4. 이벤트 적용하기 이벤트를 거는 것도 다각형에 이벤트 등록하기2를 참조하면 된다. 하지만 여전히 Multipolygon이 걸림돌이다. 만약 신안군에 mouserover 이벤트를 적용 한다면, 신안군의 polygon 중 하나에 마우스를 올리면 신안군에 해당되는 모든 Polygon이 반응해야한다. 일단 해본 방법에는 두가지 방법이 있다. 1. svg path에 class 지정하기 처음에는 addListener로 적용하려면 이벤트 발생시 계속 Loop를 돌려야한다는 점이 불필요해보였기 때문에 class를 입히는 방법을 생각했다. polygon 객체는 이렇게 생겼다. Vc 아래에 map에 보이게 되는 path가 존재한다. 여기에 $(polygon.Vc[0]).addClass("polygon-grp-00") 같은 방법으로 clas.. 2015. 9. 24.
[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 3. Polygon 생성하기 geojson에 있는 내용물을 본격적으로 다음 지도에 올려봅시다. 다음 지도 API의 Polygon 생성 관련 예제는 다각형에 이벤트 등록하기2를 참고했다. geojson을 까보면 대충 이렇게 생겼다.{ "type":"FeatureCollection", "code":"0", // 임의 삽입 "name":"전국", // 임의 삽입 "crs":{ "type":"name", "properties":{ "name":"urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features":[ { "type":"Feature", "properties":{ "code":"11", // key값 변경 "name":"서울특별시" // key값 변경 }, "geometry":{ "type":"Polygon",.. 2015. 9. 24.