smarti,스마트아이

CSS3 radial-gradient, shadow, web font

Radial-gradient

CSS3에서는 그래디언트 효과를 선형뿐만 아니라 원형으로도 나타낼 수 있다.

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-

radial gradient

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

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

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

원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정된다.

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

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

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

CSS를 이용하면 원형 그래디언트에서 색상 지정점 사이의 간격을 조절할 수 있다.

다음 예제는 색상 지정점 사이의 간격을 다르게 설정한 원형 그래디언트 예제이다.

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

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

CSS를 이용하면 원형 그래디언트의 모양을 타원이 아닌 원으로도 설정할 수 있다.

다음 예제는 원 모양을 가지는 원형 그래디언트 예제이다.

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

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

CSS를 이용하면 원형 그래디언트의 크기를 설정할 수 있다.
이때 크기를 나타내기 위해 사용할 수 있는 매개변수는 다음과 같다.

 - closest-side : 원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기로 설정된다.
 - farthest-side : 원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기로 설정된다. 따라서 가까운 면에서는 

    그래디언트의 일부분이 화면을 넘을 것이다.
 - closest-corner : 원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기로 설정된다.
 - farthest-corner : 원형 그래디언트의 크기가 가장 먼 모서리에 닿을 만큼의 크기로 설정된다. 이 크기가 기본 

   설정이며, 가까운 모서리에서는 그래디언트의 일부분이 화면을 넘을 것이다.

다음 예제는 다양하게 크기를 조절한 원형 그래디언트 예제이다.

#grad_01 { background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); }
#grad_02 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); }
#grad_03 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); }
#grad_04 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange); }

repeating-radial-gradient() 메소드

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

다음 예제는 반복되는 원형 그래디언트 예제이다.

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

 

Shadow

CSS3에서는 텍스트나 HTML 요소에 간단히 그림자 효과를 적용할 수 있다.

CSS3에서 사용할 수 있는 shadow 속성은 다음과 같다.

 - text-shadow
 - box-shadow

CSS3 그림자(shadow) 효과 지원버전

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

속성	ie	chrome	firefox	safari	opera
text-shadow	10.0	4.0	3.5	4.0	9.5
box-shadow	9.0	10.0 / 4.0 -webkit-	4.0 / 3.5 -moz-	5.1 / 3.1 -webkit-	10.5

text-shadow 속성

text-shadow 속성은 해당 텍스트에 간단히 그림자 효과를 적용해 준다.

text-shadow 속성의 문법은 다음과 같다.

문법 : text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;

그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시한다.

다음 예제는 CSS3에서 텍스트에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제이다.

#shadow_01 { text-shadow: 2px 2px; }
#shadow_02 { text-shadow: 2px 2px orange; }
#shadow_03 { text-shadow: 2px 2px 5px; }
#shadow_04 { text-shadow: 0 0 3px red; }
#shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }

box-shadow 속성

box-shadow 속성은 해당 HTML 요소에 간단히 그림자 효과를 적용해 준다.

box-shadow 속성의 문법은 text-shadow 속성을 사용하는 문법과 같다.

문법 : box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;

그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시한다.

다음 예제는 CSS3에서 HTML 요소에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제이다.

#shadow_01 { box-shadow: 5px 5px; }
#shadow_02 { box-shadow: 5px 5px orange; }
#shadow_03 { box-shadow: 5px 5px 10px; }
#shadow_04 { box-shadow: 0 0 15px red; }
#shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }

 

CSS3 web-font

CSS3에서는 웹 글꼴을 사용하여 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용할 수 있게 해준다.

CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었다.

- @font-face 규칙

CSS2 글꼴

CSS2까지는 다음과 같은 font 속성만을 사용할 수 있었다.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

CSS3 Web-font 지원 버전

CSS3 웹 글꼴(web font)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

규칙	ie	chrome	firefox	safari	opera
@font-face	9.0	4.0	3.5	3.2	10.0

웹 글꼴의 형식

웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같다.

1. 트루 타입 글꼴(TrueType Fonts, TTF)
2. 오픈 타입 글꼴(OpenType Fonts, OTF)
3. 웹 오픈 글꼴(The Web Open Font Format, WOFF)
4. 웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)
5. SVG 글꼴(SVG Fonts/Shapes)
6. 임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT) 트루 타입 글꼴(TrueType Fonts, TTF)

