[TIL] CSS 심화

JaeungE·2022년 4월 30일
0

TIL

목록 보기
16/29
post-thumbnail

Transform 3D


transform-origin

transform의 기준점을 정의하는 속성. 기본값은 50% 50%다.

  • 첫 번째 값은 x축, 두 번째 값은 y축에 해당한다.



perspective

3차원 변환 효과에만 적용되는 원근감을 주는 속성, 함수도 존재한다.

  • 값이 클수록 더 멀리 있는듯한 효과를 준다.

  • 함수로 사용할 땐 item에 직접 적용하지만, 속성으로 사용할 땐 적용하고 싶은 item의 부모에 적용해야 한다.



perspective-origin

perspecetive 효과의 기준점을 정의하는 속성. 기본값은 50% 50%다.

  • 사용방법은 transform-origin과 같다.



transform-style

3차원 변환 효과를 중첩해서 사용하기 위한 속성. 기본값은 flat이다.

  • CSS는 이미 3차원 변환 효과가 적용된 요소의 자식 요소는 3차원 효과가 적용되지 않는다.

  • 자식 요소의 상위 요소에 preserve-3d 값을 이용해서 해결이 가능하다.

  • 자식 요소에만 적용되므로, 후손 요소에도 적용하려면 반복해서 사용해야 한다.



backface-visibility

요소의 뒷면이 사용자에게 보여야 하는지를 정의하는 속성. 기본값은 visible이다.



다단(multi-column)


column-count

몇 개의 단으로 나눌지 정하는 속성. 기본값은 auto(1)다.



column-width

단의 너비를 지정하는 속성. 기본값은 auto다.

  • 해당 너비를 그대로 사용하는 것이 아닌, 해당 너비를 기준으로 최적의 값을 찾아 적용한다.

  • 너비 값에 따라 column-count가 자동으로 조정될 수 있다.

  • 단축 속성인 columns를 이용해서 count와 width를 동시에 정의할 수 있다.



column-rule

단과 단 사이에 테두리를 만드는 단축 속성

  • border와 같은 특징을 가진다.



column-gap

단과 단 사이의 간격을 정의하는 속성. 기본값은 normal이다.

  • column-rule로 생성된 테두리의 너비에 영향을 받지 않는다.

  • column을 제외하고 gap으로 축약해서 사용이 가능하다.



Filter


각종 함수를 이용해서 필터 효과를 적용한다.



변수


CSS에서도 변수를 정의해서 사용할 수 있다.

  • 특정 요소에서 선언한 변수는 해당 요소에 종속되며, 후손에게 상속된다.
  • --로 시작하는 변수명을 선언하며, 변수 사용은 var(variable[, defaultValue])함수를 이용한다.

  • 유효 범위가 존재하기 때문에, 지역 변수를 이용해서 값을 덮어쓸 수 있다.



@supports


브라우저의 지원 여부에 따라 다른 스타일을 사용할 수 있게끔 하는 기능

  • @supports [not] (property) [and ...()] { style } 형태로 사용한다.

  • 아래처럼 andor 키워드를 이용해서 조건을 확장할 수 있다.

@supports (display: grid) and (display: flex) {
	.container {
		display: grid;
	}
	.container .item {
		display: flex;
	}
}
  • selector() 함수를 이용해 가상 요소 및 가상 클래스의 여부도 알 수 있다.



@media


단말기의 유형과 viewport의 크기에 따라 다른 스타일을 사용할 수 있게끔 하는 기능

  • @media [type and] [not] (property) [and ...()] { style } 형태로 사용한다.

  • not 연산자를 사용할 땐 반드시 type을 명시해야 한다.

  • 쉼표(,)를 이용해서 여러 type의 media query를 한 번에 작성할 수 있다.

  • <link> 태그의 media 속성을 통해 inline으로 적용하면, 해당 파일 자체에 적용된다.



orientation

가로와 세로 비율에 따라 다른 스타일을 적용할 수 있게 하는 속성

portrait

  • 세로 너비가 가로 너비보다 긴 경우에 적용한다.

landscape

  • 가로 너비가 세로 너비보다 긴 경우에 적용한다.



자세한 내용은 @media - CSS | MDN를 참고하자.

0개의 댓글