'StyleSheet/CSS' 카테고리의 글 목록 (6 Page)

햄버거 메뉴 애니메이션 #2

Animated Burger Icon #2 이 포스팅에서는 CSS3로 다양한 햄버거 메뉴 효과를 keyframes과 jQuery를 이용하여 좀더 인터랙티브한 아이콘으로 구현하는 방법을 소개합니다. Hamberger Menu 12가지 효과 햄버거 메뉴 또는 아디다스 메뉴라고 불리는 메뉴로 12가지의 다양한 효과를 알아봅니다. See the Pen 햄버거 메뉴 #1 by jaeheekim (@jaehee) on CodePen. Related Info 햄버거 메뉴 #1 Jaehee's WebClub [출처] http://rwdb.kr/css_effect_10/

StyleSheet/CSS 2016. 9. 29. 08:28

햄버거 메뉴 애니메이션 #1

Animated Burger Icon이 포스팅에서는 햄버거 메뉴를 CSS3의 keyframes과 jQuery를 이용하여 좀더 인터랙티브한 아이콘으로 구현하는 방법을 소개합니다. Source & Result See the Pen 햄버거 메뉴 애니메이션 by jaeheekim (@jaehee) on CodePen. SCSS TypeSCSS를 사용하는 경우는 다음과 같습니다. scss // burger .container { position: relative; height: 28px; width: 36px; cursor: pointer; .line-top, .line-middle, .line-bottom { position: absolute; display: block; height: 4px; width: 3..

StyleSheet/CSS 2016. 9. 29. 08:27

CSS Animation/Transition Demos

CSS3 애니메이션 & 트랜지션 이 글에서는 CSS3 애니메이션과 트랜지션 효과 데모를 소개합니다. 참고해서 활용해 보세요. Animation/Transition Demos See the Pen wWKXba by jaeheekim (@jaehee) on CodePen. Related Info CSS3 Transform Jaehee's WebClub

StyleSheet/CSS 2016. 9. 29. 08:26

CSS3 @namespace

CSS 네임스페이스 선언하기 이 글에서는 CSS3의 @namespace 선언에 대해 간단히 알아봅니다. @namespace @namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다. @namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다. 어떤 @namespace 규칙이든 모든 @charset 및 @import 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 스타..

StyleSheet/CSS 2016. 9. 29. 08:26

CSS3 transform(화면 변형)

CSS3 트랜스폼 이 포스팅에서는 2,3차원의 공간에서 요소를 변형시킬 수 있는CSS3 transform 변형 속성 모델을 살펴봅니다. 변형(transform)이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. traslate : 이동효과scale : 확대/축소 효과rotate : 회전 효과skew : 비틀기(기울임) 효과 일반적으로 변형(transform) 효과는 transition(화면 이동)과 함께 사용할 때 진정한 효과가 나타납니다. 여기서는 간단한 전이(화면이동)인 transition 을 함께 사용하도록 하겠습니다. translateX() translateY() 이동 translate 효과는 원래의 위치를 기반으로 해서 이동하는 것을 의미합니다. 중요한 것은..

StyleSheet/CSS 2016. 9. 29. 08:25

CSS3 transition(화면이동,전이)

화면이동(transition) 기능으로 2D 전환(transform)에 생동감 부여하기 앞선 포스팅에서 언급했듯이 CSS transform은 애니메이션과 결합할 때 그 진정한 힘과 다양한 위력을 발휘할 수 있게 됩니다. 자바스크립트의 도움없이 순수하게 CSS, 엄밀히 말하자면 "CSS3 transition(전이)"만을 사용하여 다양한 효과를 나타낼 수 있습니다. CSS transition(전이,화면이동) 소개 transform과 마찬가지로 전이는 CSS에 추가된 강력한 기능으로 애니메이션 형식으로 그 능력을 한 차원 끌어올렸습니다. CSS 전이를 CSS 애니메이션 모듈과 혼동하면 안됩니다. 후자는 완전히 별개입니다. 애니메이션 모듈은 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있습니다. 그렇다면..

StyleSheet/CSS 2016. 9. 29. 08:25

transition(전이,화면 이동)

