1. CSS3 소개
2. CSS3 접두어
3. border-radius 속성
4. box-shadow 속성
5. 투명 효과
6. text-shadow 속성
7. 유사 클래스 (Pseudo-Classes)
8. 유사 요소 (Pseudo-Elements)
9. word-wrap
10. @font-face
1. CSS3 소개
1. CSS3는 하위 버전들과 완벽하게 호환되는 CSS의 최신 표준이다.
새롭게 달라진 주요 기능들
- Border radius : 요소들 코너를 둥글게 하는 것이 가능해졌다.
- Border images : 경계선에 이미지를 넣는 것이 가능해졌다.
- Multiple backgrounds : 여러가지 배경을 요소에 넣을 수 있다.
- Animations and effects : 애니메이션 추가되었다.
2. 새로운 기능
웹 개발을 쉽고 빠르게 하기 위해 CSS3에 다음과 같은 추가 기능들이 있다.
- Box Shadow : 색상, 크기, 블러, 오프셋 값을 정하여 하나 이상의 그림자를 첨부할 수 있다.
- Gradients : 요소의 배경에 그라데이션을 줄 수 있다. Linear, Radial 타입의 그라데이션이 가능하다.
- Transform : 요소를 회전, 스케일, 이동, 기울일 수 있다.
- Transition : 하나의 CSS 속성에서 다른 CSS속성으로 전환할 수 있는 에니메이션. Transforms와 결합하여 요소의 위치, 회전, 크기 등을 애니메이션으로 만들 수 있다.( 가장 주목받고 있는 기능으로 자체 사양을 가지고 키 프레임을 만들며 시간 설정 등을 조작할 수 있다. )
2. CSS3 접두어
웹 브라우저 개발사들이 CSS의 추가 기능 개발건으로 테스트를 위해 CSS3 접두어를 추가했다. 이 접두어는 CSS의 정식 스펙은 아니다. 예를 들어 사파리와 크롬은 -webkit이 접두어이다. border-radius 속성은 편재 크롬, 사파리, 모질라에서 접두어가 붙어있는 한 지원된다. 접두어는 그 속성을 지원하지 않는 웹 브라우저에서도 페이지가 동작할 수 있게 하기 위해 추가되었다. 따라서 동일한 속성이 여러 브라우저를 지원하기 위해 접두어만 다를수도 있다.
|
|
브라우저에 따른 접두어 목록이다.
3. border-radius 속성
CSS3에서 어떤 요소든지 border-radius 속성으로 모서리를 둥글게 만들 수 있다.
아래 코드는 네 모서리에 20px을 반지름으로 하는 원크기의 굴곡이 생긴다.
|
|
모서리별로 둥근 정도를 다르게 할 수 있다. top-left, top-right, bottom-right, bottom-left 순서로 값을 정한다.
|
|
가로 세로가 200px인 요소에 모서리 굴곡값을 100px로 하면 원이 그려진다.
|
|
4. box-shadow 속성
1. CSS3의 box-shadow 속성으로 요소에 그림자 효과를 줄 수 있다. box-shadow 속성은 브라우저에 의해 다음과 같은 방법으로 디코딩된다.
- 첫번째 값은 그림자와 요소의 수평 거리이다. 음수값 기입 가능. 반드시 기입해야 한다.
- 두번째 값은 그림자와 요소의 수직 거리이다. 음수값 기입 가능. 반드시 기입해야 한다.
- 세번째 값은 blur 값이다. 음수값 불가. 옵션값이다.
- 네번째 값은 spread 값이다. 음수값 기입하면 그림자 수축효과. 옵션값이다.
- 다섯번째 값은 그림자의 색이다. 옵션값이다.
|
|
- insert 키워드로 그림자를 요소 안으로 그리는 것이 가능하다.
|
|
3. 멀티 그림자 효과
- 한 요소에 다양한 그림자 효과를 동시에 지정할 수 있다. 각 그림자들을 , 로 구분한다.
|
|
5. 투명 효과
1. CSS3 전에는 배경을 반투명하게 하기 위해 배경 이미지 자체를 반투명하게 만들어서 사용했다. CSS3에서는 반투명 효과를 더 쉽게 만들어낼 수 있다. 반투명 효과를 위해 CSS3는 rgba, HSL색을 지원한다.
- rgba(red, green blue, alpha) : alpha 파라미터는 0.0(완전 투명) ~ 1.0(완전 불투명) 값을 갖는다.
- hsla(hue, saturation, lightness, alpha) :
- hue : 색조는 0~360의 값을 갖는다. 0은 red, 120은 green 240은 blue다.
- saturation : 채도는 0~100%의 값을 갖는다.
- lightness : 밝기도 0(black)~100%(white)의 값을 갖는다.
- alpha : 0.0(완전 투명) ~ 1.0(완전 불투명) 값을 갖는다.
|
|
6. text-shadow 속성
test-shadow 속성으로 여러개 그림자 효과를 지정할 수 있다. 각 그림자 효과는 , 로 구분한다.
여러개의 그림자 효과가 올떄 가장 마지막에 기입된 효과가 맨 위에 표시된다. 즉, 역순으로 표시된다.
|
|
그림자 효과를 좀 더 리얼하게 나타내기 위한 팁
- 그림자는 텍스트에 가까울수록 선명하다(blur가 낮다). 텍스트에 멀리 떨어질수록 그림자는 더 밝다.
- 그림자는 텍스트에 가까울수록 텍스트 밑부분에 가깝다.
7. 유사 클래스(Pseudo-Classes)
자바 스크립트나 다른 스크립트 없이 유사 클래스를 스타일 요소에 적용할 수 있다. 유사 클래스는 ":" 으로 시작한다. 가장 많이 사용되는 유사 클래스는 :first-child 와 :last-child이다.
- :first-child -> 선택된 요소중 첫번째 요소에 해당한다.
- :last-child -> 선택된 요소중 마지막 요소에 해당한다.
|
|
8. 유사 요소(Pseudo-Elements)
유사 요소는 특정 요소들을 선택하기 위해 사용한다. 다섯가지 유사 요소가 있다. 유사 요소는 "::"으로 시작한다.
- ::first-line -> 선택된 요소 중 첫번째 줄을 선택한다.
- ::first-letter -> 선택된 요소 중 첫번째 글자를 선택한다.
- ::selection -> 사용자가 선택한 요소를 선택해서 스타일을 적용한다.
- ::before -> 선택된 요소의 바로 앞에 요소를 삽입한다.
- ::after -> 선택된 요소의 바로 뒤 요소를 삽입한다.
|
|
|
|
|
|
9. word-wrap
word-wrap 속성은 긴 문장을 단어 단위로 다음 줄로 넘기는 것을 의미한다. 가능한 값으로는 normal과 break-word가 있다.
|
|
10. @font-face
@font-face 규칙은 새로 정의된 글꼴을 웹 페이지에 로드한다. 이것 때문에 글꼴이 클라이언트 PC에 설치되지 않아도 사용할 수 있다. IE8 이전 버전은 글꼴이 eot여가 하고 반면에 다른 브라우저는 ttf와 otf를 지원한다.
@font-face를 사용하기 위해 반드시 font-family 속성이 먼저 정의되어야 한다.
|
|
IE에 2개 이상의 @font-face가 오면 버그가 있는데 #iefix를 사용해서 해결한다.
|
|
<연관게시글>
