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

type: HTML/CSS archive: false

CSS3 개요

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)

CSS3에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있습니다.

W3C CSS Snapshot 2017 : W3C Working Group Note, 31 January 2017 =>

CSS 표준 권고안의 모듈별 현재 상태에 대해 자세히 알고 싶다면, 다음 링크를 방문하여 확인할 수 있습니다.

W3C CSS current work & how to participate =>

CSS3 선택자

CSS3 선택자(selector)

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

선택자(selectors) Level 3

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

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

CSS3에서 새롭게 정의된 선택자에 대한 더 자세한 사항은 CSS 선택자 수업에서 확인할 수 있습니다.

CSS 선택자 수업 확인 =>

벤더 프리픽스

벤더 프리픽스(Vendor Prefix)

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다.

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.

즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.

그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.

주요 웹 브라우저의 벤더 프리픽스(vendor prefix)

주요 웹 브라우저가 사용하고 있는 벤더 프리픽스는 다음과 같습니다.

익스플로어 크롬 라이어폭스 사파리
-ms- -webkit- -moz- -webkit- -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>

위의 예제에서 가장 먼저 나오는 background 속성은 gradient 속성을 지원하지 않는 모든 브라우저를 위한 것입니다.

또한, 맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드입니다.

CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있습니다.

이러한 벤더 프리픽스는 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나, 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어집니다.

CSS3 색

CSS3에서 새롭게 추가된 색 표현 방법은 다음과 같습니다.

  1. RGBA 색상값으로 표현

  2. HSL 색상값으로 표현

  3. HSLA 색상값으로 표현

  4. opacity 속성

CSS2 색

CSS2까지는 색을 표현하기 위해서 다음 방법만을 사용할 수 있었습니다.

  1. 색상 이름으로 표현

  2. RGB 색상값으로 표현

  3. 16진수 색상값으로 표현

CSS 색 수업 확인 =>

CSS3에서 추가된 색상값 및 opacity 속성 지원 버전

CSS3에서 추가된 색상값 및 opacity 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

속성 익스플로어 크롬 파이어폭스 사파리
RGBA 색상값,HSL 색상값,HSLA 색상값 9 4 3 3.1 10.1
opacity 9 4 2 3.1 10.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>

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>
⚠️ **GitHub.com Fallback** ⚠️