공부기록용

프로젝트에 간단한 지도를 넣어보고자 함 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 로그인애플리케이션 등록정보를 등록 Javascript키 가져오기사용할 곳을 정해서 도메인 등록(나는 web에서 사용할 것이므로 web, 사용할 도메인을 등록해줌)제품 > 지도 로컬 > 문서보기 >  https://apis.map.kakao.com/로 이동하게 됨 나는 웹에서 사용할 것이므로 web으로 접속하기  사용하고자 하는 지도의 디자인을 골라준다. 종류가 아주아주 다양하다! (나는 딱 지도랑 위치 마커만 ..

✔️나는 slide 이미지 부분은 형식에 맞는 class명을 써주었고 그 외 다른 것들을 class이름을 다르게 작성하였다.  BLUE THEMA > RED THEMA ..

📌만들어보기📌프로젝트에 적용을 해보면서 같은 범위 즉 swiper로 페이지네이션이든 버튼이든 다 묶어야 하는건가라는 의문과 하나의 페이지에 여러개의 swiper을 적용할 때 css나 옵션을 다르게 줄 때 어떻게 해야 하나를 고민하게 되었다. 그래서 .red와 .blue라는 큰 틀안에 페이지네이션과 네비를 분리해서 만들어보았다. 여기서 나는 slide를 위한 .swiper > .swiper-wrapper > .swiper-slide의 class명은 그대로 가져가되 페이지네이션, 네비게이션의 이름은 다르게 주었고, 그것들을 모두 감싸는 것으로 .blue와 .red를 사용했다. BLUE THEMA ..

슬라이드를 구현할 수 있는 플러그인  https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.comCDN으로 연결하기(min: 압축파일)swiper의 기본 구조는 제일 상단에 .swiper 중간단에 .swiper-wrapper 마지막 슬라이드 하나하나가 .swiper-slide라는 class명을 가지고 있다. 그 외 사용하는 것으로는 페이지네이션을 위한 .swiper-pagination 슬라이드의 이동을 위한 네비게이션은..

🔴자동슬라이드 구현하기 body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { width: 100%; height: 250px; overflow: hidden; position: relative; } ul { overflow: hidden; /* width: 208..

🔴무한슬라이드 구현하기 무한으로 슬라이드되도록 구현하고자 하는데 처음의 앞과 마지막의 뒤로 슬라이드가 더이상 이어지지 않는다. 이런 형태를 만들어주기위해 요소를 복제해 앞뒤로 넣어주도록 한다. body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { border: 5..