CSS36 CSS의 background 속성을 통한 반응형 스프라이트 애니메이션 구현 CSS를 통해 스프라이트 애니메이션을 구현하고 싶을때 주로 background 속성을 사용하게 된다.그런데 지금까지 반응형 스프라이트 애니메이션을 본적이 없어서 한번 codepen에서 찾아보게 되었다.그곳에는 여러가지 방법이 있었는데, 그중 가장 좋은 방법인 것을 찾아 애니메이션을 구현해 보았다.예제는 아래 링크를 참고하면 된다. http://codepen.io/tombennet/pen/OPombY 구현하면서 정말 확실히 알아야 했던것은 바로 background 속성의 개념이다.특히나 background-size에 관한 속성이 있는데,본 속성을 제대로 설정해놓고 시작해야 스프라이트 애니메이션을 구현 가능하다.먼저 반응형은 창에 크기에 따라 반응해야 하니까 % 속성을 사용해야 한다. 여기서 우리는 back.. 2017. 4. 24. bootstrap 템플릿 사이트 일하는 곳에서 최근 bootstrap 템플릿을 구매할 일이 있어서 이곳저곳을 알아보았다.그중 아래의 사이트가 가장 유용하다는 것을 알았다. https://wrapbootstrap.com/ 그중에서 쓸만한것들은 아래와 같다. http://wrapbootstrap.com/preview/WB0226558 http://wrapbootstrap.com/preview/WB09734H1 http://wrapbootstrap.com/preview/WB07LH680 http://wrapbootstrap.com/preview/WB03X2DG1 http://wrapbootstrap.com/preview/WB09054T6 2017. 4. 12. CSS로 로고 정렬 사이트에서는 사이트 제목이 필요하고 그 옆에 붙는 것이 바로 로고이다.흔히 로고와 사이트 제목의 간격과 라인을 잘 맞춰줘야 하는데, 본 작업은 여간 귀찮은 작업이 아니다.나는 로고에 position: absolute; 로 설정해주고 top, left 속성을 조절하며 제목과 맞추었었는데,최근 알아낸것이 로고의 position 속성을 absolute가 아닌 relative 로 설정해주고 top, left 속성을 부여해주는 방식이다. 내가 원래 썻던 방식은 로고의 상위 객체에 position: relative를 설정해주어야 하는 반면,(absolute는 relative에 종속되니까 그렇습니다.)처음부터 로고에 position: relative를 설정해주면 앞과같은 귀찮은 설정을 안 해도 top, left 로 .. 2017. 4. 8. 온라인 gradient 생성툴 웹에서 디자인 작업을 보다 세련되게 하기 위해 사용하는 것이 gradient 색상이다.하지만 gradient를 css로 하나하나 만든다는 것은 매우 힘든 작업이고,그것을 위해서 다양한 온라인 gradient 생성툴이 존재한다.그중에서 써보니 가장 좋았던 것이 아래의 사이트 이다.아무리 툴이 있다고 해도 내가 gradient를 생성하는건 정말 많은 시간이 걸리는데,다양한 예제를 제공해주니 원하는 것을 금방 선택할 수 있다. http://www.bestcssbuttongenerator.com/ 2017. 3. 10. CSS 그리드 설계 웹앱을 만드는데 있어서 css를 통한 그리드 설계는 매우 중요한 요소이다.특히나 반응형 웹 시대가 도래하고 그 중요성은 매우 커졌다.나는 평소 boostrap을 이용하여 전체적인 그리드를 설계한다.아래는 boostrap의 그리드 시스템에 대하여 잘 정리해 놓은 링크이다. http://the3.tistory.com/41#recentTrackback 2017. 3. 9. atom 에디터에서 sass 간단히 사용하기 sass를 써보니 쓰면 쓸수록 편리한거 같다.하지만 불편한 점이 하나 있었는데,바로 컴파일이 필요하다는 점이었다.컴파일을 하려면 명령창에다 명령어를 쳐야 하는데,--watch 명령어를 쳐서 실시간 감지 가능하다고 해서 그렇게 해 보았다.하지만 안먹히고 계속해서 css 파일을 지우고 명령어를 다시 쳐 줘야만 했다.. sass는 편리하지만 이런 작업이 계속되면프론트엔드 개발자 입장에서는 많은 시간 미스가 나게 된다.그래서 방법을 찾던중에 atom 에디터에서 실시간으로 sass 파일을 css로 바꿔주는 패키지가 있다는 것을 알게 되었다. (정말 짱이다. ㅎㅎ) 아래는 Sass 설명 겸 atom에서 쓰는 패키지를 설명해주는 블로그이고,내용을 읽어보니 다른 에디터에서도 이미 패키지가 나온거 같다.사용해 보니 너무.. 2017. 3. 7. 무료 아이콘 사이트 내가 사용하는 무료 아이콘 사이트 SHAREICON.NET 한군데이다.(물론 구글에 검색해서 쓰기도 한다.) 2017. 2. 13. 무료 이미지 사이트 CSS를 작성하는데 있어서 이미지 소스는 매우 중요하다고 할 수 있다.아래에는 무료로 좋은 이미지를 구할 수 있는 사이트를 정리해 보았다. 1. Unsplash 2. SplitShire 3. LITTLE VISUALS 4. New Old Stock 5. Superfamous Studios 6. Free Photos 7. 123RF 8. FREE REFE REAL LIFE PHOTOS 9. fotolia 10. pixabay 11. ava7patterns 12. freepik 13. http://iconsnara.tistory.com/category 14. cafe24 디자인뱅크: cafe24의 호스팅 서비스를 사용하고 있는 사람만 무료다. 2017. 2. 13. CSS 유용한 툴 CSS 작업을 하다보면 색이나 에니메이션 효과를 적용할때 많은 시행착오를 겪을때가 있다.그럴때 그러한 시간을 절약하기 위해 쓰는 유용한 툴들을 아래와 같이 정리해 보았다. 1. Adobe Color CCAdobe Color CC는 배색조합을 자동으로 찾아주는 툴이다.색상조합을 생각해야하는 경우 걱정을 덜어주는 유용한 툴이라 할 수 있다. 2. JPEGminiJPEGmini는 이미지의 용량을 획기적으로 줄여주는 툴이다. 3. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/본 블로그에서는 각종 하드웨어 기기에 맞는 반응형 사이즈를 제공하고 있다. 4. http://cubic-bezier.com/#.17,.67,.83,.67본 사.. 2017. 2. 13. 이전 1 2 3 4 다음