이미지를 가운데 정렬하기 위해 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-..
- Total
- Today
- Yesterday
- 이미지맵반응형
- clockflipanimation
- flipjavascript
- flipjavascriptanimation
- 경력직웹퍼블리셔이직
- 스크롤커스텀
- 스크롤커스텀css
- marquee javascript
- flipanimation
- calendarflipjavascript
- 에러이미지마크업
- 이미지onerror
- phpif조건문
- 자동인쇄script
- 스티키효과
- 인쇄스크립트
- php조건문
- a태그다운로드
- php조건문축약형
- 2단레이아웃반응형
- 퍼블리셔이직
- calendarflipanimation
- marquee html
- sticky제이쿼리
- rwdImageMaps
- 에러이미지속성
- marquee css
- 그리드반응형
- 흘러가는텍스트효과
- 텍스트플로팅효과
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |