분류 전체보기 (224) 썸네일형 리스트형 드래그로 두개의 이미지 비교 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 다양한 캡션 hover 효과 (갤러리, 카드 등 hover효과) 데모 : https://tympanus.net/Tutorials/CaptionHoverEffects/ Caption Hover Effects - Demo 1 tympanus.net 다운로드 페이지 : https://github.com/codrops/CaptionHoverEffects GitHub - codrops/CaptionHoverEffects: A tutorial on how to create some subtle and modern caption hover effects. A tutorial on how to create some subtle and modern caption hover effects. - GitHub - codrops/CaptionHoverEffects: A tutorial on.. 카카오맵 이미지 마커 + 커스텀 오버레이 (마커 클릭시 해당장소로 이동) * 화면확인 https://umings.github.io/images/map_sample.html ------ https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/ 위 링크를 참고해 카카오맵 마커 이미지 변경 + 이미지 클릭시 해당 장소 카카오맵으로 이동하는 소스. 1. 카카오맵 api 발급받기 - 카카오맵에 아주 친절하게 잘 설명되어있음 https://apis.map.kakao.com/web/guide/ 2. 지도에 표출하고자 하는 곳의 위도, 경도 찾기 https://dday.tistory.com/616 카카오맵 위도 경도 찾기 방법 (kakao map) 오늘 포스팅에서는 '카카오맵(kakaomap)을 통해 위도, 경도 찾는 방법'에 대해 알.. css gradient 소스 생성 cssgradient.io 간단하고 직관적이게 css gradient 소스를 생성해주는 사이트. gradient가 들어간 것은 항상 여기서 색상을 찍고 소스 복사해서 사용하고있다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 감각적인 메뉴 데모 : https://tympanus.net/Development/MenuHoverEffects/salal.html Inspiration for Menu Hover Effects | Demo: Salal | Codrops tympanus.net 다운로드 페이지 : https://github.com/codrops/MenuHoverEffects/ GitHub - codrops/MenuHoverEffects: Some inspiration for menu hover effects. Some inspiration for menu hover effects. Contribute to codrops/MenuHoverEffects development by creating an account on GitHub. gi.. background circle animation loading 처음 접속시 중앙에 원형 배경과 로고 나타나기 -> 로딩완료 후 둥근 배경이 확 커지면서 화면을 꽉 채우고 사라지는것 See the Pen background circle animation loading by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css body.hide{overflow: hidden;} .loading{position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%;background: #fff; z-index: 9999; overflow: hidden;} .loading .circle{width: 300px; height: 300px; border-radius: 300p.. 온라인에서 이미지맵 만들기 image-map.net 이미지 파일을 업로드 후 이미지맵을 만드는 사이트. 지도 이미지 등 복잡한 이미지의 이미지 맵을 만들때 쓰기 좋다. tip. 복잡한 경계를 가진 이미지의 경우 policy를 선택하고 화면을 최대한 확대한 후 찍으면 좋음! https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net swiper slider custom navigation 커스텀 메뉴를 사용한 swiper slider See the Pen swiper custom navigation by publisher.kim (@publisherkim) on CodePen. html 슬라이드 1 슬라이드2 슬라이드3 슬라이드4 이전 다음 슬라이드1 슬라이드2 슬라이드3 슬라이드4 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300px;} ... text hover시 한글자씩 두근(?)거리는 효과 데모 : https://tympanus.net/Development/LetterInteractions/ Letter Interactions | Demo: Magneto | Codrops Magneto Kidnap Redraw Swing Playful Trail Crossword Move Out Weaver Leve fit, quod bene fertur, onus. tympanus.net 다운로드 페이지 : https://github.com/codrops/LetterInteractions/ 스크롤시 텍스트가 블록 효과로 나타남 데모 : https://tympanus.net/Development/BlockRevealers/ Block Reveal Effects | Overview | Codrops Your CS success starts here. Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. Apply now and become a software engineer. tympanus.net 다운로드 페이지 : https://github.com/codrops/BlockRevealers/ GitHub - codrops/BlockRevealers: Ideas for revealing content.. 스크롤 진행 상태 보여주기 https://codepen.io/daniel-hult/pen/RvReWY See the Pen Scroll Progressbar by Daniel Hult (@daniel-hult) on CodePen. 스크롤 위치에 따라 gnb에 on효과 코드가 직관적이고 깔끔하다. 초기 화면일때 gnb 첫번째 메뉴에 on효과를 넣기 위해서 메뉴 첫번째 li의 a태그에 class="active" 추가만 하면 될듯. https://codepen.io/kimyangsun/pen/rNxPmWL See the Pen 페이지 인디케이터 스크롤에 따른 active by kimyangsun (@kimyangsun) on CodePen. 광주 국밥추천 / 국밥맛집 / 조선국밥 조선국밥 - 나주 아닌 나주같은 광주에 위치한 조선국밥! 검색해보니 나주 대호동에도 조선국밥이 있는데 XXX 주소지가 광주임. - 무려 20년 넘게 장사한 국밥집. - 들깨 없는 깔끔한 국물, 돼지냄새 안남, 가격이 있는만큼 겁나 많은 양. - 같이 간 김군 왈 지금까지 먹어본 국밥중에 최고라고 ㅋㅋ - 광주에서 갈땐 모르겠는데 나주에서 갈때는 뭔 논길을 타고...가야함. 이길이 맞나? 여기에 국밥집이 있다고? 싶은 곳에 위치해있음. - 매주 일요일 휴무 - 가게 앞에 주차할만한 공간 있음. (넓진 않음) https://naver.me/GAiEFGHk 조선국밥 : 네이버 방문자리뷰 356 · 블로그리뷰 54 m.place.naver.com + 2023.07 재방문 - 6월에 한번 더 갔었는데, 그땐 밥.. codepen에 이미지 포함해서 올리고 싶을때 코드펜의 local image 를 소스에서 쓸수 있는건 돈내고 써야하는 pro 기능. 그렇다고 코드펜에서 이미지 보고싶다고 이미지만 올릴 서버호스팅을 끊는것은 비효율적. github 페이지를 이용해 아주 간단하게 이미지를 올리고 그 올린 이미지 url을 이미지 src로 쓰면 된다. 매우간단! 매우 빠름! https://dev.to/ljcdev/a-quick-hack-to-using-local-images-on-codepen-4cfp A quick hack to using local images on Codepen Handling files is a pro feature in Codepen. Free users can't add local files like images to use them... dev.to text rolling button only css 자동으로 내용이 바뀌는 버튼 (텍스트 말고 이미지로 활용해도 ok) See the Pen text rolling button only css by publisher.kim (@publisherkim) on CodePen. html 버튼내용1 버튼내용2 버튼내용1 버튼내용2 css .rolling_btn{display:inline-block; width:100px; height:100px; border-radius:100%; overflow:hidden; border:2px solid #444; background:#fff; cursor:pointer; transition:all 0.2s;} .rolling_btn:hover{box-shadow:0px 10px 10px rgba(0,0,0,0.1);} .r.. 다양한 text hover효과 https://tympanus.net/Development/TextStylesHoverEffects/ Inspiration for Text Styles and Hover Effects The next effects only work in Firefox and Chrome. tympanus.net 다양한 ui 요소들의 소스를 확인할수 있는 사이트 uiverse.io https://uiverse.io/all All elements made with CSS and HTML Discover a wide range of open-source, customizable components for web and mobile applications on Uiverse. Browse an extensive selection of buttons, cards, loaders, inputs, and more to enhance your app's user interface and elevate your design experience. uiverse.io 웹접근성 맞춘 gnb //pc 메인메뉴 마우스오버or포커스 $("#header #gnb .m_menu").on('mouseenter focusin', function () { $(this).children("a").addClass("over"); $("#header").stop().animate({ height: 410 }, 200) }); //마우스리브or포커스아웃 $("#header #gnb .m_menu").mouseleave(function () { $("#header #gnb .m_menu a").removeClass("over"); $("#header").stop().animate({ height: 110 }, 200) }) $("#header #gnb .m_menu:last-of-type").focusout(fu.. display:flex; 에서 min-height를 주면 align-itmes:center;가 안될때 해결방법 (ie) 플랙스박스:after{content:''; min-height:inherit; font-size:0;} input file 커스텀 See the Pen custom input file by publisher.kim (@publisherkim) on CodePen. html 찾아보기 css /* custom file */ .filebox { position: relative; width: 100%; } .filebox .file_input { display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #d9d9d9; width: calc(100% - 80px); color: #333; outline: none !important; box-sizing:border-box;} .filebox .file_input::-webki.. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
