StyleSheet/CSS 검색 결과

해당 글 142건

horizontal Bounce Arrow Animation

Comma separated @keyframe rule@keyframe 은 백분율로 애니메이션 상태를 지정할 수 있습니다.여기서 더 나아가 바운스 애니메이션을 구현하는데 있어서 콤마(,)를 구분자로 키프레임을 좀 더 간결하게 작성할 수 있는 방법에 대해 알아보도록 합니다. SourceSee the Pen Comma separated @keyframe rule by jaeheekim (@jaehee) on CodePen. @keyframe위의 소스에 키프레임은 간결하게 작성되어 있습니다. 위 해당 키프레임을 아래와 같이 작성할 수도 있습니다. css @-webkit-keyframes horizontalBounce { 0% { -webkit-transform: translateX(0); } 10% { -we..
StyleSheet/CSS 2017. 2. 16. 09:07

CSS3 gradient 를 이용한 줄무늬 배경 만들기

줄무늬 배경 만들기거의 모든 시각 디자인에서 다양한 크기, 색상, 각도의 줄무늬(Sprite)를 찾아볼 수 있습니다.줄무늬를 적용하는 작업 방식은 일반적으로 각각의 분리된 이미지를 만드는데, 이것을 수정하려면 그때마다 이미지 편집이 필요합니다.때로는 SVG를 사용하기도 하는데, 이 역시 분리된 파일과 익숙하지 않은 구문을 사용해야 합니다.번거로운 작업을 최소화하기 위해 CSS3 를 이용하여 직접 줄무늬를 만들 수 있는데 그 방법을 알아보도록 합니다. 기본 줄무늬 배경See the Pen 줄무늬 배경 #1 by jaeheekim (@jaehee) on CodePen. #fb3 컬러의 50% 는 처음 0%에서 시작하여 50% 지점에서 끝나고 #5ba 컬러는 50% 에서 시작하여 100% 까지 배경이미지를 그..
StyleSheet/CSS 2017. 2. 8. 11:31

CSS3 : -webkit-animation 알아보기

-webkit-animation웹킷 애니메이션에 대해 알아봅니다. 속성명 -webkit-animation 요약 설명 애니메이션을 설정한다. 정의 애니메이션 이름과 재생 횟수, 재생 방향 등 여러 애니메이션 속성을 하나로 합쳐서 설정한다. Syntax(구문)-webkit-animation: || || || || || || || [,...]; name : 애니메이션 이름@-webkit-keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있다. duration : 애니메이션을 한 번 재생하는 데 걸리는 시간 0 : 애니메이션을 재생하지 않는다(기본값). 숫자와 단위 : 애니메이션을 한 번 재생하는 데 걸리는 시간이다. 초(s)와 밀리초(ms) 단위를 사용한다. 단위..
StyleSheet/CSS 2017. 1. 24. 17:15

CSS3 :nth-child() - 의사 클래스(Pseudo-Classes)

의사(가상) 클래스는 :hover와 :before, :active와 같은 형태로 많이 사용되고 있습니다. 그리고 현재 CSS3는 새로운 의사(가상) 클래스들을 상당히 많이 제공하여 웹을 좀 더 유연하게 제어할 수 있도록 해주고 있습니다. 이 글에서는 nth-child에 대해 중점적으로 다룰 것이고 그 외의 몇 가지 가상 클래스를 소개해 보도록 하겠습니다. CSS3 가상 클래스를 IE 구형 브라우저에서도 사용할 수 있는 Selectizr 포스팅보기 처음과 마지막 요소 선택 일반적으로 많이 사용하는 선택자들로 간단히 짚고 넘어가겠습니다.:first-child는 요소 유형(타입)에 상관없이 요소의 첫 번째 자식을 선택합니다. 이 가상 클래스는 CSS2.1에서 먼저 정의되었고 IE7+ 모든 브라우저들이 지원하고..
StyleSheet/CSS 2016. 12. 2. 17:19

모바일 및 반응형에서 유용한 박스 레이아웃

Useful box layout in mobile and RWD다음의 소스를 통해 박스모델을 이해하면서 레이아웃을 정의해 보도록 합니다. 로컬 테스트 시 다음의 뷰포트를 설정하고 테스트 바랍니다. html Box layout #1로컬 상에서 소스 테스트 시 위의 뷰포트 설정을 확인하고 개발자 도구에서 에뮬레이터를 통해 확인해 보세요.See the Pen 모바일에서 유용한 박스 레이아웃 #1 by jaeheekim (@jaehee) on CodePen. Box layout #2See the Pen 모바일에서 유용한 박스 레이아웃 #2 by jaeheekim (@jaehee) on CodePen. related links 음수 마진(Negative margins) 활용하기 Jaehee's WebClub
StyleSheet/CSS 2016. 11. 29. 17:00