transform의 기준점을 정의하는 속성. 기본값은 50% 50%다.
3차원 변환 효과에만 적용되는 원근감을 주는 속성, 함수도 존재한다.
값이 클수록 더 멀리 있는듯한 효과를 준다.
함수로 사용할 땐 item에 직접 적용하지만, 속성으로 사용할 땐 적용하고 싶은 item의 부모에 적용해야 한다.
perspecetive 효과의 기준점을 정의하는 속성. 기본값은 50% 50%다.
3차원 변환 효과를 중첩해서 사용하기 위한 속성. 기본값은 flat이다.
CSS는 이미 3차원 변환 효과가 적용된 요소의 자식 요소는 3차원 효과가 적용되지 않는다.
자식 요소의 상위 요소에 preserve-3d
값을 이용해서 해결이 가능하다.
자식 요소에만 적용되므로, 후손 요소에도 적용하려면 반복해서 사용해야 한다.
요소의 뒷면이 사용자에게 보여야 하는지를 정의하는 속성. 기본값은 visible이다.
몇 개의 단으로 나눌지 정하는 속성. 기본값은 auto(1)다.
단의 너비를 지정하는 속성. 기본값은 auto다.
해당 너비를 그대로 사용하는 것이 아닌, 해당 너비를 기준으로 최적의 값을 찾아 적용한다.
너비 값에 따라 column-count가 자동으로 조정될 수 있다.
단축 속성인 columns
를 이용해서 count와 width를 동시에 정의할 수 있다.
단과 단 사이에 테두리를 만드는 단축 속성
단과 단 사이의 간격을 정의하는 속성. 기본값은 normal이다.
column-rule로 생성된 테두리의 너비에 영향을 받지 않는다.
column을 제외하고 gap으로 축약해서 사용이 가능하다.
각종 함수를 이용해서 필터 효과를 적용한다.
CSS에서도 변수를 정의해서 사용할 수 있다.
- 특정 요소에서 선언한 변수는 해당 요소에 종속되며, 후손에게 상속된다.
--
로 시작하는 변수명을 선언하며, 변수 사용은 var(variable[, defaultValue])
함수를 이용한다.
유효 범위가 존재하기 때문에, 지역 변수를 이용해서 값을 덮어쓸 수 있다.
브라우저의 지원 여부에 따라 다른 스타일을 사용할 수 있게끔 하는 기능
@supports [not] (property) [and ...()] { style }
형태로 사용한다.
아래처럼 and
와 or
키워드를 이용해서 조건을 확장할 수 있다.
@supports (display: grid) and (display: flex) {
.container {
display: grid;
}
.container .item {
display: flex;
}
}
selector()
함수를 이용해 가상 요소 및 가상 클래스의 여부도 알 수 있다.단말기의 유형과 viewport의 크기에 따라 다른 스타일을 사용할 수 있게끔 하는 기능
@media [type and] [not] (property) [and ...()] { style }
형태로 사용한다.
not
연산자를 사용할 땐 반드시 type
을 명시해야 한다.
쉼표(,
)를 이용해서 여러 type
의 media query를 한 번에 작성할 수 있다.
<link>
태그의 media
속성을 통해 inline으로 적용하면, 해당 파일 자체에 적용된다.
가로와 세로 비율에 따라 다른 스타일을 적용할 수 있게 하는 속성
portrait
landscape
자세한 내용은 @media - CSS | MDN를 참고하자.