CSS3 란 (Cascading Style Sheets)

CSS3 란 (Cascading Style Sheets)

• 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다.
• 차세대 웹 개발을 위한 새로운 표준이다.
• 최신버전의 CSS 이며 기존 CSS2.1에서 부족한 부분을 보완하고 개선한 버전이다.

[ 예시 ]

css3 장점 - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있다.

• 다중 컬럼 레이아웃(Multiple column layout) 컬럼 갯수 정의하여 다수의 컬럼(세로단)에 텍스트를 배치할 수 있다.
  • column-count 컬럼의 갯수를 직접 지정. 컬럼의 너비는 컬럼 갯수 기반으로 자동으로 결정(table)
  • column-width 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록한다.
  • column-gap 컬럼 간 띄어질 공간 지정한다.
  • column-rule 컬럼 구분 막대의 border style을 지정한다.
• 텍스트효과 및 블럭효과
  • text-stroke: 이미지로 텍스트 효과를 줬어야 했던 부분을 스타일로 지정할 수 있다.
  • text-shadow: 그림자 효과를 줄 수 있다.
  • border-radius: 테두리 효과를 줄 수 있다.
  • line-gradient , gradient: 그라디언트를 줄 수 있다.
  • JavaScript를 사용하지않고도 애니메이션을 만들거나 변형할 수 있다.
  • translate: 단락이나 배치를 세세하게 정의할 수도 있다.

새로운 기능 추가를 시범 적용하기 위해 접두어(Vendor prefix)를 사용하였다

safari, chrome	-webkit-
opera	-o-
internet explorer	-ms-

 

예시

-webkit-transform:translateY(50px);

참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS3

http://tcpschool.com/css/css3_module_intro