[CSS3] Media Queries

Posted in 모바일/HTML5 // Posted at 2010. 10. 25. 12:10
멀티 스크린 시대에 걸맞는 CSS 의 기능이다

CSS3에서는 출력되는 미디어의 종류와 조건에 맞도록 스타일을 설정할 수 있는 Media Query 라는 것을 제공한다. 이미 CSS2 에서 스크린모드(screen) 와 프린트모드(print)에 따른 서로 다른 출력 스타일을 지정할 수 있는 Media Type이 제공되었으나 세세한 조정을 할 수 없어 활용도가 높지 않았다고 한다.

그러나 CSS3에서 개선된 Media Query는 보다 더 세밀한 설정이 가능해 높은 활용도가 기대된다
특히 요즘처럼 멀티 디바이스, 멀티 스크린 시대에는 더욱 그 활용가치가 높지 않을까 생각한다

이에 대한 이론적 내용과 사용법은 W3C와 다른 훌륭한 블로그의 글을 링크함으로 대신 하려 한다
http://www.w3.org/TR/css3-mediaqueries/
http://manyoung.tistory.com/tag/media%20query
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
http://firejune.com/1580
http://www.webdesignerwall.com/tutorials/css3-media-queries/


미디어쿼리가 적용된 데모는 다음의 링크에서 확인할 수 있다
지원되는 브라우저에서 창 크기를 조절하면서 확인해 보기 바란다

http://disruptive-innovations.com/zoo/hmo/CSSMQdemo.html
http://test.unintentionallyblank.co.uk/media.html
http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/

submit

[CSS3] Animation

Posted in 모바일/HTML5 // Posted at 2010. 9. 13. 14:06
Animation (개체에 애니메이션 효과를 주다)
CSS3 에는 웹 페이지 개체에 동적인 효과를 주기 위한 흥미로운 기능들이 추가되었는데

앞서 살펴본 Transition 이나 Transform 과 같은 특성들이 바로 그것이다

여기에 더불어 Animation 이라는 특성도 추가되었는데 이것은 말 그대로 웹 페이지에 애니메이션을 구현할 수 있는 특성이다. 물론 Transition 이나 Transform 과 같은 특성으로 애니메이션 효과를 줄 수는 있지만 이는 임의의 (정해진) 한 상태에서 다른 상태로의 변화를 주어 동적 효과를 주는 것인 반면 Animation 을 이용하면 동적 효과의 시작점과 종료점을 명시적으로 제어할 수 있다는 특징이 있다

즉 Transition 이나 Transform 은 변화된 상태, 변화하는 과정은 제어할 수 있지만 변화의 시작부터 종료까지의 제어는 별도의 스크립트를 통해서만이 가능하다는 것이다

Animation 에서 제어할 수 있는 변화의 시작점과 종료점은 키프레임(keyframe)이라는 개념으로 설명된다. 플래시나 다른 동적 효과를 다루는 툴을 다뤄봤다만 키프레임이라는 단어가 익숙할 것이다
키프레임을 간단히 설명하면, 애니메이션을 구성하는 동작의 키가 되는 프레임을 말하며 이 프레임들의 연결 및 이동으로 자연스러운 동적 효과의 처리가 가능하다

웹킷 기반 브라우저에서만 가능
Transitino 이나 Transform 은 비록 그 스펙이 완성되지는 않았지만 브라우저별 접두어를 사용하는 임시특성을 이용할 수 있었지만 Animation 은 현재까지 웹킷 기반 브라우저만 지원하고 있다
즉 사파리와 크롬 브라우저에서만 Animation 을 지원하고 있다
(따라서 이 글에서는 W3C의 표준명 대신 -webkit- 접두어를 이용하여 설명하기로 한다)

키프레임
Animation 효과 중심이 되는 개념이라 할 수 있다
애니메이션 효과를 위한 CSS속성을 각각의 프레임으로 정의하고 이 프레임들이 연결되어 동적효과를 주게 된다. 즉 애니메이션을 위한 시작~종료 사이의 동적 효과를 각각의 프레임으로 정의하는 것이다

