메뉴 버튼을 클릭하면 버튼 모양이 X로 바뀌고 왼쪽에서 메뉴가 튕겨져 나오는 사이드바를 클론해보았다.
HTML, CSS, JS로 구현되어 있는 코드를 React와 styled-component로 바꾸면서 Bar와 Menu를 컴포넌트로 만들어 분리했고, 상태는 App에서 관리하여 Close 버튼을 클릭하면 Active로 상태를 변경하여 버튼 모양이 바뀌고 사이드바가 나올 수 있도록 만들었다.
webkit은 벤더프리픽스 중에 하나로, 해당 기능이 포함되지 않은 이전 버전의 웹 브라우저에서도 사용할 수 있도록 붙이는 접미사이다.
주요 웹 브라우저가 사용하는 벤더 프리픽스는 다음과 같다.
- webkit-transform (크롬, 사파리)
- moz-transform (파이어폭스)
- ms-transform (익스플로러)
- o-transform (오페라)
