[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트

728x90

CSS3

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

> CSS3 변경 사항

: CSS3에서 새롭게 추가되거나 변경된 대표적인 기능

- Selectors Level 3

- Media Queries Level 3

- Color Level 3

- Namespaces

> CSS3 모듈 (Module)

: CSS3는 새로운 기능들과 함께 이전 버전 CSS 기능까지 포함하는 모듈이라는 것으로 구성되며, 다음은 CSS3를 구성하는 주요 모듈이다

- Selectors

- Box Model

- Backgrounds

- Image Values and Replaced Content

- Text Effects

- 2D Transformations

- 3D Transformations

- Animations

- Mutiple Column Layout

- User Interface

> CSS3에서 변경된 사항을 더 자세히 알 수 있는 W3C 공식 사이트

: https://www.w3.org/TR/CSS/

> CSS 표준 권고안의 모듈별 현재 상태에 대해 알 수 있는 링크

: https://www.w3.org/Style/CSS/current-work

벤더 프리픽스 (Vendor Prefix)

- 주요 웹 브라우저 공급자가 새로운 기능을 제공할 때, 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 새로운 접두사(prefix)를 말한다

- 즉, 아직 CSS 권고안에 포함되지 못했거나 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용

> 주요 웹 브라우저 벤더 프리픽스

익스플로러	크롬, 사파리	파이어폭스	오페라
-ms-	-webkit-	-moz-	-o-

<style>
    .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 표준 문법 코드 -->
    }
</style>

CSS3 색

: 색상이름, RGB 색상값, 16진수 색상값으로만 색을 표현하던 CSS2와 달리, CSS3에서는 추가된 색상값 및 opacity 속성을 지원한다

> RGBA 색상값으로 표현

- RGBA : RGB 색상값에 알파 채널 값을 더한 색상값

- 알파 채널(alpha channel) : 색상의 투명도를 나타내는 채널이며, 투명인 0.0부터 1.0사이의 값을 가진다

> HSL 색상값으로 표현

- HSL : 색상(Hue), 채도(Saturation), 명도(Lightness)를 사용하여 색을 표현

※ RGB : 빛의 삼원색으로 색을 표현

- 색상은 0~360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타낸다

- 채도는 0~100%의 값을 가지고, 색상의 연하고 짙은 정도를 나타낸다

- 명도는 0~100%의 값을 가지고, 색상의 밝고 어두운 정도를 나타낸다

> HSLA 색상값으로 표현

: HSL 색상값에 알파 채널 값을 더한 색상값

> opacity 속성

- 색상에 대한 투명도

- 완전 투명이 0.0부터 투명도가 없는 1.0 사이의 값을 가진다

- 알파 채널과의 차이점 : opacity 속성은 설정한 요소의 모든 자식(child) 요소까지 전부 같은 투명도로 설정되지만, 알파채널은 설정한 요소에만 투명도가 설정된다

CSS3 선형 / 원형 그래디언트

> 그래디언트 (gradient)

: 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과

- CSS3 이전에는 별도의 이미지 파일을 사용해서 표현

- CSS3에서는 웹 브라우저가 표현 가능

→ 선형 / 원형 그래디언트의 두 가지 형태가 있다

> 선형 그래디언트 (linear gradient)

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

- 최소한 두 개 이상의 색상 지정점이 필요하다

- 색상 지정점에는 그래디언트 효과로 부드럽게 전환해주고 싶은 색상을 명시한다

<style>
    #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);
    }
</style>

- 위에서 가장 먼저 나오는 background 속성은 linear-gradient 속성을 지원하지 않는 브라우저를 위한 것이며, 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드이다

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

- top, right, bottom, left 뿐만 아니라 대각선으로도 설정 가능 (기본은 위쪽에서 아래쪽으로)

- 진행 방향을 각도로 명시 : 기준 각도인 0도는 아래쪽에서 위쪽을 의미하고, 양수는 시계방향, 음수는 반시계 방향으로 회전한다

<style>
    #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);
    }
</style>

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

- RGBA 색상값의 알패 채널 값을 설정

> 원형 그래디언트 (radial gradient)

background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...);

- 최소 두 개 이상의 색상 지정점이 필요

- 기본적으로 ellipse(타원), 크기는 farthest-corner, 중심 좌표는 center로 설정된다

> 색상 지정점사이의 간격 조절

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -moz-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -o-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: radial-gradient(red 5%, yellow 20%, orange 50%);
    }
</style>

> 원형 그래디언트의 모양 설정

- (예) 타원이 아닌 원으로 설정

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(circle, red, yellow, orange);
        background: -moz-radial-gradient(circle, red, yellow, orange);
        background: -o-radial-gradient(circle, red, yellow, orange);
        background: radial-gradient(circle, red, yellow, orange);
    }
</style>

> 원형 그래디언트의 크기 설정

- 크기를 나타내기 위해 사용할 수 있는 매개변수

: closest-side, farthest-side, closest-corner, -farthest-corner(기본 설정)

> repeating-linear-gradient() 메소드

- 그래디언트 효과가 계속 반복되도록 설정

<style>
    #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%);
    }
</style>

[참고] http://tcpschool.com/css/intro