[100DaysOfCode] 25강

 

오늘 배운 내용

1️⃣ CSS 변수
2️⃣ 루트, html, * 선택자 비교
3️⃣ css transform, transition

 

1️⃣ CSS 변수

1. 선언 방법

--변수명: 값;

 

2. 사용 방법

속성: var(--변수명);

** 디폴트값 선언 가능
var(--변수명, default 값);

 

3. 예시

--color-grey-100: rgb(236, 236, 236);

background-color: var(--color-grey-100);

 

---

 2️⃣ 루트, html, * 선택자 비교

html	html 요소를 선택한다(html 파일의 최상위 루트 요소) CSS 규칙은 html 및 html의 다른 요소에도 상속된다
:root (가상 선택자)	문서의 최상위 루트 요소를 선택한다 최상위 요소 안에 포함된 요소에만 상속된다
*	html 문서의 모든 요소들을 선택한다

 

** :root 선택자와 html 선택자는 비슷해보이지만, :root 선택자가 html 선택자를 덮어쓸 수 있다

 

---

3️⃣ CSS Transform & Transition

Transform	Transition
요소의 모습을 옮기거나 변화시킨다 (e.g. hovering)	처음 상태에서 변화되는 상태를 부드럽게 한다

 

transform: scale (2);

😊 1배

😊 2배

 

transition: transform 0.5s ease-out 1s;
transition: 속성 -> 기간 -> 타이밍 속성 -> 딜레이

 

.card-container {
    background-color: #fff;
    width: 350px;
    margin: 50px auto;
    box-shadow: 3px 3px 10px #b1ffb1;

    /* transition은 초기 대상 요소에 추가*/
    transition: transform 0.5s ease-out 1s;
}

.card-container:hover {
    /* transform은 변경 대상 요소에 추가 */
    transform: scale(1.05);
}