본문 바로가기

CSS

스타일시트로 애니메이션 효과를 낼 수 있어요 CSS Animation 안녕하세요 키다리디자이너입니다. 오늘은 jQuery나 자바스크립트 등을 이용하지 않고 CSS만으로도 간단한 애니메이션 기능을 구현할 수 있는 방법을 소개해 드리겠습니다. CSS3의 transition을 이용하면 지정된 시간과 속도로 단순히 CSS의 속성을 부드럽게 전환할 수 있는데요, animation은 이것보다 더 구체적이고 다양한 애니메이션 효과를 낼 수 있으니 잘만 사용하면 코딩할 때 개발자에게 아쉬운 소리 할 일도 적어지겠죠? 기본 규칙 CSS애니메이션은 ‘@keyframes 애니메이션이름(식별자)’를 사용하여 애니메이션이 수행되는 동안 정해진 지점에 속성을 줍니다. 그리고 'keyframes'식별자는 해당되는 CSS속성에 직접 영향을 미칩니다. 더 쉽게 말하자면 애니메이션이 10초간 재생되면 1.. 더보기
알면 편합니다. CSS 선택자 (CSS Selector) 1부 안녕하세요 키다리디자이너입니다. 오늘은 코딩할때 알아두면 편한 CSS의 선택자에 대해 알아보기로 하겠습니다. 선택자(selector)는 말 그대로 CSS에서 지정한 조건에 따라 해당 부분만 따로 속성을 주거나 속성을 제거할 수 있는 코딩 방법입니다.다시 말해 코딩 내용중에 ~~가 있다면 그 부분만 따로 스타일을 지정하거나 없앨 수 있다는 것입니다. 잘 이해가 되지 않아도 괜찮습니다. 아래에 작성된 내용을 하나씩 보면 금방 이해가 되실거에요. 1. > '>'는 특정 태그 아래에 태그나 클래스등을 모두 선택합니다. 아래 코드를 보겠습니다. 이것의 실행 결과입니다. CSS를 정의한 부분에 ul>li가 보이실 것입니다. 바로 이런 것들이 선택자이며 정해진 조건에 따라 코딩에 반영됩니다. ul>li 은 ul태그 .. 더보기
CSS3 - display:box 에 대해 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 CSS의 display 속성 중 box라는 속성에 대해 알아보겠습니다. 코딩을 나름 오래하신 분들조차 의외로 이 속성은 잘 모르고 안쓰시는데 그럴 법도 한 게 예전에는 이 속성을 제대로 지원한 브라우저가 많이 없었기도 했고 굳이 이것을 사용하지 않아도 코딩하는데 어려움을 느끼지 않았기 때문입니다. 그러나 이제는 많은 브라우저들이 이 속성을 지원하고 있고...(IE는 아직도 완벽히 지원하진 않네요) 반응형웹을 위한 구성에는 단순히 float를 사용하는 것보다 많은 장점들이 있기 때문에 다시 주목받고 있는 속성입니다. 특히 iOS나 안드로이드 같은 모바일 환경에서 지원되고 있기 때문에 모바일웹사이트를 제작할 때 유용합니다. display:box; 이 속성은 블록에 f.. 더보기
코딩 공부에 유용한 사이트들 안녕하세요. 키다리디자이너입니다. 오늘은 HTML, CSS를 공부하려는 분들을 위해 도움이 되는 사이트 몇가지를 소개해 드리겠습니다. 많은 분들이 IT관련 공부를 위해서 무턱대고 책부터 구매하거나 학원을 등록하곤 하는데요 저는 이것이 좋지 않다고 생각합니다. 어떤 기술이든 책으로 공부할 수 있는 내용은 한계가 있기 때문이죠. 그것은 학원도 마찬가지입니다. 학원의 커리큘럼이라는 것이 적당한 서적을 하나 지정하여 교과서처럼 진도를 나가는 수준을 벗어나지 못하기 때문입니다. (다만 완전히 초급이며 처음 시작하는 분들은 학원도 좋을거라 생각합니다.) 책이나 학원이 조건 안좋은 것은 아니지만 서점등에서 추천수를 많이 받은 서적이라 하더라도 그 내용은 기본적이고 초급수준의 내용을 다루고 있거나 다소 난해한 번역서,.. 더보기
미디어쿼리를 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 요즘 있어보인다는 웹사이트의 필수요소인 반응형웹에서 주로 사용되는 미디어쿼리에 대해 알아보도록 할게요. 미디어쿼리란 모르면 어려워 보이지만 알고 나면 별 거 아닌 쉬운 기술입니다. 키다리디자이너는 구구절절 긴얘기 하는 거 딱 질색이니 짧고 굵고 이해하기 쉽게 설명해보도록 할게요. 1. 반응형웹이란 무엇인가? 걍 화면 크기에 따라 레이아웃(그리드) 달라지는 화면이요. 더 이상 알필요 없음 ㅇㅇ 2. 미디어쿼리란 무엇인가? 화면 크기에 따라 달라질 경우 현재 화면 크기에 따라 다른 CSS내용이 적용될 수 있도록 해주는 것입니다. 이것도 더 이상 알필요 없음 ㅇㅇ 3. 코딩 준비 미디어 쿼리는 앞서 말한 것처럼 현재 화면사이즈를 인식해 다른 CSS를 뿌려주는 것입니다... 더보기