혀래이의 개발이야기 혀래이의 개발이야기

구글 API를 사용해서 내가 만든 페이지에 구글 지도와 기능들을 추가해보자! API를 사용하기 위해서는 먼저 Key를 받아와야 한다. https://webruden.tistory.com/378 구글맵 API Key 간단하게 발급받는 방법 (Get an API Key | Maps JavaScript API) 웹사이트에서 구글 지도를 사용하기 위해서는 구글 지도 API 키를 발급받아야 합니다. 구글맵을 사용하기 위한 Maps JavaScript API 설정과 API 키 발급 과정에 대해서 설명하도록 하겠습니다. 과정은 webruden.tistory.com (잘 정리되어 있으니 참고해서 Key를 발급받아보자!) Key를 발급 받았다면 API 문서를 참고해서 코드를 작성만 하면 지도를 불러올 수 있다! http..

- 웹사이트를 돌아다니다 보면 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다. 예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다. - 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자. - HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다. - 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19..

- 상위 메뉴가 보이고 메뉴를 눌렀을 때, 하위 메뉴가 출력되게끔 하는 메뉴판을 만들어보자. - display:none 옵션으로 메뉴 구조를 숨겨놓고 클릭 시 display: block 옵션을 켜주게 끔 Jquery의 toggleClass 함수를 사용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 Insert title h..

- 추후 프로젝트에 메뉴바를 만들기 위해 메뉴바 실습을 해보기로 했다. - 메뉴바에 마우스를 올리면 메뉴바 색상, 글씨 크기, 굵기가 변경하게끔 이벤트 처리를 했다. - 메뉴바 크기가 천천히 길어지게끔 추가! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 Insert title here div{ width: 100px; height: 75px; background-color: coral; text-align: center; line-height: 75px; margin: 5p..