[Web] CSS3

CSS ( Cascading Style Sheets )

 

CSS 1 : 1996
CSS 2 : 1998
CSS 2.1 : 2007
CSS 3 : 2012년 부터 모듈별로 발표

* CSS3 : CSS leverl 3
https://developer.mozilla.org/ko/docs/Web/CSS/CSS3
    다중열(multi-columns), 유동적인 상자(flexible box), 격자 배치(grid layouts) 뿐만 아니라 둥그런 모서리(rounded corners), 그림자( shadows) , 부드러운 색의 변이(gradients) , 변이(transitions), 움직임(animations) 등도 지원


* CSS Browser Support Reference
https://www.w3schools.com/cssref/css3_browsersupport.asp


* CSS3 지원 테스트
https://css3test.com


https://caniuse.com/#search=css3
    - 부정확한것도 있음, attr()

 

//============
* CSS 함수
https://www.w3schools.com/cssref/css_functions.asp
attr() Returns the value of an attribute of the selected element
calc() Allows you to perform calculations to determine CSS property values
var() Inserts the value of a custom property


//=============
* 변수 사용가능
https://www.w3schools.com/cssref/func_var.asp
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

:root {
  --main-bg-color: coral; 
}

#div1 {
  background-color: var(--main-bg-color); 
}


//=====================
* BEM(Block Element Modifier)
    - CSS 클래스 작명 규칙 : block__element‐‐modifier


//==================
* composes 키워드

    - 외부 모듈 사용

.classA {
    background-color: green;
    color: white;
}

.classB {
    composes: classA;
    composes: dark-text from "./colors.css";
    color: blue;
}