키프레임의 간단한 예를 보도록 하자. 아래 코드는 두개의 키프레임을 정의한 것이며 각각은
투명도와 너비 속성의 변화를 주는 것이며 from ~ to 즉 시작과 종료 프레임을 정의한 것이다
(키프레임 정의 오른쪽의 myAnimation 은 이 프레임셋의 이름(name)이다)

@-webkit-keyframes myAnimation {
  from opacity: 0.1; width: 150px;  }
  to    opacity: 1.0; width: 300px; }
 }

키프레임은 비율로도 나눌 수 있는데 다음과 같이 정의할 수 있다. 애니매이션 효과를 위한 4개의 프레임이 비율로 정의되었으며 정해진 시간 내 비율에 맞게 변화가 이어져 나갈 것이다
@-webkit-keyframes myAnimation  {
  0%     { left: 100px; }
  40%   { left: 150px; }
  60%   { left: 75px;  }
  100% { left: 100px; }
}

form, to, 그리고 비율을 혼합하여 정의할 수도 있다

애니메이션 속성
키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다

-webkit-animation-name
키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다

-webkit-animation-duration
애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0)

-webkit-animation-iteration-count
애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)

-webkit-animation-direction
키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)

-webkit-animation-timing-function
키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition

-webkit-animation-play-state
애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다

-webkit-animation-delay
애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)


애니메이션의 간단한 예
키프레임과 애니메이션 속성을 이용하여 간단한 동적 효과를 처리해 보자
이미지의 투명도와 너비 그리고 회전각의 변화를 두 개의 프레임으로 정의하였다
애니메이션 속성은, 2초 동안 정방향<->역방향을 번갈아 가면서 무한대로 실행하도록 한다


<img src="son1.bmp">
.....
<style>
@-webkit-keyframes myAnimation {
 from {
    opacity: 0.1;
    width: 150px;
    -webkit-transform: rotate(15deg);
  }
 to {
    opacity: 1.0;
    width: 300px;
    -webkit-transform: rotate(0deg);
  }
}

 img {
   -webkit-animation-name: myAnimation ;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate;
 }
</style>


데모를 실행하면 이미지의 크기와 투명도 그리고 회전각도의 변화가 지속적으로 번갈아 가며 실행되는 것을 확인 할 수 있을 것이다
 
              è  


참고>
http://www.w3.org/TR/css3-animations/
http://robertnyman.com/2010/05/06/css3-animations/
http://webkit.org/blog/324/css-animation-2/

 

submit

[CSS3] Transform

Posted in 모바일/HTML5 // Posted at 2010. 9. 10. 11:21
Transform (개체를 변형시키다)
CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다
(보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다)

회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다

브라우저별 접두어
Transform 역시 스펙이 완성되지 않은 단계라 각 브라우저별 임시 특성을 이용해야 한다
계속해서 언급하지만 접두어는 다음과 같다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transform
- 파이어폭스: -moz-transform
- 오페라: -o-transform

Rotate (회전 효과)
개체를 주어진 각도로 회전 시킬 수 있다
각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다
참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다
-webkit-transform: rotate(45deg);




Scale (확대/축소 효과)
개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다
개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다
확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다
-webkit-transform: scale(1.5);




그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다
예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대

Skew (기울임 효과)
개체를 주어진 각도로 기울일 수 있다
X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다
X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며
Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다

예) skewX(+-10deg); skewY(+-10deg); skew(+-10deg,+-10deg);

-webkit-transform: skew(10deg,10deg);




Translate
개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다
-webkit-transform:translate(10px, 20px);

translateX , translateY 로 각 축을 따로 지정할 수도 있다
실행 화면은 생략 한다


Transform 과 Transition 의 조화
웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다
즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다

예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다

