퍼블리싱 (181) 썸네일형 리스트형 head fixed table with custom scrollbar jquery.mCustomScrollbar.js 를 사용해 커스텀 스크롤바를 넣은 head fixed table See the Pen head fixed table with mCustomscrollbar by publisher.kim (@publisherkim) on CodePen. html 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 css /* table */ .tbl_wrap{width:60.. fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과) See the Pen 풀사이즈 header + gnb by publisher.kim (@publisherkim) on CodePen. html 대메뉴1 서브1 서브2 서브3 서브4 대메뉴2 서브1 서브2 서브3 서브4 대메뉴3 서브1 서브2 서브3 서브4 대메뉴4 서브1 서브2 서브3 서브4 css /* header */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); * {font-family: 'pretendard';} body{background: url(https://umings.github.io/images/bg_dark.jpg) no-repeat center / cov.. 아주 간단한 text hover효과 https://codepen.io/argyleink/pen/poEjvpd See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen. 1초 단위로 데이터가 들어가는 highchart See the Pen 1초 단위로 데이터가 들어가는 highchart by publisher.kim (@publisherkim) on CodePen. html css body{ background: #282d3a; } .chart1{ width: 300px; height: 300px; border: 1px solid; box-sizing: border-box; padding: 10px; } .chart2{ width: 900px; height: 600px; border: 1px solid; box-sizing: border-box; padding: 10px; } .MAT20{ margin-top: 20px; } .highcharts-tooltip-box { fill: black; fill-opacity:.. swiper slider text fadein 효과 See the Pen swiper text fadein by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 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:300.. slick slider progress bar and page fraction example 프로그래스 바 + 페이징 fraction 들어간 slick slider See the Pen slick slider progress bar and page fraction example by publisher.kim (@publisherkim) on CodePen. html 첫번째 슬라이드 두번째 슬라이드 이전 멈춤 다음 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slide_wrap{width:600px; height:300px; margin: 0 auto;} .slide_wrap .item{width:100%; height:300px; box-sizing:bord.. 드래그로 두개의 이미지 비교 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)을 통해 위도, 경도 찾는 방법'에 대해 알.. 감각적인 메뉴 데모 : 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.. 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. 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 웹접근성 맞춘 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;} 이전 1 2 3 4 5 6 7 ··· 10 다음