트루 타입 글꼴은 Apple과 Microsoft가 공동으로 개발한 외곽선 글꼴 표준이다.
이 글꼴은 맥(MAC)과 윈도우(Window) 운영체제에서 가장 오랫동안 사용되어 온 대표적인 글꼴이다.
트루 타입 글꼴은 해당 글꼴이 다양한 글꼴 크기에서 어떻게 표현될지에 대한 수준 높은 제어를 할 수 있게 해준다.

오픈 타입 글꼴(OpenType Fonts, OTF)

오픈 타입 글꼴은 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준이다.
이 글꼴은 트루 타입 글꼴의 뒤를 잇기 위해 Microsoft에서 개발하였으며, 현재는 거의 모든 컴퓨터에서 사용되고 있다.
오픈 타입 글꼴은 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있다는 장점을 가지고 있다.

웹 오픈 글꼴 1.0(The Web Open Font Format 1.0, WOFF 1.0)

웹 오픈 글꼴은 웹 페이지에서 사용할 수 있는 글꼴 표준이며, 현재 W3C에서 사용을 권장하고 있는 글꼴 표준이다.
이 글꼴은 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴이다.

웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)

이 글꼴은 웹 오픈 글꼴 1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴이다.

SVG 글꼴 (SVG Fonts/Shapes)

SVG 글꼴은 SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준이다.
이 글꼴은 SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해준다.

임베디드 오픈 타입 글꼴 (Embedded Open Type Fonts, EOT)

임베디드 오픈 타입 글꼴은 Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴이다.

웹 글꼴별 지원버전

웹 글꼴 별로 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

웹 글꼴	ie	chrome	firefox	safari	opera
TTF	9.0	4.0	3.5	3.1	10.0
OTF	9.0	4.0	3.5	3.1	10.0
WOTF 1.0	9.0	5.0	3.6	5.1	11.1
WOTF 2.0	지원하지 않음	36.0	35.0	지원하지 않음	26.0
SVG	지원하지 않음	4.0	지원하지 않음	3.2	9.0
EOT	6.0	지원하지 않음	지원하지 않음	지원하지 않음	지원하지 않음

@font-face 규칙

@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙이다. 웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해준다.

우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가한다.
그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 된다.

CSS3에서 @font-face 규칙을 사용하려면, 우선 font-family 속성을 이용하여 새로운 웹 글꼴을 위한 이름을 정의해야 한다.
그 후에 해당 웹 글꼴이 사용할 글꼴 파일의 주소를 지정해 주면 된다.

@font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }
@font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
#nGothic { font-family: myGothicFont; }
#nMyeongjo { font-family: myMyeongjoFont; }

웹 글꼴의 두꺼운 글씨체(bold text)를 위한 @font-face 규칙도 다음과 같이 추가로 설정할 수 있다.

@font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
@font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }
#nMyeongjo { font-family: myMyeongjoFont; }

위의 예제에서 웹 브라우저는 새로 만든 웹 글꼴을 적용하면서 두꺼운 글씨체에는 위의 규칙을 적용할 것이다.
이와 같은 방법으로 하나의 웹 글꼴을 위한 수많은 @font-face 규칙을 생성할 수 있다.

CSS3 @font-face 규칙 속성

속성	설명
font-family	필수적이며, 글꼴의 이름을 설정함.
src	필수적이며, 글꼴 파일의 주소를 설정함.
font-weight	선택적이며, 글꼴의 굵기를 설정함. 기본값은 "normal"임.
font-stretch	선택적이며, 글꼴의 크기가 늘어나는 방법을 설정함. 기본값은 "normal"임.
font-style	선택적이며, 글꼴의 스타일을 설정함. 기본값은 "normal"임.
unicode-range	선택적이며, 글꼴이 지원하는 유니코드 문자의 범위를 설정함. 기본값은 "U+0-10FFFF"임.

 

[세상살이] - 엣지 브라우저 확장 기능으로 마우스 우클릭 해제

엣지 브라우저 확장 기능으로 마우스 우클릭 해제

[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

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

CSS fixedNavigation1 예제 다운로드

[디자인공부] - 한글폰트 만화진흥원체 무료 다운로드 및 설치

한글폰트 만화진흥원체 무료 다운로드 및 설치

[세상살이] - 언택트 뜻

언택트 뜻