728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
.box {
&.red {
//1번 경우 box이면서 red
}
.red {
//2번경우 box안에서 red
}
}
.box.red { // 1번과 동일}
.box .red { // 2번과 동일 }
.box, .red {}
</style>
<body>
<div class="box red">
<div class="small-box red"></div>
</div>
<div class="box blue"></div>
<div class="box yellow"></div>
<script src="script.js"></script>
</body>
</html>
'📖 리액트 > 리액트를 다루는 기술' 카테고리의 다른 글
| 1장 리액트 시작 (리액트의 이해와 특징) (0) | 2022.04.02 |
|---|---|
| 18장 리덕스 미들웨어를 통한 비동기 작업 관리 (0) | 2022.02.16 |
| 14장 외부 API를 연동하여 뉴스 뷰어 만들기 (0) | 2022.02.14 |
| 13장 리액트 라우터로 SPA 개발하기 (0) | 2022.02.08 |
| 11장 컴포넌트 성능 최적화 (0) | 2022.02.07 |