이미지를 가운데 정렬하기 위해 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..
그리드를 잡다 보면 margin을 통해 각 컨텐츠 간의 간격을 조절하는 경우가 많음 위아래 값을 줘야 해 처음엔 margin-bottom으로 조절했는데 맨 마지막 행에서는 margin-bottom이 필요하지 않고, 마지막 행에서 컨텐츠의 개수가 유동적으로 바뀌므로 margin-top이 더 적합함 방법은 두 가지가 있는데 ① 레이아웃을 감싼 wrap에 마진 마이너스를 줘서 상쇄시킴 ② 계산해서 마진이 없어지도록 함 두 번째 방법을 PC 4열, TB 2열, MB 1열로 가정하면 다음과 같다 PC ver li {width: calc((100% - 61px)/4); margin-left: 20px; margin-top: 20px;} li:nth-child(4n+1) {margin-left: 0;} li:nth-..
FRAMESET ? 회사에서 오래된 웹페이지의 유지보수가 들어오면 대부분 테이블로 코딩돼 있고 메인 페이지가 프레임셋으로 감싸진 경우가 많다. 프레임은 html 문서 여러개가 한 화면에 보이도록 화면의 공간을 나누는 개념으로 복수의 frame을 하나의 frameset이 감싸고 있는 구조를 가진다. iframe과 다른 점이 있다면 frame은 화면 전체를 분할할 때 사용, iframe은 화면 내에서 작은 프레임을 만들 때 사용 (화면 일부를 분할해 영상이나 지도 등을 삽입할 때 iframe 사용) frameset 하나가 문서 하나일 수도 있고 여러 개의 frameset이 모여 페이지 하나를 이루고 있는 경우도 있다. 전체가 하나의 frameset으로 되어 있고 하위 frame이 또 다른 frameset과 ..