간단히 코드로 작성해 보면 다음과 같다
<style>
img {      
-webkit-transition: -webkit-transform 2s ease-in-out;
}  
img:hover {
 -webkit-transform: skew(10deg,10deg);
}
</style>


이미지에 마우스를 올렸을때 skew효과로 이미지가 기울어지는데 이때, Transition 의 대상 CSS속성이transform으로 지정되어 있기 때문에 기울이는 과정이 2초에 걸쳐 부드럽게 전개되는 것이다.
서서히 움직이는 실행화면을 여기서 보여주기 힘드니 직접 테스트를 해보기 바란다


데모 사이트 소개
Transform 에 대한 효과를 강하게(?) 체험하고 싶다면 다음의 사이트를 방문해 보기 바란다
http://www.westciv.com/tools/3Dtransforms/index.html

Transform 관련 수치와 각도를 직접 설정하면서 각종 변형을 확인 할 수 있어 매우 직관적이다
그리고 이 글에서 주로 설명된 X,Y 축 기반의 2D Transform 외에 Z 축을 기준으로 하는 3D Transform 의 예도 살펴 볼 수 있다. 다만 3D Transform 은 2D에 비해 더 제한적인 브라우저 지원이 있다는 것을 기억하기 바란다. 아래 그림은 이 사이트 화면을 캡쳐한 것이다



그리고 다음의 사이트도 추가로 확인해 보기 바란다
http://cdn.net.tutsplus.com/581_cssTransitions/demos.html
http://css3.bradshawenterprises.com/#how2transitions

참고>
http://www.w3.org/TR/css3-2d-transforms/

https://developer.mozilla.org/en/CSS/-moz-transform
http://www.westciv.com/tools/3Dtransforms/index.html

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] LocalStorage 와 크로스브라우저  (2) 2010.09.14
[CSS3] Animation  (0) 2010.09.13
[CSS3] Transition  (6) 2010.09.09
[CSS3] 새로운 스타일  (0) 2010.09.07
[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소  (0) 2010.09.06
  1. 곽혜경

    정리가 잘되어 있어서 ~
    보고 갑니다^-^
    좋은정보 감사해요!!!!

submit

[CSS3] Transition

Posted in 모바일/HTML5 // Posted at 2010. 9. 9. 14:16
Transition (CSS 속성에 에니메이션 효과를 주다)
Transition 의 사전적인 뜻은 '(다른 상태・조건으로의) 이행(移行)[과도(過渡)] ' 이다
즉 뭔가의 상태가 어떤 조건에 의해 다른 상태로 변화되어 간다는 의미이다

CSS3 새로운 특성인 Transition 역시 이와 유사한 맥락으로 해석된다
개체에 적용된 스타일을 대상으로 주어진 시간과 조건으로 부드럽게 상태를 변화시키는 기술이다

예를 들어 색상이나 위치와 같은 CSS 속성을 다른 색상, 다른 위치로 변경 시킬 수 있어 일종의 에니메이션 효과를 줄 수 있다는 것이다

Transition 조건을 위한 속성
Transition 을 위한 다음 4가지의 조건 설정이 가능하다

1) transition-property
색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color
transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다

2) transition-duration
A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s
이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다


3) transition-delay
변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s
스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다

4) transition-timing-function
Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다
cubic-bezier(0.2, 0.4, 0.7, 0.8)

큐빅 베지어 값을 이해하기 위해 다음 그래프를 참고 하자
다섯 가지 값의 변화를 직접 눈으로 볼 수 있는 데모가 제공되며 이 중 그래프만 발췌했다
http://www.the-art-of-web.com/css/timing-function/



Timing Function Control Points(W3C 발췌)


Transition 사용법 및 (브라우저별) 접두어

Transition 효과를 주기 위해서 앞서 설명한 4가지 속성을 따로 지정하거나 한 줄에 모두 지정할 수 있다 즉 다음의 두 설정은 동일한 것으로, 개체의 투명도(opacity) 속성을 2초에 걸쳐 변하도록 한다
그리고 변화를 시작하기 전 1초를 대기시키는 예이다

