조금씩 천천히

아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 속 텍스트의 길이가 바뀌거나 버튼의 width가 넓어질때 등등 유연하게 대응하지 못할 경우가 많았다 그래서 두가지 종류의 버튼을 다시 만들어 보았다 흰색 버튼은 버튼의 width가 고정되어있고 글자가 길어져서 버튼의 텍스트가 떨어지더라도 아이콘이 항상 가운데에 위치할 수 있도록 만든 것이다 보라색 버튼은 최소 width가 있는 상태에서 글자 텍스트가 길어지거나 width가 100%가 되더라도 아이콘이 항상 텍스트 옆에 붙어있는 상태로 만들어졌다 이미지처럼 흰색 버튼의 텍스트는 버튼의 width가 정해져있어 텍스트가..

최근 작업을 하다가 position sticky라는 새로운 속성을 알게되었다position은 4가지만 있는줄 알았는데 아직 모르는 속성이 있었다니!그래서 정리해보는 position 속성 우선 position에는 총 5가지가 있다. static, relative, absolute, sticky 그리고 static을 제외한 4가지 속성은 각각 top, left, bottom, right를 사용하여 위치를 지정할 수 있다 #### position : static static 요소는 position속성을 지정하지 않은 기본적인 속성이다 1234567891011121314151617181920 div{ padding:10px; width: 500px; text-align: center; box-sizing: bo..

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

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