이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요! 요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ CSS 너무 재밌는 것,,,,,,,, 이제 본론으로 가보도록 하겠습니다! 오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다! 확실히 hover일 때는 올려놓은 듯하게, active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ 먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면, 태그의 영역에 그림자효과를 주어 박스 형태가 있..

이전 시간에 다뤘던 hover, active에 이어 버튼의 se lected 상태 적용할 인터랙션을 알아볼게요! 그전에 간단하게 오늘 다룰 내용을 좀 알아보도록 할텐데 딱 두가지가 중요합니다! 첫번째는 선택한 상태를 나타내도록 useState ReactHook을 알아야하구요! 물론 useState를 안쓰고도 충분히 가능하긴해요~! 두번째는 CSS 지식인, after before를 활용한 가상 요소 선택자를 알아야합니다! 일단 CSS를 알아가는 과정이니 가상 요소 선택자인 after와 before 위주로 알아볼게요! before selector라고 검색을 해보면 이렇게 정의를 하고 있습니다! The ::before selector inserts something before the content of ea..