한줄 설정>
 transition: opacity 2s 1s ease

각 속성을 따로 정의> 
 transition-property: opacity;        
 transition-duration: 2s;      
 transition-delay: 1s;    
 transition-timing-function: ease;

그리고 몇몇 CSS3 새 특성들과 같이 Transition 역시 그 스펙이 완성된 것이 아니라서 브라우저별 임시 특성을 이용해야 한다. 즉 아래와 같이 브라우저에 따른 접두어를 붙여야 한다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transition
- 파이어폭스: -moz-transition
- 오페라: -o-transition

Transition 의 간단한 예
Transition 을 이용해 CSS 스타일이 부드럽게 변화하는 간단한 데모를 만들어 보자
앞서 설명한 내용인데, 이미지의 투명도를 변화시키는 예이다

기본적으로 이미지가 최초 로딩될 때는 완전 불투명 상태이다(기본 상태 Opacity=1)
Transition 을 이용해 1초 후 투명도를 변화시키는데 총 2초에 걸쳐 투명도가 0.2이 되도록 한다

이후 이미지의 투명도 변화는 Transition 조건에 영향을 받게 되는데,
마우스가 이미지 위에 올라오는 hover 상태에서 투명도를 1로 다시 변화시킨다
이 변화 역시 Transition 조건에 의해 hover된 뒤 1초 후 변화가 시작되어 총 2초에 걸쳐 완정불투명상태로 서서히 변화한다

<img id="hello" src="son.bmp">

<style>
img {      
opacity: 0.2;    
-webkit-transition-property: opacity;       
-webkit-transition-duration: 2s;     
-webkit-transition-delay: 1s;   
-webkit-transition-timing-function: ease;
}  

img:hover {      
opacity: 1;  
}
</style>

브라우저에서 데모를 실행을 해 보면,
이미지가 로딩 되고 1초 후 부터 서서히 투명해 지기 시작한다.
총 2초에 걸쳐 투명도가 0.2가 될 때까지 진행된다. 그리고 이후 이미지에 마우스를 올리면 또 다시 서서히 이미지가 밝아 진다(완전 불투명이 될 때까지)


 

 

 

 

 


 

è

 

 
변경 대상이 되는 CSS 속성을 하나 이상 지정할 수도 있는데,
앞의 데모의 투명도와 더불어 크기도 Transition 대상 속성이 되도록 해 보자

아래와 같이 코드를 수정하였다. 한줄로 단축해서 표현했으며 Opcity, width 속성이 Transition 대상이 되도록 하였다. 그리고 width 변화는 1초동안, opacity 변화는 3초 동안 진행되도록 하였다. 이렇게 하면 최초 로딩시 그리고 마우수 horver 시 서서히 이미지가 커지면서 밝아지는 효과를 줄 수 있다.

<style>
img {      
opacity: 0.2;    
width: 150px;
-webkit-transition: width 1s ease-out, opacity 3s ease;
}  

img:hover {      
opacity: 1;  
width: 300px;
}
</style>

 
              è  

이렇게 두 개 이상의 CSS속성을 Transiction 대상으로 지정할 수 있는데,
예에서 처럼 각각의 CSS속성에 다른 조건을 주거나 다음처럼 한꺼번에 같은 조건을 줄 수도 있다
-webkit-transition: all 3s ease;


Transition정리

Transition을 이용해 에니메이션 같은 스타일 효과 주기 위해 다음의 것들을 이해하면 된다

1) 변경될 스타일의 대상
어떤 속성에 변화를 줄지를 결정하는 것이다. CSS 속성 중 어떤 속성이 변화의 대상이 되는가 하는 것이다. 앞서 예에서는 이미지의 너비(width)와 투명도(opacity) 이 그 대상이 되었다
즉 하나 이상의 CSS 속성을 Transiction 대상으로 지정할 수 있다

