html 13

좌우로 움직이는 뱃지 애니메이션

좌우로 움직이는 뱃지 애니메이션(?)딱히 뭐라고 불러야 할지 모르겠어서 이렇게 제목을 적었다 회사에서 두가지 타입의 컨텐츠를 번갈아 가면서 보여줘야하는 페이지에 사용했던 애니메이션처음에 기획을 보고 좌절했지만 기획자님이 원하는 동작을 애프터이펙트로 만들어 보여주셔서 그나마 기획에 맞게 만들 수 있었다 css를 이용해서 만들었고 active클래스를 토글하는 방식으로 애니메이션을 줬다단점은, 두가지 타입만 보여줄 수 있다는....확장이 안되는 너무 큰 단점이 ㅠㅠ 실제 사이트에선 좌우로 한번씩 이동할 때마다 예제의 텍스트 영역에 odometer.js를 사용해서 숫자를 돌리는 애니메이션이 있고, 하단에 글이 써질 때마다 알림텍스트가 아래에서 위로 flip되는 애니메이션까지 들어있다 하지만 odometer.js..

웹공부/css 2018.07.26

input / textarea placeholder 색상수정

디자인에 따라 input이나 textarea의 placeholder의 색상을 변경해줘야할 경우가 종종 생긴다기본 색상이 너무 안보인다거나 너무 진하거나 디자인과 어울리지 않거나 등 등....아래 코드처럼 css만으로도 쉽게 변경할 수 있다 브라우저별 접두어를 사용해서 각 브라우저마다 다른 색상을 적용할 수 있다(왼쪽부터 크롬-익스플로러-오페라-파이어폭스) 초보 퍼블리셔의 공부정리 블로그입니다.내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다

웹공부/css 2018.06.27

상단메뉴 스크롤 고정 / a태그 클릭시 해당 영역으로 스크롤

일하다보면 종종 사용하는 스크롤고정!! 매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다 처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서 함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다 그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다 12345678 $(document).on('click','#gnb a',function(event){ var targetHash = $(this).attr('href'); var headerHeight = $('header').outerHeight(); event.preventDef..