캐스케이드 레이어 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

1. `@layer components { #app .card .title { color: navy } }` 와 레이어 밖의 `.title { color: crimson }` 이 함께 있습니다. 제목 색은?

   1. crimson — 레이어 밖은 맨 마지막 레이어라 일반 선언에서 가장 세다
   2. navy — 특정성 1,2,0 이 0,1,0 을 이긴다
   3. navy — 레이어 안의 선언이 언제나 밖보다 우선한다
   4. 정해지지 않는다 — 브라우저 구현에 따라 달라진다

2. `@layer reset, components;` 로 선언하고 두 레이어 모두에 `!important` 색 규칙을 두면 어느 쪽이 이깁니까?

   1. components — 뒤에 선언한 레이어가 언제나 이긴다
   2. reset — important 선언끼리는 앞 레이어가 이긴다
   3. 특정성이 높은 쪽 — important 끼리는 특정성으로만 갈린다
   4. 둘 다 무시된다 — important 가 부딪히면 초기값으로 돌아간다

3. 레이어 밖에 쓴 `!important` 선언의 위치는?

   1. 모든 레이어의 important 보다 세다 — 밖이 언제나 우선한다
   2. 레이어 안의 일반 선언과 같은 자리에서 특정성으로 겨룬다
   3. 모든 레이어의 important 에 진다 — 암묵 마지막 레이어이기 때문이다
   4. 레이어를 쓴 시트에서는 아예 무시되어 적용되지 않는다

4. 라이브러리가 덮어쓰기 쉬운 기본값을 주려고 `:where()` 를 쓰는 이유는?

   1. 괄호 안이 몇 개든 특정성이 0 이라 태그 선택자에도 진다
   2. 괄호 안에서 가장 높은 조각의 특정성을 그대로 따라간다
   3. 레이어 밖 선언과 같은 자리로 옮겨 주기 때문이다
   4. important 를 붙이지 않아도 앞 레이어처럼 동작해서다

5. 레이어 순서를 파일 맨 위에 `@layer a, b, c;` 로 미리 선언하는 이유는?

   1. 순서가 이름이 처음 나온 차례로 정해져 파일 읽는 순서에 흔들려서
   2. 그렇게 하지 않으면 브라우저가 레이어를 아예 인식하지 않아서
   3. 선언형 규칙이 있어야 @import 에 layer() 를 붙일 수 있어서
   4. 레이어마다 별도 파일로 나누지 않으면 문법 오류가 나서

6. 남의 라이브러리 CSS 를 내 코드보다 항상 약하게 만들려면?

   1. 라이브러리 규칙마다 :where() 를 감싸 특정성을 0 으로 만든다
   2. @import url(lib.css) layer(vendor); 로 한 레이어에 밀어 넣고 그 레이어를 먼저 선언한다
   3. 내 규칙 전부에 !important 를 붙여 라이브러리를 덮는다
   4. 라이브러리를 가장 나중에 읽히도록 번들 순서를 바꾼다