2) 스타일의 처음 상태와 변경된 상태
Transition은 CSS 속성을 변화시켜 스타일 효과를 주는 것이다
따라서 속성이 변화되기 전 처음 상태 값과 변경된 후 상태 값에 대한 이해가 있어야 한다
앞서 예에서는 img 전체에 Transition효과를 주었다. 이럴 경우 처음 상태는 이미지가 처음 로딩될 때 브라우저가 적용하는 기본 값이 처음값이다.

즉 앞 예에서의 최초 상태는 투명도 1, 크기 0 이며 이미지가 로딩 된 후 투명도 0.2, 크기 150px가 되었다. 그리고 hover 될 때 처음 상태는 바로 직전 상태에서 hover 스타일 값으로 서서히 변경되는 것이다

3) 기타 조건
Transition 설정을 통해 시작 전 대기 시간(초), 총 걸리는 시간(초) 등 세부 조건을 지정하면 된다

CSS의 에니메이션 효과과 관련된 예는 직접 실행 해 보는 것이 좋다
앞 데모도 직접 브라우저에서 그 동작을 확인해 보기 바란다


클릭에 반응하여 움직이는 이미지 만들기
마지막으로 Transition을 이용해 움직이는 이미지 효과를 만들어 보고 글을 마치도록 하겠다
CSS의 속성 중 margin-left 속성의 변화를 통해 이미지의 위치를 조정하는 예이다

Transition 에서는 margin-left 의 변화에 반응하도록 지정하며
개체의 className 속성을 이용해 스타일의 상태 변화를 유도하게 된다
이 데모는 구글의 html5rocks 을 참고한 것이다
<img id="myImage" src="son.bmp">
.....
<style>
img {      
-webkit-transition: margin-left 1s ease-in-out;
}  
img.left {
 margin-left: 0;
}
img.right {
 margin-left: 780px;
}

</style>
<script>
var content = document.querySelector('#myImage');
content.addEventListener('click', function() { 
  if (this.className == "right") {
    this.className = "left";
  }
  else {
    this.className = 'right';
  }
}, false);
</script>

데모를 실행 하고 이미지를 클릭하면 좌/우로 이미지가 이동하는 것을 확인할 수 있다

참고>
http://www.w3.org/TR/css3-transitions/
http://css3.bradshawenterprises.com/#how2transitions
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

'모바일 > HTML5' 카테고리의 다른 글

[CSS3] Animation  (0) 2010.09.13
[CSS3] Transform  (2) 2010.09.10
[CSS3] 새로운 스타일  (0) 2010.09.07
[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소  (0) 2010.09.06
HTML5와 함께 빠른 웹 개발을 위한 최고의 지침  (0) 2010.09.06
  1. ㅎㅎ

    저 위에 그림에 있는 왼쪽 세로 눈금은 어떻게그리나요...?ㅠㅠ
    css 에서 저걸 막대 옆에 어떻게 그려야할지를 모르겠네요...ㅠㅠㅠ

  2. 오이

    안녕하세요~^^

    -webkit-trasition에 대해서 공부하려고 했는데 정리가 잘 되어 있어서 많은 참고가 되었습니다.

    앞으로 자주 와서 올려주신 글을 읽어보고 싶네요~

    좋은글 감사합니다~

  3. 좋은 정보 감사합니다~! 많은 도움이 됬네요

  4. 라모네기사

    정말 혁신적인 기능인거 같습니다. 스크립트로 구현하던 복잡한 효과등을 간단히 코드 2-3줄로 만들수도 있는데다가 활용하기에 따라서 정말 무궁무진한 발전가능성을 보여줄거 같네요 ^ㅁ^)/

    잘 배우고 갑니다 감사해요~

submit

[CSS3] 새로운 스타일

Posted in 모바일/HTML5 // Posted at 2010. 9. 7. 14:21

CSSCascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다

엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다
그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다
그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다

어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다
(뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...)

