smarti,스마트아이

css3 개요, vendor prefix, linear-gradient

CSS3

CSS3는 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안이다.

CSS3 변경사항

CSS3에서 새롭게 추가되거나 변경된 대표적인 기능은 다음과 같다.

 - 선택자(Selectors) Level 3
 - 미디어 쿼리(Media Queries) Level 3
 - 색(Color) Level 3
 - 네임스페이스(Namespaces)

CSS3 module

CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성된다. CSS3를 구성하고 있는 주요 모듈은 다음과 같다.

 - 선택자(Selectors)
 - 박스 모델(Box Model)
 - 배경(Backgrounds)
 - 이미지(Image Values and Replaced Content)
 - 텍스트 효과(Text Effects)
 - 2D 변형(Transformations)
 - 3D 변형(Transformations)
 - 애니메이션(Animations)
 - 다중 칼럼(Multiple Column) 레이아웃
 - 사용자 인터페이스(User Interface)

CSS3에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있다.

 

Vendor Prefix

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다.

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다.
그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 된다.

주요 웹 브라우저의 vendor prefix

주요 웹 브라우저가 사용하고 있는 벤더 프리픽스는 다음과 같다.

ie	chrome	firefox	safari	opera
-ms-	-webkit-	-moz-	-webkit-	-o-

크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용한다.

.button {
    background: red;          <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
    background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
    background: -moz-linear-gradient(red, yellow);    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
    background: -ms-linear-gradient(red, yellow);     <!-- 익스플로러 10.0 이상을 위한 코드 -->
    background: -o-linear-gradient(red, yellow);      <!-- 오페라 10.0 이상을 위한 코드 -->
    background: linear-gradient(red, yellow);         <!-- CSS 표준 문법 코드 -->
}

위의 예제에서 가장 먼저 나오는 background 속성은 gradient 속성을 지원하지 않는 모든 브라우저를 위한 것이다.
또한, 맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드이다.
CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

이러한 벤더 프리픽스는 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나, 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어진다.

 

CSS3 선형 그래디언트

그래디언트(gradient)란 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미한다.
CSS3 이전에는 그래디언트 효과를 나타내기 위해서 별도의 여러 이미지 파일을 사용해야만 했다.
하지만 CSS3에서는 웹 브라우저가 간단히 그래디언트 효과를 나타낼 수 있게 해줍니다.

CSS3에서 제공하는 그래디언트는 다음과 같이 두 가지 형태가 있다.

1. 선형 그래디언트(linear gradients)
2. 원형 그래디언트(radial gradients)

CSS3 gradient 지원버전

CSS3 그래디언트(gradient)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
linear-gradient / repeating-linear-gradient	10.0	26.0 /10.0 -webkit-	16.0 / 3.6 -moz-	6.1 / 5.1 -webkit-	12.1 / 11.1 -o-
radial-gradient / repeating-radial-gradient	10.0	26.0 / 10.0 -webkit-	16.0 / 3.6 -moz-	6.1 / 5.1 -webkit-	12.1 / 11.6 -o-

linear gradient

선형 그래디언트(linear gradient)는 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 준다.
선형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요한다.

선형 그래디언트(linear gradient)의 문법은 다음과 같다.

문법 : background: linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...);

#grad {
    background: red;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
}

위의 예제에서 가장 먼저 나오는 background 속성은 linear-gradient 속성을 지원하지 않는 모든 브라우저를 위한 것이다.
맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드이다.
이러한 CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

선형 그래디언트의 진행 방향 설정

CSS를 이용하면 선형 그래디언트 효과가 진행될 방향을 설정할 수 있다.

그래디언트의 진행 방향은 top, right, bottom, left 뿐만 아니라 대각선으로도 설정할 수 있다.
선형 그래디언트(linear gradient) 효과의 기본 진행 방향은 위쪽에서 아래쪽으로 진행된다.

다음 예제는 위쪽에서 아래쪽으로 진행되는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-linear-gradient(green, yellow);
    background: -moz-linear-gradient(green, yellow);
    background: -o-linear-gradient(green, yellow);
    background: linear-gradient(green, yellow);
}

다음 예제는 오른쪽에서 왼쪽으로 진행되는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-linear-gradient(right, green, yellow);
    background: -moz-linear-gradient(right, green, yellow);
    background: -o-linear-gradient(right, green, yellow);
    background: linear-gradient(to left, green, yellow);
}

다음 예제는 왼쪽 아래에서 오른쪽 위로 진행되는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-linear-gradient(left bottom, green, yellow);
    background: -moz-linear-gradient(left bottom, green, yellow);
    background: -o-linear-gradient(left bottom, green, yellow);
    background: linear-gradient(to top right, green, yellow);
}

선형 그래디언트 효과의 진행 방향을 각도로 명시하여 설정할 수도 있다.

기준 각도인 0도는 아래쪽에서 위쪽으로의 진행을 의미한다.
각도가 양수일 때는 기준 각도를 중심으로 시계방향으로 회전하며, 음수일 때는 반시계방향으로 회전한다.

다음 예제는 225도의 진행 방향을 가지는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-linear-gradient(225deg, green, yellow);
    background: -moz-linear-gradient(225deg, green, yellow);
    background: -o-linear-gradient(225deg, green, yellow);
    background: linear-gradient(225deg, green, yellow);
}

위에서 살펴본 선형 그래디언트는 -135도의 진행 방향을 가지는 선형 그래디언트와 같은 그래디언트 효과를 보여준다.

선형 그래디언트의 투명도 설정

CSS3에서는 그래디언트의 투명도를 지원하며, 지정된 색상이 서서히 사라지는 효과를 사용할 수 있다.

그래디언트에 투명도를 추가할 때에는 RGBA 색상값을 사용하면 된다. RGBA 색상값의 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

다음 예제는 왼쪽에서 오른쪽으로 서서히 사라지는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
    background: -moz-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
    background: -o-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
    background: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0));
}

repeating-linear-gradient() 메소드

repeating-linear-gradient() 메소드는 선형 그래디언트 효과가 계속 반복되도록 설정한다.

다음 예제는 150도의 진행 방향을 가지고 반복되는 선형 그래디언트 예제이다.

#grad {
    background: green;
    background: -webkit-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
    background: -moz-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
    background: -o-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
    background: repeating-linear-gradient(150deg, red, white 10%, blue 20%);
}

 

[코딩공부] - CSS fixedNavigation1 예제 다운로드

CSS fixedNavigation1 예제 다운로드

[세상살이] - 유튜브 자막 다운로드 하는 방법

유튜브 자막 다운로드 하는 방법

[세상살이] - SQ3R 독서법 & KWL 독서법

SQ3R 독서법 & KWL 독서법

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[세상살이] - 네이버 스마트렌즈로 사진 찍어서 번역하기

네이버 스마트렌즈로 사진 찍어서 번역하기