25일차 - CSS 변수와 사용자 정의 속성, 변환과 전환, SVG 등
CSS 변수와 CSS 사용자 정의 속성
이 사용자 정의 속성들은 CSS 파일에 직접 추가되고, 보통 HTML 선택자를 사용해서 이 변수들을 구현한다. 정의하는 방법은 하이픈 두개(--)를 쓰고 정의하고 싶은 속성을 추가해주면 된다.
정의한 속성을 사용하려면 해당 속성값으로 불러오면 된다.
이런 변수와 사용자 정의 속성을 사용하면 ,위 이미지를 예로 들자면, 요소 하나마다 개별 색상 코드를 적용하는 대신 미리 정의된 색상을 사용하는데, 이걸 다양한 요소에 사용할 수 있다. 만약 색상이 마음에 들지 않다면 한 군데에서만 값을 고쳐서 해당 값을 쓰는 모든 지점의 색상을 고칠 수 있게 된다.
그래서 이러한 방법은 코드가 매우 길어진 프로젝트에서 아주 유용해진다.
그렇다면 왜 HTML 요소에 속성을 추가할까? 우선 HTML은 해당 파일의 최상위 요소이고, 변수는 해당 변수를 포함하는 요소에만 사용할 수 있는데, HTML 요소는 프로젝트의 다른 요소 모두를 포함하고 있으므로 프로젝트의 모든 요소에 변수를 사용할 수 있다. 그래서 HTML 요소에 속성을 추가하는 것이다.
:root 선택자와 * 선택자
root 선택자는 요소의 최상위 요소를 선택한다. 그리고 이 경우에 CSS 규칙은 최상위 요소에 적용되고, 최상위 요소 안에 포함된 요소에도 상속된다. 그래서 HTML 관련 프로젝트에서는 HTML 선택자와 root 선택자가 하는 일이 동일하다.
* 선택자는 HTML 문서의 모든 요소를 선택한다. 이는 CSS 규칙이 모든 요소에 바로 적용된다는 것이다.
그래서 HTML 및 root 선택자와 * 선택자의 차이점은 HTML과 root 선택자는 규칙이 포함된 요소로 상속된다는 것이고, * 선택자는 규칙을 HTML 문서의 모든 요소에 바로 추가한다는 것이다.
CSS 변환과 전환
변환(Transformation)은 요소의 모양을 이동하거나 변경하는 것이고, 전환(Transition)은 초기 상태에서 부드럽게 전환할 수 있도록 해주는 속성이다.
변환속성은 transform을 입력하여 사용하며, 이 속성을 변환이 시작되는 요소의 상태에 추가해서 사용한다. (요소에 추가하는 것이 아니다)
위 이미지는 card-container 요소에 마우스를 올렸을 때 크기가 변환되도록 속성값을 입력한 것이다.
전환을 구현하는데 필요한 코드는 전환을 촉발하는 이벤트가 아니라 요소의 초기 상태에 적용해야 한다. 이 전환은 transition을 입력하여 사용하며, 이 속성은 전환을 정의하는 네 가지 주요 영역이 포함된 속성이다.
전환 속성은 위 이미지처럼 네 영역이 포함되는데, 첫 번째 영역(transform)은 전환을 할 속성명이 들어간다. 만약 배경색을 전환하고 싶다면 첫 번째 자리에 background-color를 입력하는 것이다.
두 번째 영역(0.5s)은 지속시간을 입력한다. 이 지속시간은 첫 영역에서 정의된 속성의 변화가 얼마나 걸릴지를 말하는 것이다. 세 번째 영역(ease-out)은 타이밍 기능이다. 위 이미지의 ease-out은 전환이 빠르게 시작하고 늦게 끝나는 걸 의미하는데, 기본값은 ease이며 ease-out의 반대인 ease-in도 사용할 수 있다. 이 타이밍 기능은 두 번째 영역에 적은 지속시간동안 적절히 배분되어 진행된다.
네 번째 영역(0.1s)은 지연시간(delay)이다. 이는 정의한 속성과 속성값들이 바로 실행될지, 아니면 지연 시간 이후에 실행될지를 정하는 것이다.
SVG에 대해서
아이콘이나 아이콘 같은 이미지를 추가할 때 SVG를 사용할 때가 있는데, 이 SVG는 Scalable Vector Graphics의 약자로, 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어이다.
쉽게 말하면 SVG는 브라우저가 렌더링할 수 있는 확장형 이미지의 텍스트 기반 묘사이다. 텍스트 기반이기 때문에 많은 속성들과 긴 속성값들로 구성된 걸 확인할 수 있다.
위 이미지는 사전 정의된 SVG 코드를 입력해서 아래의 작은 아이콘들이 나온 것을 보여주고 있다.
이 SVG는 일반 사진이나 복합적 이미지에는 적용되지 않는다. 묘사하기 어렵기 때문이다.