transition(화면 이동을 이용한 점진적 효과)transform(변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다.transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동"이라는 의미로 받아들이는 것이 이해하기 쉽습니다.화면 이동(transition)은 변형(transform)되는 중간의 상태를 의미한다고 할 수 있습니다.즉, 어떠한 변형(transform)이 일어나는 동안의 상태를 화면 이동이라고 하고, 이에 대해서 시간을 지정해 줄 수 있습니다.예를 들어서 마우스를 오버했을 때 어떤 변형을 일으키고 싶은데, 그 상태를 제어할 때 사용한다고 생각하면 됩니다. transition 은 요소가 ..

StyleSheet/CSS 2016. 9. 29. 08:24

CSS3 transform - 2D 전환

CSS3 2D transform(전환) transform(변형)은 CSS3에 추가된 강력한 기능입니다. 지난 몇 년사이에 웹에서 CSS와 연관된 것 중 감탄할 만한 새로운 시도들을 발견했다면 그 기저에는 transform(변형)이 있을 확률이 높습니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 전환의 진정한 잠재력은 CSS transition(이동효과)와 함께 사용될 때, 또는 3D 기능들과 함께 사용될 때 완전하게 표현됩니다. 그렇지만 먼저 가장 기본적인 전환의 형태인 2D 전환에 대해서 이해해야 합니다. 지금부터 2D 전환에 대해 알아봅니다. 2D 전환만으로도 요소의 위치, 크기, 방향, 원근 등을 의도대로 조정할 수 있고 이 모든 것이 한 줄의 C..

StyleSheet/CSS 2016. 9. 29. 08:23

애니메이션을 위한 X, Y, Z 축의 이해

rotate 를 위한 X, Y, Z 축 그림으로 이해하기 X 축 Y 축 Z 축

StyleSheet/CSS 2016. 9. 29. 08:22

CSS Animations(애니메이션 사용)

CSS 애니메이션 사용하기 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한..

StyleSheet/CSS 2016. 9. 29. 08:21

Rem 그리고 Em, 언제 써야 할까?!

Rem & Em 언제 사용하는 것이 좋은가 여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이 글을 통해 이해하시길 바랍니다. Rem Vs Em em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환됩니다. 만약에 1em 혹은 1rem 값을 지정했다면, 브라우저에 의해 16px부터 160px 까지, 아니면 기타 다양한 값으로 변환될 수 있습니다. css 패딩에 1em을 지정 16px 로 변환됨 css 패딩에 1em을 지정 160px 로 변환됨 반면에 px 값은 브라우저에선 절댓값으로 인식해서, 말 그대로 1px은 ..

StyleSheet/CSS 2016. 9. 29. 08:10

rgba(Transparent) & opacity

OPACITY CSS3 에는 투명도를 조절하는 두가지 속성이 있습니다. 바로 opacity 와 rgba 속성으로 이 속성들을 적용할 시 약간의 차이점을 보이는데 이에 대해 살펴보겠습니다. opacity property 이 속성은 요소의 Transparent(투명화) 정도를 조절하는 속성으로 포토샵등의 그래픽툴을 이용해서 투명도를 조절하는 것과 같은 원리입니다. 위의 그림은 opacity 를 이용해서 적용해서 나온 결과물입니다. 텍스트와 이미지를 함께 이용하든 백그라운컬로와 텍스트를 이용하든 그 결과물은 위와 거의 대동소이할 것입니다. 사실, opacity 는 부모요소에 적용시키면 자식 노드에게도 모두 상속되고 자식 노드에서만 opacity 를 해제(제거)할 수 없기 때문에 배경과 텍스트를 분리할 수가 없..

StyleSheet/CSS 2016. 9. 29. 08:08

View Port (뷰포트 설정)

View Port(뷰포트) 뷰포트란 전체 웹 페이지 가운데 브라우저 창에 보이는 부분을 말한다. 창크기를 조절해서 뷰포트를 크거나 작게 만들 수 있다. 모바일 브라우저에 대응하는 html문서의 head안에 veiwport를 설정한다. 뷰포트는 브라우저와 해상도에 따라 다르게 설정한다. - width=device-width; 가로 화면 전환시 화면에 맞게 페이지 폭이 넓어지게 된다. 쓰지 않을 경우 화면이 폭에 맞추어 확대됨. device-width 옵션은 iPhone OS 1.1.1 이후 적용. - initial-scale=1.0; 초기화면을 해당 비율로 확대하여 보여주는 옵션 - maximum-scale=1.0; 확대할 수 있는 최대값 (범위 0~10.0) 디폴트값은 1.6 - user-scalable..

StyleSheet/CSS 2016. 9. 29. 08:06

Skip Navigation 및 Dimmed style guide

스킵 네비 및 딤처리 가이드 접근성 스킵 네비게이션 스타일가이드 css .skipNav { width:980px;overflow:hidden;margin:0 auto;position:relative } .skipNav a { display:block;background:#000;font-weight:bold;width:0;height:0; margin:0 -1px -2px 0;overflow:hidden;font-size:11px;text-align:center } .skipNav a:hover, .skipNav a:focus, .skipNav a:active { height:20px;line-height:1;margin:0;padding-top:5px;width:auto; text-decoration:..