CSS3 07. 모듈3 - swkim0128/PARA GitHub Wiki

CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있습니다.  또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있습니다.

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

1. background-size

2. background-origin

3. background-clip

background 속성은 HTML 요소의 배경에 다양한 효과를 줄 수 있게 해줍니다.

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

1. background-color

2. background-image

3. background-repeat

4. background-position

5. background-attachment

CSS 배경 수업 확인 =>

CSS3 배경(background) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

background-size 속성은 배경 이미지의 크기를 설정합니다.

CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같았습니다.

하지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있습니다.

background-size 속성의 문법은 다음과 같습니다.

배경 이미지의 너비와 높이를 명시할 때는 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 속성은 배경 이미지의 위치를 결정할 기준을 설정합니다.

이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.

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 속성은 해당 요소의 배경을 어느 영역까지 설정할지를 결정합니다.

이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.

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에서 새롭게 추가된 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

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

CSS 테두리(border) 수업 확인 =>

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

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;

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에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었습니다.

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

1. text-overflow

2. word-wrap

3. word-break

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

CSS 텍스트 수업 확인 =>

CSS3 텍스트 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

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 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해줍니다.

<style>
p { border: solid **1px** black; width: **130px**; }
\#p_01, #p_03 { word-wrap: break-word; }
</style>

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

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에서는 웹 글꼴을 위해 다음 규칙이 추가되었습니다.

• @font-face 규칙

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

1.font-family

2.font-style

3.font-variant

4.font-weight

5.font-size

CSS 글꼴 수업 확인 =>

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

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

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)

트루 타입 글꼴은 Apple과 Microsoft가 공동으로 개발한 외곽선 글꼴 표준입니다.

이 글꼴은 맥(MAC)과 윈도우(Window) 운영체제에서 가장 오랫동안 사용되어 온 대표적인 글꼴입니다.

트루 타입 글꼴은 해당 글꼴이 다양한 글꼴 크기에서 어떻게 표현될지에 대한 수준 높은 제어를 할 수 있게 해줍니다.

오픈 타입 글꼴은 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준입니다.

이 글꼴은 트루 타입 글꼴의 뒤를 잇기 위해 Microsoft에서 개발하였으며, 현재는 거의 모든 컴퓨터에서 사용되고 있습니다.

오픈 타입 글꼴은 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있다는 장점을 가지고 있습니다.

웹 오픈 글꼴은 웹 페이지에서 사용할 수 있는 글꼴 표준이며, 현재 W3C에서 사용을 권장하고 있는 글꼴 표준입니다.

이 글꼴은 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴입니다.

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

SVG 글꼴은 SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준입니다.

이 글꼴은 SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해줍니다.

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

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

@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 규칙을 생성할 수 있습니다.