7. CSS3 모듈

1. 키워드

CSS3 모듈(Module)

2. CSS3 개요

1) CSS3 변경사항

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

1] 선택자(Selectors) Level 3

2] 미디어 쿼리(Media Queries) Level 3

3] 색(Color) Level 3

4] 네임스페이스(Namespaces)

2) CSS3 모듈

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

1] 선택자(Selectors)

2] 박스 모델(Box Model)

3] 배경(Backgrounds)

4] 이미지(Image Values and Replaced Content)

5] 텍스트 효과(Text Effects)

6] 2D 변형(Transformations)

7] 3D 변형(Transformations)

8] 애니메이션(Animations)

9] 다중 칼럼(Multiple Column) 레이아웃

10] 사용자 인터페이스(User Interface)

3. CSS3 선택자

CSS3에서는 다양한 기능을 하는 많은 선택자가 새롭게 정의되었다.

1) 선택자 Level 3

CSS3에서 새롭게 정의된 선택자는 다음과 같다.

선택자	설명
일반 동위 선택자	해당 요소와 동위 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함.
`[속성이름^="속성값"]` 선택자	특정 속성의 속성값이 특정 문자열로 시작하는 요소를 선택함.
`[속성이름$="속성값"]` 선택자	특정 속성의 속성값이 특정 문자열로 끝나는 요소를 선택함.
`[속성이름*="속성값"]` 선택자	특정 속성의 속성값이 특정 문자열로 시작하는 하나의 단어로 된 요소를 선택함.
`:root`	문서의 루트 요소를 선택함.
`:nth-child`	모든 자식 요소들 중에서 앞에서부터 `n`번째에 위치한 자식 요소를 모두 선택함.
`:nth-last-child`	모든 자식 요소들 중에서 뒤에서부터 `n`번째에 위치한 자식 요소를 모두 선택함.
`:nth-of-type`	모든 자식 요소들 중에서 `n`번째로 등장하는 특정 타입의 요소를 모두 선택함.
`:nth-last-of-type`	모든 자식 요소들 중에서 뒤에서부터 `n`번째로 등장하는 특정 타입의 요소를 모두 선택함.
`:last-child`	모든 자식 요소들 중에서 맨 마지막에 위치한 자식 요소를 모두 선택함.
`:first-of-type`	모든 자식 요소들 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함.
`:last-of-type`	모든 자식 요소들 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함.
`:only-child`	자식 요소를 단 하나만 가지는 모든 요소의 자식 요소를 선택함.
`:only-of-type`	자식 요소로 특정 타입의 요소를 단 하나만 가지는 모든 요소의 자식 요소를 선택함.
`:empty`	자식 요소를 전혀 가지고 있지 않은 요소를 모두 선택함.
`:target`	현재 활성화된 `target` 요소를 모두 선택함.
`:checked`	체크된 상태의 `input` 요소를 모두 선택함.
`:enabled`	사용할 수 있는 `input` 요소를 모두 선택함.
`:disabled`	사용할 수 없는 `input` 요소를 모두 선택함.
`:not(선택자)`	모든 선택자와 함께 사용할 수 있으며, 해당 선택자의 의미를 반대로 적용함.

4. CSS3 색

1) 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>

2) 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>

3) 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>

4) `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>

5) `opacity` 속성과 알파 채널과의 차이점

위에서 살펴본 opacity 속성과 알파 채널 모두 투명도를 조절한다는 공통점을 가지고 있다.

opacity 속성은 투명도를 설정했을 때 설정한 요소의 모든 자식 요소까지 전부 같은 투명도로 설정한다.
하지만 알파 채널은 투명도를 설정한 요소에만 투명도를 설정하는 차이점이 존재한다.

다음 예제는 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>

5. CSS3 선형 그래디언트(Linear Gradient)

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

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

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)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

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

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

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

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

<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도의 진행 방향을 가지는 선형 그래디언트와 같은 그래디언트 효과를 보여준다.

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

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>

3) `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>

6. CSS3 원형 그래디언트(Radial Gradient)

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

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

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 속성은 radial-gradient 속성을 지원하지 않는 모든 브라우저를 위한 것이다.
맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드이다.
이러한 CSS 표준 문법 코드는 벤더 프리픽스로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

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

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>

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

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>

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

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

1] closest-side: 원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기로 설정된다.

2] farthest-side: 원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기로 설정된다. 따라서 가까운 면에서는 그래디언트의 일부분이 화면을 넘을 것이다.

3] closest-corner: 원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기로 설정된다.

4] 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>

4) `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>

7. CSS3 그림자 효과

1) `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>

2) `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>

8. CSS3 배경

CSS3에서 새롭게 추가된 background 속성은 다음과 같다.

1] background-size

2] background-origin

3] background-clip

1) `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으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절한다.
단, 배경 이미지의 크기가 해당 요소의 내용 영역을 넘지는 않는다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다.

속성값을 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>

2) `background-origin` 속성

background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정한다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있다.

1] border-box: 배경 이미지를 테두리 영역의 왼쪽 위에 맞춘다.