나 역시 개발자라써, 디자인 영역에 더 가까운 스타일을 다루는 데는 익숙하지 않으며 직접적인 영향을 받지 않는 기술이긴 하지만 흥미로운 몇 가지 CSS3 기능을 알아 둬서 나쁠 건 없어 보인다

이 글에서는 CSS3의 새로운 기능 중 일부를 소개하고자 한다

다중 컬럼 레이아웃(Multiple column layout)
CSS3 의 새 스타일 중 제일 처음 눈에 띄는 것이었다
다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다

다중 컬럼 레이아웃의 가장 기본적인 적용법은 컬럼 갯수를 정의하는 것이다
컬럼 갯수 정의는 column-count, column-width 두 가지 중 하나의 방식을 이용할 수 있다

column-count : 컬럼의 갯수를 직접적으로 지정한다. 직관적으로 수를 지정할 수 있어 주로 사용된다
                      컬럼의 너비는 컬럼 갯수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다
column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록 한다

그리고 컬럼의 레이아웃을 좀 더 세밀하게 조정할 수 있다
column-gap : 컬럼 간 띄워질 공간을 지정한다
column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다

브라우저에 따른 구현 규칙
현재 다중 컬럼 레이아웃은 Mozilla 와 WebKit 브라우저에서만 지원된다. 즉 파이어폭스, 크롬, 사파리에서 지원된다. 다중 컬럼 레이아웃을 위한 특성은 각 브라우저의 접두사를 같이 사용해야 하는데 이는 스펙이 완료되기 전에 임시 특성을 이용하는 것이다. 스펙이 완성되면 접두사 없이 특성이름만으로도 적용가능하게 될 것이다

웹킷 브라우저 임시 특성 예: -webkit-column-count
모질라 브라우저 임시 특성 예: -moz-column-count

보통 다중 컬럼 레이아웃을 지정할 때 모질라, 웹킷, 그리고 표준 모두를 다 적용해 두는 것이 좋다
이제 다중 컬럼 레이아웃을 지정한 예를 보도록 하자
뉴스를 div로 감싸고 div에 다중컬럼레이아웃을 적용한다. 웹킷 및 모질라 모두 구현하였으며 향후 표준 완성을 위해 접두어을 뺀 특성도 정의해 두었다. 이렇게 하는 것이 좋은 습관이다

<div id="news">
교육과학기술부와 한국장학재단이 7일 학자금 대출 제한대학을 발표했다. 전국
......
</div>

<style>
  #news {
    #-webkit-column-width : 130px;
    -webkit-column-count: 3;
    -webkit-column-rule: 2px solid blue;
    -webkit-column-gap: 2em;                       
   
    -moz-column-count: 3;
    -moz-column-rule: 2px solid blue;
    -moz-column-gap: 2em;
   
    column-count: 3;
    column-rule: 2px solid blue;
    column-gap: 2em;
  }         
</style

실행 화면(크롬)



참고>
http://www.quirksmode.org/css/multicolumn.html
http://designshack.co.uk/articles/introduction-to-css3-part-5-multiple-columns


다양한 텍스트 효과
웹 페이지의 텍스트에 다양한 효과를 줄 수 있어 기존 이미지로 표현해야 했던 것을 간단한 스타일로 대신할 수 있다

Text-Stroke
웹킷 기반 브라우저에서 텍스트 윤곽에 대한 스타일을 지정할 수 있다
Stroke 의 두께색상을 지정할 수 있다

<style>
  div {
    font-size: 50px;  
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 1.5px red;          
  }         
</style>



참고> http://www.quirksmode.org/css/stroke.html


Text-Shadow
텍스트에 그림자 효과를 줄 수 있다.
현재 IE를 제외한 사파리, 크롬, 파이어폭스, 오페라에서 모두 지원 된다. 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다
text-shadow: 색상 수평위치 수직위치 선명도

<style>
  div {
    font-size:30px;
    text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px;
  }     
</style>



참고> http://www.quirksmode.org/css/textshadow.html


Text-Overflow

