전체 글86 cursor custom circle gsap TweenMax 마우스 CURSOR GSAP를 이용한 circle custom See the Pen mouse cursor circle - gsap TweenMax by jeunseon (@jeunseon) on CodePen. HTML CSS/* cursor css 부분 */body{ background: #141212; cursor: none;}.cursor { pointer-events: none;}.cursor_ball { position: fixed; /* fixed 로 했을 경우 다른 css에 영향을 받아 cursor가 제대로 안될 경우 absolute 로 해도 된다.*/ top: 0; left.. 2024. 9. 6. 웹접근성 IR 기법 IR 기법 IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다. IR 기법에는 다음과 같은 경우가 있다 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길 때CSS background 속성을 사용하여 처리한 의미 있는 이미지 일 때 마크업으로 대체 텍스트 제공 기업들의 IR 기법 카카오사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할때/*PC용*/.ir_pm{ display:block; overflow:hidden; Font-size:1px; line-height:0; text-indent:-9999px;}/*Mobi.. 2024. 8. 23. hover 시 카드 뒤집기 효과 html css.wrap { background: #282828; height: 100vh; display: flex; justify-content: center; align-items: center;}.card1 { width: 300px; height: 450px; position: relative; perspective: 1100px;/* 입체적으로 보이도록 */}.card1 img { position: absolute; top: 0; left: 0; transition: .5s; backface-visibility: hidden; /* 뒤집히고 안보이도록 */}.card1 .front { z-index: 1;}.card.. 2024. 8. 22. top 버튼 click scroll / javascript HTML section1 section2 section3 section4 top CSS.wrap { position: relative;}.top { position: fixed; bottom: 10px; right: 10px; padding: 20px; background: #fff; border-radius: 20px; cursor: pointer;}스크롤이 스무스하게 되지 않는다면 아래의 CSS를 body에 붙인다. scroll-behavior: smooth; JS// top 버튼const topBtn = document.querySelector('.top');topBtn.addEventListener('click', () => { $('body, html'.. 2024. 8. 20. menu click scrollTop / javascript menu click 시 스무스하게 스크롤되도록. CSS 영역body, html { scroll-behavior: smooth; /* 스크롤이 스무스하게 움직이려면 필수!! */}header { position:fixed; top: 0; z-index:100; width: 100%;}.gnb { display: flex; justify-content: center;}.gnb li a { display:inline-block; color: #fff; text-decoration: none; padding: 20px 30px;} JS 영역window.onload = function(){ let menulist = document.querySelector('.gnb li a'); .. 2024. 8. 18. html 아이콘 모음 보호되어 있는 글 입니다. 2024. 8. 13. 이전 1 2 3 4 ··· 15 다음
