j-query6 j-query로 구글맵 띄우기!! map_test 이번에는 구글맵을 j query를 이용해서 띄어 볼께용. 그냥 일반적인 구글맵은 앞의 포스트를 참고하세용. GEOLOCATION for Google Maps JavaScript V3 First, 준비하기 일단은 라이브러리를 받아야 합니다. >> library. 다운을 받으신 후 압축을 푸세용. 여기서 필요한건 ui폴더인데 폴더채로 작업하시는 폴더에 복사해주세용. Second, 코딩하기. 먼저 기본 자바스크립트 입니다. 필수!! 1234cs 그리고 레이아웃이죠? 보여질 부분!! 123456789101112131415161718 map page current location Colored by Color Scriptercs 여기서 중요한건 "map_style" 이라는 클래스를 추가시켜야 하.. 2015. 2. 12. HTML(J-query, javascrpit) 이미지 크기조절 1. 스타일 이용하기. style에 아래의 코드를 넣어줍니다. 12345678910cs" img{} "는 img라는 초기 스타일값이니 초기 크기는 30%로~. " img:hover{} " 는 마우스 포인터가 이미지 위에 있을때의 스타일 값 50%네용. "transition-property" 는 어떤부분에 효과를 줄꺼냐는 것이고~ "transition-duration" 는 효과시간입니다. 적용해보죠~ 이미지는 구글이미지를~ㅋㅋ 처음 실행시키면 이렇습니다. 폭이 브라우저의 30% 마우스를 그림위에 놓으면 50%로 커지네용~ 2. JavaScript& class이용하기 JavaScript는 아래의 코드와 같이 만듭니다. 123456789101112131415 $(document).ready(function().. 2015. 2. 12. PhotoSwipe로 gallery 만들기!! photoswipe PhotoSwipe를 이용하면 간단하고도 깔끔한 갤러리를 만들 수 있습니다. 단계별로 알아 볼 께용.ㅋ First step - 먼저 파일준비하기 phothswipe site 요기서 다운로드한다음에 자신의 프로젝트 폴더에 압축을 풀어 주세용. 저 같은 경우엔 C:/Program Files (x86)/Apache Group/Apache2/htdocs/photoswipe/ 요기로~ Second step - 이제 라이브러리를 적용해보죠~ 기존의 j-query는 못씁니다. photoswipe에서 제공해 주는걸로 대체해야 해용 헤더부분에 아래의 코드를 추가합니당. 1234567891011121314151617181920212223242526 div.gallery-row:after { clear:.. 2015. 2. 12. JQuery Tip!! test code 1. 브라우저 크기에 따른 스타일적용(다른 내용으로 보이도록하기) 아래와 같은 코드를 적용합니다. 1cs 아래의 코드를 예로 들어보면 12cs line 1 은 브라우저의 폭이 599까지이면 mobile이라는 css 스타일을 적용 line 2 는 브라우저의 폭이 600보다 크면 desktop이라는 css 스타일 적용 아래의 코드를 작성했다고 하면 12345678910111213141516171819202122232425262728293031323334 T his is example.This is example.This is example. This is example.This is example.This is example. This is example.This is example.Thi.. 2015. 2. 12. Do it 쉽게배우는 웹앱&하이브리드앱 미션 9 MISSION 9 이번 미션은 버튼 눌러서 페이지 이동하기, 백버튼(뒤로가기) 자동생성이네용. 파일 하나에 페이지를 여러개 구현해봅니다. 일단 소스부터 볼께요. 잡다한 것은 앞의 포스팅을 참고하세요 ㅎ 일단 첫 페이지 입니다. 1234567891011121314 Page One Page Two Page Footer Colored by Color Scriptercs 그리고 둘째 페이지 입니다. 1234567891011121314 Page Two Page Three Page Footer Colored by Color Scriptercs 소스를 받아보시면 4페이지까지 있는데 같으니깐요. 둘을 비교해보면 다른접이 라인 2에 보이실 꺼예요. 첫 페이지에는 없는 그것!! 바로 "data-add-back-btn="t.. 2015. 2. 12. HTML <j-query > 웹앱 만들어보려고 이리저리 찾다보니 J-query를 많이 사용하는 것 같네요. 그래서 공부해보려고 합니다. 사용할 책은 "쉽게 배우는 웹앱&하이브리드앱" 그리고 Dreamweaver6 드림위버는 6버전을 깔았는데 한글이 안나오네요;;; J-query는 J-Query home page 에서 다운받으면 됩니다. 아님 아래의 코드를 추가하면 바로 쓸 수도 있어용. 123cs 그리고 대충 페이지의 구조를 보면 12345 cs 이렇네요.. 예를 들면 아래와 같이~ 1234567891011 This is Header This content This is Footer Colored by Color Scriptercs data-role 이 말 그대로 역할을 의미하는듯~ 다음 포스트부터 미션하는 거 올리겠습니다~ J-q.. 2015. 2. 12. 이전 1 다음 인기글