-
Html, CSS 2017‧08‧01
css3 animation 키프레임 멈추기
CSS3로 키프레임 애니메이션을 작동하다가 멈추고 싶을 때가 있다. 대부분 hover나 Class 를 추가하여 멈추는 동작을 넣고 싶을 경우다. -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; -webkit-animation: none !important; 맨 마지막 줄에 -webkit-animation: none 이 있는 이유는 아이폰 ios 사파리에서 paused; 동작이 제대로 작동하지 않는다. 그렇기 때문에 대안으로 만들어진 코드이다.
-
Html, CSS 2015‧01‧06
css3 - 아이폰에서 스크롤이 부드럽지 않고 버벅일 때
overflow:scroll; -webkit-overflow-scrolling:touch; 위와 같이 써주면 스크롤이 자연스럽게 변하게 된다.
-
Javascript, jQuery 2014‧08‧26
IE9에서 script5022 DOM Exception: INVALID_CHARACTER_ERR (5) 오류 났을 때
반응형웹 사이트 프로젝트를 할 때 크로스 브라우징 검수를 할 때가 있다.작업하는 PC의 IE가 10이고 개발자 도구를 이용하여 IE 9 이하를 테스트하는 것과 실제 순수 IE9 이하와는 결과가 틀리게 나오는 경우가 많다. 또한 IE Tester도 비슷하게 구현하는 것인지라 최대한 가상 PC를 설치하여 테스트함을 추천한다. 위에 언급한 것과 같이 개발 도구에서 에뮬레이션으로 IE9로 설정하고 테스트 하여도 자바스크립트 […]
-
Html, CSS 2014‧05‧20
CSS3 - 이미지 또는 div 회전
회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다. .spinimage{ -webkit-animation: spin 4s infinite linear; -o-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} […]
-
Html, CSS 2013‧09‧11
css3 - 이미지 교체
미디어쿼리를 사용할 때 이미지를 교체할 경우가 있다. #id img{ content: url("image.png"); } # id 자식 요소 중에 img가 있다면 image.png로 이미지를 노출한다. 하지만 이 방법은 아직 추천하지 않는다. 크롬 조차 제대로 작동하지 않을 때도 있고 css3이다보니 제대로 안보여지는 경우가 많다. 알아두면 좋은 정보니까 메모! img[data-src-desktop] { content: attr(data-src-desktop, url); } 위 방법도 있다고 하니 참고!
-
2013, 2013-2014 2013‧09‧07
2013 Korea Mobile Ad Awards
2013 대한민국 모바일 광고 시상식과 관련된 프로젝트가 진행되어 웹사이트를 제작 및 운영을 진행하였다.반응형웹으로 제작되었으며 디자인 및 html5, css3, jquery를 직접 코딩하였다. 레이아웃은 싱글 페이지에 세로로 스크롤 되는 형식을 취했다.초반 디자인 시안에서 사이트의 성격에 맞춰 클라이언트의 요청으로 많이 걷어낸 상태다. < 디자인 시안 >