들어가며
오늘 강의에서 transform, perspective, CSS 변수, @supports, @media 등의 기능에 대해 배웠다. 대부분 평소에 자주 사용하지만 제대로 알지 못하고 사용하던 것들이라 배울 수 있는 기회가 있다는 게 좋았다. 최근에 간단한 토이 프로젝트에서 transform과 perspective를 사용했었는데 의도한 대로 동작하지 않았었다. 그때는 어찌저지 해결하고 넘어갔던 것 같은데 아마 제대로 이해 못하고 사용해서 그러지 않았을까 싶다.
Transform
transform 속성은 요소에 회전, 크기 조절, 기울이기 등의 효과를 부여할 수 있다. none 키워드 또는 하나 이상의 transform-function 값을 사용해 지정할 수 있다. transform-function 은 요소에 적용할 하나 이상의 CSS 변형 함수이다.
transform 속성을 사용해 요소를 변환하면 기본적으로 요소의 중심을 기준으로 변환이 일어난다. 기준을 변경하기 위해서 transform-origin 속성을 사용한다.
1 transform-origin: center;2 transform-origin: top left;3 transform-origin: 50px 50px;4 transform-origin: 50% 50%;5 transform-origin: bottom right 60px;
위에서 확인할 수 있는 것처럼 값을 1개, 2개, 또는 3개까지 입력할 수 있다.
1개: 수평 방향의 오프셋을 설정한다. length, percentage, left, center, right, top, bottom 값을 사용할 수 있다.
2개: 두 값 모두 length, percentage 값을 사용할 수 있고, 첫 번째 값은 left, center, right 값을 사용하고, 두 번째 값은 top, center, bottom 값을 사용한다.
3개: 2개를 사용할 때와 같고, 세 번째 값은 Z축 방향의 오프셋을 설정한다.
간단하게 첫 번째 값은 X축 오프셋, 두 번째 값은 Y축 오프셋, 세 번째 값은 Z축 오프셋을 의미한다.
Perspective
3차원 변환함수를 사용할 대, 원근법을 적용하기 위해 사용한다. 3차원 변환 함수의 예로 rotateY() 함수를 들 수 있다. 요소를 Y축 기준으로 지정한 각도만큼 회전시키는 함수인데 perspective 속성 없이 사용하게 되면 3차원 변환인 것처럼 보이지 않는다.
.box 클래스에 마우스를 올렸을 때 3차원 변환 함수인 rotateY() 가 실행되는데 그냥 2차원에서 요소의 너비가 줄어드는 것처럼 보인다. 이때 transform 속성에 perspective 함수를 사용해 값을 설정하면 3차원으로 요소가 변화하는 걸 확인할 수 있다.
perspective 함수에는 얼마만큼의 거리에서 요소를 관찰하는지에 대한 값이 들어간다. 위의 예시에서는 300픽셀만큼 떨어진 곳에서 관찰한다. 가까이 위치한 요소의 길이는 늘어나고, 멀리 위치한 요소의 길이는 줄어드는 것을 확인할 수 있다.
perspective 는 변환이 일어나는 요소의 transform 속성 내부에 함수로 사용할 수도 있고, 변환이 일어나는 요소의 부모 또는 상위 요소에 perspective 속성으로도 사용할 수 있다. 일반적으로는 상위 요소에 속성으로 적용한다.
앞에서 설명한 transform 과 마찬가지로 perspective 또한 관찰하는 위치를 변경할 수 있다. 이때 perspective-origin 속성을 사용한다.
기본적으로 3차원 변환 효과가 적용된 요소의 자식 요소는 3차원 변환 효과를 사용할 수 없다. 기본값으로 부모 요소에 transform-style이 flat으로 설정돼있기 때문인데, 이 값을 preserve-3d로 변경하면 자식 요소에도 3차원 변환 효과를 사용할 수 있다. 단, 이는 자식 요소에만 적용되기 때문에 자식 요소의 자식 요소에도 3차원 변환 효과를 사용하고 싶다면 자식 요소에 transform-style: preserve-3d를 추가해야 한다.
3차원 변환 효과를 적용하다 보면 요소의 뒷면이 화면에 보일 때가 있다. 이때, 요소의 뒷면을 보이지 않게 하는 속성이 있는데 backface-visibility 를 hidden 으로 설정하면 된다. 이를 활용하면 카드가 뒤집히는 효과를 구현할 수 있다.
다단 레이아웃
신문처럼 단 수를 설정할 수 있다.
column-count: 단의 개수를 설정할 수 있다. 기본값은 auto 로 1개와 같다.
column-width: 최적의 단의 너비를 설정한다. 설정한 값 그대로 적용되는 것이 아니라 최적의 너비라면 설정하고, 아니라면 최적의 너비로 자동 설정된다.
columns: column-count와 column-width의 단축 속성이다. 아래와 같이 column-width와 column-count를 공백으로 구분해 사용한다.
1 columns: column-width column-count;column-rule: 단과 단 사이에 선을 그려준다. border 속성처럼 사용할 수 있다.
column-gap: 단과 단 사이의 거리를 설정한다. flex와 grid에서 사용하는 것처럼 줄여서 gap으로 사용할 수도 있다.
Filter
요소에 필터를 적용할 때 사용한다. filter 속성에 필터 함수를 사용한다. 아래는 필터 함수의 종류이다.
blur: 요소를 흐리게 설정한다. 매개변수로 radius를 사용하는데, 블러 효과의 지름을 의미한다. 값이 클 수록 요소를 더 흐리게 만든다.
grayscale: 무채색으로 변경한다. 매개변수로 amount를 받고, 이 값은 0에서 1, 0%에서 100% 사이이다. 기본값은 1이다. 값이 작을수록 원래 요소와 같아진다.
invert: 요소의 색상을 반전시킨다. 0에서 1 또는 0%에서 100% 사이의 값을 가지고, 값이 작을수록 원래 요소와 같다.
drop-shadow: 요소에 그림자를 지정한다. 그림자의 크기는 변경할 수 없고, 요소에 배경색이 없을 경우 내부 요소의 경계에 그림자가 생긴다.
1 drop-shadow(offset-x offset-y blur-radius color);brightness: 요소의 명도를 설정한다. 1또는 100% 미만의 값은 요소를 어둡게 만들고, 그보다 큰 값은 요소를 밝게 만든다.
contrast: 요소의 대비를 조절한다. 1또는 100% 미만의 값은 요소의 대비를 낮추고, 초과하는 값은 대비를 높인다.
opacity: 0에서 1 또는 0%에서 100% 사이의 값을 가진다. 값이 클수록 요소가 불투명하다.
saturate: 요소의 채도를 설정한다. 숫자 또는 퍼센트 값을 사용할 수 있으며 1(100%)를 기준으로 값이 작을 채도를 낮추고, 값이 높을 경우 채도를 높인다.
sepia: 0에서 1 또는 0%에서 100% 사이의 값을 가진다. 값이 클수록 색이 바랜 느낌을 준다.
hue-rotate: 요소의 색상을 변경한다.
위와 같이 360도로 색상을 나타낸 색상표가 있다. hue-rotate 함수를 사용해 현재 색상 기준으로 일정 각도만큼 색상을 변경하는 함수이다.
backdrop-filter
요소에 직접 적용하는 filter와 다르게 backdrop-filter는 해당 요소 뒤 영역에 filter를 적용한다. 그렇기 때문에 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게 설정해야 한다. 익스플로러와 파이어폭스에서는 사용할 수 없고, filter 속성에 사용한 함수와 같은 함수를 사용할 수 있다.
CSS 변수
CSS에서도 변수를 선언해 사용할 수 있다. 두 개의 붙임표로 시작하는 속성의 이름을 정의하고 유효한 CSS 값을 그 값으로 지정한다.
1 :root {2 --main-bg-color: red;3 }
위와 같이 --main-bg-color 라는 변수를 선언할 수 있다. 보통 변수를 전역 등록해서 사용한다. 이를 위해 :root 의사 클래스를 사용한다. HTML의 루트 요소는 html 요소이므로, html 요소에 변수를 선언하는 것과 같다.
이렇게 정의한 변수를 사용하기 위해서는 var() 함수를 사용한다.
1 selector {2 background-color: var(--main-bg-color);3 }
위와 같이 사용하면 배경색에 빨간색이 적용된다. 두 번째 인수로 초기값을 지정할 수 있다. 선언된 변수는 하위 요소로 상속된다. 상속 받은 변수는 재할당이 가능한데 이때, 변수의 유효범위는 재할당한 요소와 그 하위 요소로 한정된다.
@supports
1 @supports( CSS 기능 ) {2 CSS 기능을 사용할 수 있다면 아래의 스타일 적용3 ...4 }
@supports 는 특정 CSS 기능을 지원할 때 스타일을 적용하기 위해 사용한다. 예를 들어 브라우저가 display: grid 를 지원하는지 확인하고, 만약 지원한다면 display: grid 를 적용해야 한다면 아래와 같이 작성할 수 있다.
1 @supports (display:grid){2 selector {3 display: grid;4 }5 }
반대로 특정 CSS 기능을 지원하지 않을 때에도 스타일을 적용할 수 있다.
1 @supports not (display:flex){2 selector {3 float: right;4 }5 }
위의 코드는 display: flex 속성을 지원하지 않을 때 float: right 를 적용하는 코드이다. CSS 지원 조건은 and나 or로 연결해 구성할 수 있다. 지원 조건 대신 셀렉터가 존재하는지 확인할 수도 있는데 아래와 같이 사용한다.
1 @supports selector(A > B) {2 ...3 }
@media
미디어 쿼리의 결과에 따라 스타일을 적용할 때 사용한다. 기본 구조는 다음과 같다.
1 @media 타입 and ( 기능 ) {2 selector {3 적용할 스타일4 }5 }
타입: screen, print 등의 값이다. 기본값은 all 이다.
기능: max-width, min-width, orientation 등의 값이다. 해당 조건을 만족하는 경우 스타일이 적용된다.
@supports 와 마찬가지로 and, or, not 키워드를 사용할 수 있다. not 키워드를 사용할 경우 타입이 꼭 명시되어 있어야 한다.
정리
CSS도 공부할 게 엄청 많은 것 같다. 오늘 강의를 들으면서 강사님께서 명시도 얘기 하시면서 당연히 알고 계시겠죠~? 하는데 뜨끔했다. 왜 이렇게 모르는 게 많은지 모르겠다. 그래도 평소에 궁금했던 것들이 한 번에 해결되고 있는 느낌이라 기분은 좋다. 오늘부터 CSS 클론 과제 기간인데 아마 오늘은 과제 진행은 못하고 어떤 사이트 클론할지만 정할 것 같다. 내일부터 과제 빡세게 하루에 회고도 간단하게라도 작성하는 걸 목표로 해야겠다.