CSS-L4-011 / 캐스케이드 설계

레이어 기반 디자인 시스템

고급

문제

reset, components, utilities 레이어를 순서대로 정의하세요. .tag의 color를 각각 black/red/blue로 지정해 최종 파랑으로 만드세요.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<span class="tag">태그</span>
</body>
</html>

힌트

레이어 순서는 일반 선언의 우선순위 축입니다.

해설·정답 보기

프레임워크 없이도 기능별 스타일 레이어를 나눌 수 있습니다. 결과 검사와 별도로 레이어 구성은 해설을 비교하세요.

@layer reset,components,utilities;@layer reset{.tag{color:black}}@layer components{.tag{color:red}}@layer utilities{.tag{color:blue}}

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.