[React] Styled-Component hover이벤트 주기

hover event주기

1. style component import하기

<APP.js>
import styled from "styled-components";

2. styled 이용해서 Btn 만들기

<APP.js>
import styled from "styled-components";

const Btn = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
`;

3. hover이벤트 주기

<APP.js>
import styled from "styled-components";
const Btn = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

4. 전역스타일 설정하기

<GlobalStyle.js>
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
* {  margin: 0.5rem;  }
`;

export default GlobalStyle;

5. 스타일 & 전역스타일 적용하기

<App.js>
(생략)
export default function App() {
  return (
    <div>
      <GlobalStyle />
      <Btn>Btn</Btn>
      <br />
      <Btn id="practice">Btn+id</Btn>
    </div>
  );
}

6. 궁금증 :
   id 속성에 따라서 hover 이벤트 주기는 어떻게 하는거지?