Front53 [JQuery] 자동 슬라이드/무한 슬라이드 배너 만들기(외부 소스X) jsp(HTML) mtSlideDiv는 몇 개가 늘어나든 상관없다. ❮ ❯ javascript(jQuery) CSS /* Slideshow container */ .slideshow-container { max-width: 1440px; position: relative; margin: auto; margin-top: 120px; } /* effect */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes f.. 2021. 7. 29. [CSS] :before :after 삭제(가상 요소 반응형 웹에서만 삭제하기) 데스크탑 모드에서 이렇게 선언한 요소가 있다고 가정했을 때 .title:before { content: ""; position: absolute; width: 28px; height: 28px; } 반응형으로 적용되는 쪽에서는 content: none; 만 붙여주면 손쉽게 제거가 가능하다. @media (max-height: 500px) and (orientation: landscape), screen and (max-width: 768px) and (orientation: portrait) { .title:before { content: none; } } 2021. 7. 27. [네이버지도API/AJAX] 마커 여러 개 띄우기/디비에 있는 데이터 지도에 표시하기/지도를 움직일 때마다 중심 좌표 얻기/현재 화면에 보이는 마커만 표시하기 사실 원하는 메소드는 네이버 지도 API 홈페이지에서 찾는 게 제일 효율적입니다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Marker.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io javascript // x,y = 지도를 오픈할 중심 좌표 값 function storeOpen(x, y) { var MARKER_ICON_URL = 'resources/img/이미지아이콘경로.png'; // 파라미터로 받은 좌표 값으로 지도 생성 var map = new naver.maps.Map('map', { cen.. 2021. 7. 15. [네이버지도API] 해당 지역에 마커 찍기, 마커 아이콘 변경 이 포스트는 ClientID 발급 이후의 과정을 담고 있는 포스트입니다. 예제를 보러오신 분은 구분선 아래 소스를 봐주세요. 우선 네이버 클라우드 플랫폼에 가입해야합니다. 가입 절차는 아래 주소를 참고하세요. https://winteri-i.tistory.com/18 [Web/ 네이버 지도 API] 네이버 지도 API 사용방법 - Naver map/ Naver map api 애증의 네이버 지도 API... Swift로 프로젝트 할 때 사용해 본 경험이 있는데, Swift에 대한 자료가 많지 않다보니 많이 헤맸던 기억이 난다. 겨우겨우 마커 표시와, 마커 색 바꾸기, 처음 앱 실행시 winteri-i.tistory.com 어플리케이션 등록 화면이 찾기 어렵다면 아래 주소를 참고하세요. 어플리케이션 서비스는.. 2021. 7. 12. [CSS3] 반응형 웹(Responsive Web) 기초 반응형 웹(Responsive Web) - 정의 : 하나의 웹 사이트에서 pc, 태블릿pc, 스마트폰 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 - 웹사이트를 pc용과 태블릿pc, 모바일 용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다는 장점이 있음. - 웹페이지의 내용을 수정할 경우, 하나의 웹 페이지만 수정하면 pc와 태블릿 px 모바일등 다양한 디바이스에서 동일하게 반영되는 장점이 있음. - 반응형 웹의 핵심 기술은 가변 그리드, 유연한 이미지, 그리고 미디어 쿼리가 중요한 핵심 개념임. - 가장 많이 사용되고 있는 반응형 웹 제작 도구는 부트스트랩 프레임워크가 있음. * 고정 그리드 레이아웃은 .. 2021. 4. 29. [JQuery-3.6.0] 효과-애니메이션(Animation) 처리 효과 관련 메서드 * 콜백함수 : 효과가 완료되면 실행되는 함수. 생략 가능. - hide() : 요소를 숨기는 기능. 형식) $("요소선택").show("효과속도(ms)", 콜백함수) - show() : 숨겨져있던 요소를 노출시키는 기능. 형식) $("요소선택").show("효과속도(ms)", 콜백함수) - toggle() : 선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 하는 기능. 형식) $("요소선택").toggle("효과속도(ms)", 콜백함수) - fadeIn() : 숨겨져있던 요소가 점점 투명해 지면서 노출이 되는 기능. 형식) $("요소선택").fadeIn("효과속도(ms)", 콜백함수) - fadeOut() : 노출이 되어 있던 요소가 점점 사라지는(불투명) 기능. 형식) $("요소.. 2021. 4. 29. 이전 1 2 3 4 ··· 9 다음
