CSS guidelines https://cssguidelin.es/#anatomy-of-a-ruleset CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS CSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies all over the world write and manage better quality UIs for their products and teams. I am available for hire. CSS ..
이미지를 가운데 정렬하기 위해 css에 transfrom translate(-50%,-50%) 사용시 이미지가 흐려지는 경우가 있는데 transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) 위처럼 + 0.5px씩 더해주면 흐림 현상이 덜함 그런데 익스플로러에서는 translate 안에 calc가 들어가면 적용이 안됨 이런 경우에는 calc로 쓴 부분을 아래와 같이 분리해주면 됨 transform: translate(-50%, -50%) translate(0.5px, 0.5px)
창 닫기
유지보수를 진행하면서 기존에 있는 라이브러리로 인해 제이쿼리가 실행되지 않는 경우가 있음 함수 제일 위에 jQuery.noConflict();을 써 주고 함수에서 $로 쓰는 부분을 jQuery로 바꿔 작성하면 됨 이외에 몇 가지 방법이 더 있음 (참고 url : yubylab.tistory.com/entry/%EB%8B%A4%EB%A5%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A1%9C%EB%B6%80%ED%84%B0-jQuery-%EB%B3%B4%ED%98%B8%ED%95%98%EA%B8%B0)
tools.arantius.com/tabifier
scrollTop('js-button', 500); function scrollTop(elem,duration) { let target = document.getElementById(elem); target.addEventListener('click', function() { let currentY = window.pageYOffset; let step = duration/currentY > 1 ? 10 : 100; let timeStep = duration/currentY * step; let intervalID = setInterval(scrollUp, timeStep); function scrollUp(){ currentY = window.pageYOffset; if(currentY === 0) {..
페이지 로드 시 텍스트가 자연스럽게 둥실 떠오르는 css transform animation을 만들었는데 유독 모바일 iOS에서만 깜빡거리거나 버벅거리며 애니메이션이 제대로 실행되지 않음 여러 단계로 쪼갰던 애니메이션을 from과 to로 간단하게 수정했는데 그래도 아이폰에서는 애니메이션이 깜빡거림 + 버벅거림 stackoverflow에 Animation flickering을 검색해 알아낸 여러가지 방법들 -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibili..