정중앙을 기준으로 변형하되, transform-origin을 사용하여 x, y축을 인자로 넣으면 해당 값대로 기준점을 형성함.
transition-duration : 변형이 일어나는 시간을 지속함 → 부드럽게 이동 가능함.
perspective: 원근법을 적용하여 요소가 입체적으로 보일 수 있도록 함. 인자로 원근의 거리를 넣어줌. 클수록 멀리서 보는 효과. 변화가 일어나는 부모 요소에 적용함.
perspective-origin : 요소를 바라보는 위치를 결정함. 원근이 적용될 기준점을 x, y축으로 지정함. 기본 값은 x, y축 각각 50%임.
transform-style : 3차원 효과가 적용된 item의 자식 요소는 추가적인 3차원 효과를 적용할 수 없음. 하지만 속성값으로 preserve-3d를 적용하면 3차원 변환효과를 줄 수 있음. 하지만 자식 요소만 줄 수 있기 때문에 후손 요소는 유지되지 않기 때문에 유지를 원한다면 계속 작성해주어야함.
backface-visibility : 요소에 뒷면이 있음. 이를 hidden으로 지정하면 회전이 일어났을 때 요소의 뒷면이 보이지 않음 → 형제 요소로 뒷면을 rotateY(-180deg)로 미리 뒤집어 놓아 형제 요소를 앞뒷면으로 만들 수 있음.
hue-rotate() : 인자로 각도(deg)가 들어가며, 각도에 맞게 지정된 색깔이 입혀짐.
backdrop-filter : 자기 자신에 필터를 적용하는 것이 아닌 요소 배경에 보여지는 요소에 적용할 수 있음. filter의 속성 모두 사용 가능함. 하위 호완성 주의하기!
변수
:root{} 로 사용자 지정 속성을 할당할 수 있음. html과 동일하나 root가 명시도가 좀 더 높음.
조상 요소에서 할당 받은 걸 자신의 유효범위 내부에서 재할당하면 재할당된 속성으로 할당됨.
이처럼 변수는 유효범위에 영향을 받음.
var()의 두 번째 인수를 지정하면 변수의 초기값을 할당할 수 있음. 따라서 사용자 지정 속성이 없을 때 초기값을 사용함.
@supports
CSS를 브라우저가 지원하는지에 따라 다른 스타일을 선언할 수 있는 방법을 제공함.
크로스 브라우징을 위함.
/*브라우저가 grid 기능을 지원한다면 grid를 적용하겠다라는 의미*/
@supports (display: grid) {
div {
display: grid;
}
}
/*지원하지 않을 경우 대체 속성을 지정할 수 있음*/
@supports not (display: grid) {
div {
float: right;
}
}
or, and 키워드로 여러 속성을 지정할 수 있음.
기능을 추가하는 괄호 안에 selector()를 사용하면 가상 선택자에 대한 크로스 브라우징이 가능함.
@media
반응형 레이아웃을 만들 때 사용함.
@media 타입 and (기능) {스타일}의 형태를 가짐.
타입을 작성하지 않을 경우 기본 값 all로 지정됨.
and, not 키워드 사용 가능. 단 not을 사용하려면 미디어 타입을 all, screen 등 미디어 타입을 명시해주어야 함.
쉼표로 여러 미디어 쿼리를 지정할 수 있음.
/*편집기에서 파일 전체에 미디어쿼리 적용하는 방법*/
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/main-md.css" media="all and (max-width: 700px)">