텍스트 랩핑(Wrapping)과 관련되는 스타일이다
영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 현재 IE 6 이상, 크롬, 사파리에서 지원된다

아래 그림을 보면 텍스트 길이가 div 사각영역을 벗어 나고 있다(텍스트가 오버플러 되었다)
이 그림은 텍스트 랩핑을 하지 않았을 때(white-space: nowrap)의 모습이다


그리고 텍스트 랩핑을 하면 아래와 같다(white-space: wrap)


이렇게 오버플로된 텍스트는 보기 싫기 때문에 보통 overflow: hidden 으로 영역을 넘어가는 텍스트를 숨기도록 처리한다. 이렇게 하면 보기 싫게 벗어난 텍스트를 숨길 수 있다

하지만 가장 적합한 선택은 Text-Overflow 의 생략기호(...)를 사용하는 것이다
text-overflow: ellipsis 로 처리하면 아래 그림과 같이 숨겨진 텍스트는 생략기호(...)으로 대체되어
보기 싫지도 않으며 사용자에게 추가 텍스트가 있다는 의미를 직관적으로 알리 수 있다



<div>
  CSS3 텍스트 효과, 텍스트 오버플러
</div>
.....
<style>
  div {   
    padding: 10px 10px;  
    border: 1px solid #000000;           
    height: 1.1em;    
    overflow: hidden; 
    white-space: nowrap;     
    width:20%;
    text-overflow: ellipsis;   
  }     
</style>

참고> http://www.quirksmode.org/css/textoverflow.html


Opacity

텍스트의 투명도를 조절할 수 있다. IE를 제외한 파이어폭스,크롬,사파리,오페라에서 모두 지원한다
(IE이 경우 filter 로 유사한 효과를 줄 수 있다)
투명도는 0.0 ~ 1.0 사이의 값을 가진다. 0(완전 투명) ~ 1(완전 불투명)



코드에서는 opacity 와 더불어 IE8과 IE5~7을 위한 각각의 필터 특성도 정의 해 두었다

<div>
  CSS3 텍스트 효과, 투명도 조절
</div>
<div id="op">
  CSS3 텍스트 효과, 투명도 조절
</div>
.....
<style>
  div{
    font-size: 30px;
    font-weight: bold;
    color: blue;
  } 
  #op{       
    opacity: 0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }     
</style>

참고> http://www.quirksmode.org/css/opacity.html


다양한 테두리 및 백그라운드 효과
테두리와 백그라운드에 다양한 스타일을 적용할 수 있다
이전에 이미지로 가능했던 많은 부분이 간단한 스타일 적용으로 가능하게 된 것이다

Border-Radius
테두리의 각을 조절할 수 있다. 테두리의 양 끝의 각을 0 ~ 50 px까지 조절하여 모서리의 각을 조절한다. IE 9 이전 버전을 제외한 파이어폭스, 크롬, 사파리, 오페라에세 지원된다



<style>
  div{
    font-size: 20px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;

  }      
</style>

참고> http://www.quirksmode.org/css/borderradius.html


Box-Shadow
텍스트 뿐만 아니라 테두리에도 그림자 효과를 줄 수 있다
IE9 이전과 오페라를 제외한 파이어폭스, 사파리, 크롬에서 지원된다
box-shadow: 수평위치 수직위치 선명도 색상


<style>
  div{
    border: 1px solid black;
   padding: 10px;
   -webkit-box-shadow: 10px 10px 5px gray;
   -moz-box-shadow: 10px 10px 5px gray;

  }      
</style>

참고> http://www.quirksmode.org/css/boxshadow.html

Gradient
백그라운드에 그라디에이션 효과를 줄 수 있다. 직선 형태(linear) 효과 또는 방사형 형태(radial) 효과를 줄 수 있다. 파이어폭스, 사파리, 크롬에서 지원된다. IE의 경우 filter 로 유사한 효과를 줄 수 있다


