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)
벤더 프리픽스(Vendor Prefix)
세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다.
벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.
크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.
예)
<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>
위의 예제에서 가장 먼저 나오는 background 속성은 gradient 속성을 지원하지 않는 모든 브라우저를 위한 것입니다.
또한, 맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드입니다.
CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있습니다.
이러한 벤더 프리픽스는 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나, 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어집니다.
CSS2 색
CSS2까지는 색을 표현하기 위해서 다음 방법만을 사용할 수 있었습니다.
1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현
RGBA 색상값으로 표현
RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값입니다.
알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널입니다.
알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.
예)
<style>
#header_01 {background-color: rgba(0,255,0,0);}
#header_02 {background-color: rgba(0,255,0,0.2);}
#header_03 {background-color: rgba(0,255,0,0.4);}
#header_04 {background-color: rgba(0,255,0,0.6);}
#header_05 {background-color: rgba(0,255,0,0.8);}
#header_06 {background-color: rgba(0,255,0,1);}
</style>
HSL 색상값으로 표현
HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현합니다.
HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다.
색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타냅니다.
색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 됩니다.
예)
<style>
#header_01 {background-color: hsl(0, 100%, 50%);}
#header_02 {background-color: hsl(90, 100%, 50%);}
#header_03 {background-color: hsl(180, 100%, 50%);}
#header_04 {background-color: hsl(270, 100%, 50%);}
#header_05 {background-color: hsl(360, 100%, 50%);}
</style>
채도는 0%부터 100% 사이의 값을 가지며, 색상의 연하고 짙은 정도를 나타냅니다.
채도 값이 0%면 회색이 되고, 100%면 원래 색상이 됩니다.
예)
<style>
#header_01 {background-color: hsl(0, 0%, 50%);}
#header_02 {background-color: hsl(0, 20%, 50%);}
#header_03 {background-color: hsl(0, 40%, 50%);}
#header_04 {background-color: hsl(0, 60%, 50%);}
#header_05 {background-color: hsl(0, 80%, 50%);}
#header_06 {background-color: hsl(0, 100%, 50%);}
</style>
명도는 0%부터 100% 사이의 값을 가지며, 색상의 밝고 어두운 정도를 나타냅니다.
명도 값이 0%면 검정색이 되고, 50%면 원래 색상, 100%면 흰색이 됩니다.
예)
<style>
#header_01 {background-color: hsl(0, 100%, 0%);}
#header_02 {background-color: hsl(0, 100%, 20%);}
#header_03 {background-color: hsl(0, 100%, 40%);}
#header_04 {background-color: hsl(0, 100%, 50%);}
#header_05 {background-color: hsl(0, 100%, 60%);}
#header_06 {background-color: hsl(0, 100%, 80%);}
#header_07 {background-color: hsl(0, 100%, 100%);}
</style>
HSLA 색상값으로 표현
HSLA 색상값은 HSL 색상값에 알파 채널 값을 더한 색상값입니다.
예)
<style>
#header_01 {background-color: hsla(0, 100%, 50%, 0);}
#header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
#header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
#header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
#header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
#header_06 {background-color: hsla(0, 100%, 50%, 1);}
</style>
opacity 속성
opacity 속성은 색상에 대한 투명도를 설정해 줍니다.
opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.
예)
<style>
#header_01 {background-color: rgb(0,255,0); opacity:0}
#header_02 {background-color: rgb(0,255,0); opacity:0.2}
#header_03 {background-color: rgb(0,255,0); opacity:0.4}
#header_04 {background-color: rgb(0,255,0); opacity:0.6}
#header_05 {background-color: rgb(0,255,0); opacity:0.8}
#header_06 {background-color: rgb(0,255,0); opacity:1}
</style>
opacity 속성과 알파 채널과의 차이점
위에서 살펴본 opacity 속성과 알파 채널 모두 투명도를 조절한다는 공통점을 가지고 있습니다.
opacity 속성은 투명도를 설정했을 때 설정한 요소의 모든 자식(child) 요소까지 전부 같은 투명도로 설정합니다.
하지만 알파 채널은 투명도를 설정한 요소에만 투명도를 설정하는 차이점이 존재합니다.
다음 예제는 opacity 속성과 알파 채널과의 차이점을 보여주는 예제입니다.
예)
<style>
#para_01 {background-color: rgb(255,0,0); opacity:0}
#para_06 {background-color: rgb(255,0,0); opacity:1}
#para_07 {background-color: rgba(255,0,0,0);}
#para_12 {background-color: rgba(255,0,0,1);}
</style>
그래디언트(gradient)란 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미합니다.
CSS3 이전에는 그래디언트 효과를 나타내기 위해서 별도의 여러 이미지 파일을 사용해야만 했습니다.
하지만 CSS3에서는 웹 브라우저가 간단히 그래디언트 효과를 나타낼 수 있게 해줍니다.
CSS3에서 제공하는 그래디언트는 다음과 같이 두 가지 형태가 있습니다.
1. 선형 그래디언트(linear gradients)
2. 원형 그래디언트(radial gradients)
선형 그래디언트(linear gradient)
선형 그래디언트(linear gradient)는 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다.
선형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요합니다.
선형 그래디언트(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 표준 문법으로 작성된 코드입니다.
이러한 CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있습니다.
선형 그래디언트의 진행 방향 설정
CSS를 이용하면 선형 그래디언트 효과가 진행될 방향을 설정할 수 있습니다.
그래디언트의 진행 방향은 top, right, bottom, left 뿐만 아니라 대각선으로도 설정할 수 있습니다.
선형 그래디언트(linear gradient) 효과의 기본 진행 방향은 위쪽에서 아래쪽으로 진행됩니다.
다음 예제는 위쪽에서 아래쪽으로 진행되는 선형 그래디언트 예제입니다.
예)
<style>
#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);
}
</style>
다음 예제는 오른쪽에서 왼쪽으로 진행되는 선형 그래디언트 예제입니다.
예)
<style>
#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);
}
</style>
다음 예제는 왼쪽 아래에서 오른쪽 위로 진행되는 선형 그래디언트 예제입니다.
예)
<style>
#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);
}
</style>
선형 그래디언트 효과의 진행 방향을 각도로 명시하여 설정할 수도 있습니다.
기준 각도인 0도는 아래쪽에서 위쪽으로의 진행을 의미합니다.
각도가 양수일 때는 기준 각도를 중심으로 시계방향으로 회전하며, 음수일 때는 반시계방향으로 회전합니다.
다음 예제는 225도의 진행 방향을 가지는 선형 그래디언트 예제입니다.
예)
<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>
위에서 살펴본 선형 그래디언트는 -135도의 진행 방향을 가지는 선형 그래디언트와 같은 그래디언트 효과를 보여줍니다.
선형 그래디언트의 투명도 설정
CSS3에서는 그래디언트의 투명도를 지원하며, 지정된 색상이 서서히 사라지는 효과를 사용할 수 있습니다.
그래디언트에 투명도를 추가할 때에는 RGBA 색상값을 사용하면 됩니다.
RGBA 색상값의 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.
다음 예제는 왼쪽에서 오른쪽으로 서서히 사라지는 선형 그래디언트 예제입니다.
예)
<style>
#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));
}
</style>
repeating-linear-gradient() 메소드
repeating-linear-gradient() 메소드는 선형 그래디언트 효과가 계속 반복되도록 설정합니다.
다음 예제는 150도의 진행 방향을 가지고 반복되는 선형 그래디언트 예제입니다.
예)
<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>
CSS3에서는 그래디언트 효과를 선형뿐만 아니라 원형으로도 나타낼 수 있습니다.
원형 그래디언트(radial gradient)
원형 그래디언트(radial gradient)는 적용된 HTML 요소에 원형으로 그래디언트(gradient) 효과를 적용시켜 줍니다.
원형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요합니다.
원형 그래디언트(radial gradient)의 문법은 다음과 같습니다.
문법
background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...);
원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정됩니다.
예)
<style>
#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);
}
</style>
위의 예제에서 가장 먼저 나오는 background 속성은 redial-gradient 속성을 지원하지 않는 모든 브라우저를 위한 것입니다.
맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드입니다.
이러한 CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있습니다.
색상 지정점 사이의 간격 조절
CSS를 이용하면 원형 그래디언트에서 색상 지정점 사이의 간격을 조절할 수 있습니다.
다음 예제는 색상 지정점 사이의 간격을 다르게 설정한 원형 그래디언트 예제입니다.
예)
<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>
원형 그래디언트의 모양 설정
CSS를 이용하면 원형 그래디언트의 모양을 타원이 아닌 원으로도 설정할 수 있습니다.
다음 예제는 원 모양을 가지는 원형 그래디언트 예제입니다.
예)
<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>
원형 그래디언트의 크기 설정
CSS를 이용하면 원형 그래디언트의 크기를 설정할 수 있습니다.
이때 크기를 나타내기 위해 사용할 수 있는 매개변수는 다음과 같습니다.
- closest-side : 원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기로 설정됩니다.
- farthest-side : 원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기로 설정됩니다.
따라서 가까운 면에서는 그래디언트의 일부분이 화면을 넘을 것입니다.
- closest-corner : 원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기로 설정됩니다.
- farthest-corner : 원형 그래디언트의 크기가 가장 먼 모서리에 닿을 만큼의 크기로 설정됩니다.
이 크기가 기본 설정이며, 가까운 모서리에서는 그래디언트의 일부분이 화면을 넘을 것입니다.
다음 예제는 다양하게 크기를 조절한 원형 그래디언트 예제입니다.
예)
<style>
#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); }
</style>
repeating-radial-gradient() 메소드
repeating-radial-gradient() 메소드는 원형 그래디언트 효과가 계속 반복되도록 설정합니다.
다음 예제는 반복되는 원형 그래디언트 예제입니다.
예)
<style>
#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%);
}
</style>
CSS3 그림자 효과
CSS3에서는 텍스트나 HTML 요소에 간단히 그림자 효과를 적용할 수 있습니다.
CSS3에서 사용할 수 있는 shadow 속성은 다음과 같습니다.
1. text-shadow
2. box-shadow
text-shadow 속성
text-shadow 속성은 해당 텍스트에 간단히 그림자 효과를 적용해 줍니다.
text-shadow 속성의 문법은 다음과 같습니다.
문법
text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;
그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시합니다.
다음 예제는 CSS3에서 텍스트에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제입니다.
예)
<style>
#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; }
</style>
box-shadow 속성
box-shadow 속성은 해당 HTML 요소에 간단히 그림자 효과를 적용해 줍니다.
box-shadow 속성의 문법은 text-shadow 속성을 사용하는 문법과 같습니다.
문법
box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;
그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시합니다.
다음 예제는 CSS3에서 HTML 요소에 적용할 수 있는 다양한 그림자 효과를 보여주는 예제입니다.
예)
<style>
#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; }
</style>
CSS3 배경
CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있습니다.
또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있습니다.
CSS3에서 새롭게 추가된 background 속성은 다음과 같습니다.
1. background-size
2. background-origin
3. background-clip
CSS2 배경
background 속성은 HTML 요소의 배경에 다양한 효과를 줄 수 있게 해줍니다.
CSS2까지는 다음과 같은 background 속성만을 사용할 수 있었습니다.
1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
background-size 속성
background-size 속성은 배경 이미지의 크기를 설정합니다.
CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같았습니다.
하지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있습니다.
background-size 속성의 문법은 다음과 같습니다.
문법
background-size: 너비 높이 contain|cover ;
배경 이미지의 너비와 높이를 명시할 때는 CSS 크기 단위를 사용합니다.
CSS 크기 단위에는 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등이 있습니다.
예)
<style>
#origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; }
#resize {
background: url(/examples/images/img_monitor.png);
background-size: 200px 110px;
background-repeat: no-repeat;
}
</style>
background-size 속성값은 contain과 cover 중에서 선택할 수 있습니다.
속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절합니다.
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않습니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있습니다.
속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절합니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있습니다.
다음 예제는 background-size 속성값에 따른 차이점을 보여주는 예제입니다.
예)
<style>
#contain { background-size: contain; }
#cover { background-size: cover; }
</style>
background-size 속성을 사용하여 이미지의 비율을 유지하지 않고, 해당 요소의 전부를 가리도록 설정할 수도 있습니다.
예)
<style>
html { background: url(/examples/images/img_flower.png) no-repeat center fixed; background-size: cover; }
</style>
background-origin 속성
background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정합니다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.
1. border-box : 배경 이미지를 테두리(border) 영역의 왼쪽 위에 맞춥니다.
2. padding-box : 기본 설정이며, 배경 이미지를 패딩(padding) 영역의 왼쪽 위에 맞춥니다.
3. content-box : 배경 이미지를 내용(content) 영역의 왼쪽 위에 맞춥니다.
다음 예제는 background-origin 속성값에 따른 차이점을 보여주는 예제입니다.
예)
<style>
#border { background-origin: border-box; }
#content { background-origin: content-box; }
</style>
background-clip 속성
background-clip 속성은 해당 요소의 배경을 어느 영역까지 설정할지를 결정합니다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.
1. border-box : 기본 설정이며, 배경을 테두리(border) 영역의 끝부분까지 설정합니다.
2. padding-box : 배경을 패딩(padding) 영역의 끝부분까지 설정합니다.
3. content-box : 배경을 내용(content) 영역까지만 설정합니다.
다음 예제는 background-clip 속성값에 따른 차이점을 보여주는 예제입니다.
예)
<style>
#padding { background-clip: padding-box; }
#content { background-clip: content-box; }
</style>
여러 개의 배경 이미지 설정
background-image 속성을 사용하면 하나의 요소에 여러 개의 배경 이미지를 설정할 수 있습니다.
각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓이게 됩니다.
배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타납니다.
즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치하게 됩니다.
다음 예제는 background-image 속성을 이용하여 여러 개의 배경 이미지를 설정하는 예제입니다.
예)
<style>
#origin {
background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
background-position: right top, left;
background-repeat: no-repeat, repeat;
background-size: 100px 233px, auto;
}
</style>
CSS3 테두리
CSS3에서는 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있습니다.
CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다.
1. border-radius
2. border-top-left-radius
3. border-top-right-radius
4. border-bottom-right-radius
5. border-bottom-left-radius
6. border-image
7. border-image-source
8. border-image-slice
9. border-image-width
10. border-image-outset
11. border-image-repeat
CSS2 테두리
border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해줍니다.
CSS2까지는 다음과 같은 border 속성만을 사용할 수 있었습니다.
1. border
2. border-style
3. border-width
4. border-color
5. border-top
6. border-right
7. border-bottom
8. border-left
border-radius 속성
CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있습니다.
예)
<style>
#p_01 { height: 150px; width: 200px; border-radius: 25px; }
#div_01 { height: 150px; width: 200px; border-radius: 25px; }
#p_02 {
background: url(/examples/images/img_background_good.png);
background-position: left top;
background-repeat: repeat;
border-radius: 25px;
}
</style>
border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것입니다.
따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있습니다.
1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
다음 예제는 모서리별로 다른 크기의 둥근 모서리를 설정하는 예제입니다.
예)
<style>
#p_01 {
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
}
</style>
또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있습니다.
예)
<style>
#p_01 { border-radius: 20px 40px 60px 80px; }
#p_02 { border-radius: 20px 40px 60px; }
#p_03 { border-radius: 20px 40px; }
#p_04 { border-radius: 20px; }
</style>
4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정됩니다.
ex) border-radius: 20px 40px 60px 80px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정됩니다.
ex) border-radius: 20px 40px 60px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 40px;
2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정됩니다.
ex) border-radius: 20px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;
1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정됩니다.
ex) border-radius: 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-image 속성
CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있습니다.
border-image 속성은 다음과 같은 순서로 동작합니다.
1. 테두리(border)로 사용할 이미지를 결정합니다.
2. 이미지의 어느 부분을 자를 것인지 결정합니다.
3. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정합니다.
우선 테두리로 사용할 이미지를 결정합니다.
border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눕니다.
그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 됩니다.
다음 예제는 round 속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정한 예제입니다.
예)
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
border-image: url(/examples/images/img_css3_pattern.png) 34 round;
}
</style>
border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 합니다.
다음 예제는 stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정한 예제입니다.
예)
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
}
</style>
위의 예제에서 볼 수 있듯이 border-image 속성값으로 전달되는 인수의 기본 단위는 %입니다.
또한, 수직 테두리와 수평 테두리의 처리 방식을 다르게 설정할 수도 있습니다.
예)
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
}
</style>
border-image 속성은 실제로 다음 5가지 속성의 스타일을 한 줄에 설정한 것입니다.
1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat
CSS3 텍스트
CSS3에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었습니다.
CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같습니다.
1. text-overflow
2. word-wrap
3. word-break
CSS2 텍스트
CSS2까지는 다음과 같은 텍스트 속성만을 사용할 수 있었습니다.
1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-indent
6. text-align
7. text-decoration
8. text-transform
9. line-height
10. text-shadow
11. unicode-bidi
12. vertical-align
13. white-space
text-overflow 속성
text-overflow 속성은 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정합니다.
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현할 수도 있습니다.
예)
<style>
p { white-space: nowrap; width: 250px; overflow: hidden; }
#p_01 { text-overflow: clip; }
#p_02 { text-overflow: ellipsis; }
</style>
overflow 속성값을 visible로 설정하면, 사용자에게 콘텐츠 영역을 벗어나 생략된 텍스트까지 보여줄 수 있습니다.
예)
<style>
#p_01:hover, #p_02:hover { overflow: visible; }
</style>
word-wrap 속성
word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해줍니다.
예)
<style>
p { border: solid 1px black; width: 130px; }
#p_01, #p_03 { word-wrap: break-word; }
</style>
word-wrap 속성은 영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않습니다.
word-break 속성
word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정합니다.
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있습니다.
예)
<style>
p { border: solid 1px black; width: 130px; }
#p_02 { word-break: break-all; }
#p_03 { word-break: keep-all; }
</style>
위의 예제에서 word-wrap 속성과 word-break 속성의 차이를 확인할 수 있습니다.
word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용됩니다.
CSS3 웹 글꼴
CSS3에서는 웹 글꼴을 사용하여 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용할 수 있게 해줍니다.
CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었습니다.
- @font-face 규칙
CSS2 글꼴
CSS2까지는 다음과 같은 font 속성만을 사용할 수 있었습니다.
1.font-family
2.font-style
3.font-variant
4.font-weight
5.font-size
웹 글꼴의 형식
웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같습니다.
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 OpenType Fonts, EOT)
임베디드 오픈 타입 글꼴은 Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴입니다.
@font-face 규칙
@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙입니다.
웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해줍니다.
우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가합니다.
그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 됩니다.
CSS3에서 @font-face 규칙을 사용하려면, 우선 font-family 속성을 이용하여 새로운 웹 글꼴을 위한 이름을 정의해야 합니다.
그 후에 해당 웹 글꼴이 사용할 글꼴 파일의 주소를 지정해 주면 됩니다.
예)
<style>
@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; }
</style>
웹 글꼴의 두꺼운 글씨체(bold text)를 위한 @font-face 규칙도 다음과 같이 추가로 설정할 수 있습니다.
예)
<style>
@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; }
</style>
위의 예제에서 웹 브라우저는 새로 만든 웹 글꼴을 적용하면서 두꺼운 글씨체에는 위의 규칙을 적용할 것입니다.
이와 같은 방법으로 하나의 웹 글꼴을 위한 수많은 @font-face 규칙을 생성할 수 있습니다.
댓글