2] padding-box: 기본 설정이며, 배경 이미지를 패딩 영역의 왼쪽 위에 맞춘다.

3] content-box: 배경 이미지를 내용 영역의 왼쪽 위에 맞춘다.

다음 예제는 background-origin 속성값에 따른 차이점을 보여주는 예제이다.

<style>
  #border {
    background-origin: border-box;
  }

  #content {
    background-origin: content-box;
  }
</style>

3) `background-clip` 속성

background-clip 속성은 해당 요소의 배경을 어느 영역까지 설정할지를 결정한다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있다.

1] border-box: 기본 설정이며, 배경을 테두리 영역의 끝부분까지 설정한다.

2] padding-box: 배경을 패딩 영역의 끝부분까지 설정한다.

3] content-box: 배경을 내용 영역까지만 설정한다.

다음 예제는 background-clip 속성값에 따른 차이점을 보여주는 예제이다.

<style>
  #padding {
    background-clip: padding-box;
  }

  #content {
    background-clip: content-box;
  }
</style>

4) 여러 개의 배경 이미지 설정

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>

5) CSS3 `background` 속성

속성	설명
`background`	모든 `background` 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
`background-size`	배경 이미지의 크기를 설정함.
`background-origin`	배경 이미지의 위치를 결정할 기준을 설정함.
`background-clip`	해당 요소의 배경을 어느 영역까지로 설정할지를 결정함.
`background-image`	하나의 요소에 여러 개의 배경 이미지를 설정함.

9. 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

1) `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 순으로 설정된다.
3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정된다.
2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정된다.
1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정된다.

2) `border-image` 속성

CSS3에서는 요소를 둘러싸는 테두리에 이미지를 사용할 수 있다.

border-image 속성은 다음과 같은 순서로 동작한다.

1] 테두리로 사용할 이미지를 결정한다.

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>

다음 예제는 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 속성은 실제로 다음 다섯 가지 속성의 스타일을 한 줄에 설정한 것이다.

1] border-image-source

2] border-image-slice

3] border-image-width

4] border-image-outset

5] border-image-repeat

3) CSS3 `border` 속성

속성	설명
`border-radius`	모든 `border-radius` 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
`border-top-left-radius`	테두리의 `top-left` 부분 모서리의 스타일을 설정함.
`border-top-right-radius`	테두리의 `top-right` 부분 모서리의 스타일을 설정함.
`border-bottom-right-radius`	테두리의 `bottom-right` 부분 모서리의 스타일을 설정함.
`border-bottom-left-radius`	테두리의 `bottom-left` 부분 모서리의 스타일을 설정함.
`border-image`	모든 `border-image` 속성을 이용한 스타일 설정이 한 줄에 가능함.
`border-image-source`	테두리로 사용할 이미지를 설정함.
`border-image-slice`	테두리로 사용할 이미지를 자르는 방법을 설정함.
`border-image-width`	테두리로 사용할 이미지의 너비를 설정함.
`border-image-outset`	테두리 영역 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지를 설정함.
`border-image-repeat`	테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정함.

10. CSS3 텍스트

CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같다.

1] text-overflow

2] word-wrap

3] word-break

1) `text-overflow` 속성

text-overflow 속성은 콘텐츠 영역을 벗어난 텍스트를 어떻게 표현할지를 설정한다.
영역을 벗어난 텍스트 부분을 자를 수도 있으며, ...(생략 부호)를 사용하여 표현할 수도 있다.

<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>

2) `word-wrap` 속성

word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해준다.

<style>
  p {
    border: solid 1px black;
    width: 130px;
  }

  #p_01,
  #p_03 {
    word-wrap: break-word;
  }
</style>

Note

word-wrap 속성은 영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않는다.

3) `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 속성의 차이를 확인할 수 있다.

Note

word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용된다.

4) CSS3 `text` 속성

속성	설명
`text-overflow`	콘텐츠 영역을 벗어난 텍스트를 어떻게 표현할지를 설정함.
`word-wrap`	길이가 긴 단어가 콘텐츠 영역을 벗어나면 그 단어를 다음 줄에 나누어 표현할 수 있도록 함.
`word-break`	긴 단어를 나누어 표현해야 할 때 해당 단어가 나뉘는 기준을 설정함.
`text-emphasis`	사용자가 강조 표현을 설정할 수 있도록 함.
`text-align-last`	텍스트의 마지막 줄의 정렬 방법을 설정함.
`text-justify`	텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정함.

11. CSS3 웹 글꼴

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

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)

1) 트루 타입 글꼴

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

2) 오픈 타입 글꼴

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

3) 웹 오픈 글꼴 1.0

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

4) 웹 오픈 글꼴 2.0

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

5) SVG 글꼴

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

6) 임베디드 오픈 타입 글꼴

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

7) `@font-face` 규칙

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

우선 웹 폰트를 서버에 올려놓고, 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>

웹 글꼴의 두꺼운 글씨체를 위한 @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 규칙을 생성할 수 있다.

8) CSS3 `@font-face` 규칙 속성

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