<style>
  div{
    border: 1px solid black;
   padding: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(orange), to(white));  
   background: -moz-linear-gradient(left,  orange,  white);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='white');
  }      
</style>

참고> http://www.quirksmode.org/css/gradient.html

Border-Image
테두리에도 이미지를 깔 수 있게 되었다. 웹킷 기반인 사파리, 크롬과 파이어폭스(-moz-)에서 지원된다

<style>
  div{     
    width:15em;
    height:2em;
    -webkit-border-image: url(mk.gif) 50 25 50 25 repeat stretch;
    -moz-border-image: url(mk.gif) 50 25 50 25 repeat stretch; 
 
    border: solid 25px #f00;   
  }      
</style>

참고> http://css-infos.net/property/border-image
         http://www.css3.info/preview/border-image/

Multiple Background Images
다중 이미지 백그라운드가 가능하다. 즉 백그라운드에 둘 이상의 이미지를 깔 수 있다
이미지의 위치를 조절하여 여러개의 백그라운드 이미지를 처리할 수 있다
IE8 이전 버전을 제외하고 모두 지원된다



두개의 이미지를 백그라운드에 깔고 수직 반복처리 및 각 이미지의 위치를 좌상단,우상단으로 하였다

<style>
  div{
    border: 1px solid black;   
    width: 20em;
    height: 30em;  
    background-image: url(son1.jpg), url(son3.bmp);
    background-repeat: repeat-y;
    background-position: top left, top right;
     
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#multiple


Background-Size

백그라운드에 깔린 이미지의 사이징을 조절 할 수 있다
div 나 textarea의 크기가 변경될 때 백그라운드가 어떻게 반응해야 하는지를 결정할 수 있다
IE8 이전 버전을 제외한 크롬, 사파리, 파이어폭스(-moz), 오페라에서 지원된다
background-size 의 값으로는 다음 중 하나로 지정할 수 있다

- 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size: auto;
- 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size: 250px 20px;
- 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size: 50% 70%   
- contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다
                개체의 가로,세로의 같은 변화에만 반응한다
                (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음)

- cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다
          (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다)

아래의 코드로 브라우저에서 직접 테스트 해 보기 바란다
참고로 div 에 resize를 가능하도록 하여 div의 크기를 사용자가 확대 할 수 있도록 하였다
(resize 는 사파리, 크롬에서만 지원된다

<style>
  div{   
    border: 1px solid black;   
    width: 12em;
    height: 17em;  
    background: url(son1.jpg) center center no-repeat;
    background-size: contain;
    resize: both;
    overflow: auto;    
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#size

Box-Reflect
웹 페이지에 표시되는 개체에 대한 반사 효과를 줄 수 있다. 이 특성은 비단 테두리 및 백그라운드에 국한된 것이 아니라 텍스트, 테이블, 이미지, 비디오 등 웹 페이지에 표현되는 모든 개체가 대상이 된다.
웹킷 기반 브라우저인 사파리, 크롬에서 지원된다

-webkit-box-reflect: direction offset mask-box-image;


<style>
img{
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.0, transparent), to(white)); 
  -webkit-border-radius: 30px;
   #border-radius: 3px;
   #border: 3px solid #777;        
}
</style>

참고> http://css-infos.net/property/-webkit-box-reflect

CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다. 특히 UI를 개발하는 사람은 더욱 관심있게 봐야할 주제이다
CSS3와 관련된 더 자세하고 추가된 학습은 아래의 사이트를 확인하기 바란다
http://www.quirksmode.org/css/contents.html
http://css-infos.net/
http://www.css3.info/preview/



'모바일 > HTML5' 카테고리의 다른 글

[CSS3] Transform  (2) 2010.09.10
[CSS3] Transition  (6) 2010.09.09
[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소  (0) 2010.09.06
HTML5와 함께 빠른 웹 개발을 위한 최고의 지침  (0) 2010.09.06
[HTML5] Cross Document Messaging  (3) 2010.09.03
Tags CSS3, html5

submit