index.html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box1">Box1</div>
</body>
</html>
style.css파일
.box1 {
width: 300px;
height: 300px;
border: 1px solid red;
background-color: red;
}
기존의 css스타일링은
태그에 클래스명(또는 id)을 지정해서
선택자 . # 을 통해서 스타일링을 했다.
<div class="box1">Box1</div>
box1이라는 클래스를 지정해서
css파일에서 .box1{} 이런 식으로 원하는 스타일 코드를 집어넣었었다.
단점은 css파일을 전역적으로 관리한다는 점.
다른 파일에 영향을 미칠 수 있다.
이 코드를 그대로 styled-components 방식의 코드로 바꿔보자.