JS' 공부흔적

이 글을 통해서 아래 메뉴를 구현할 수 있다. hover 시에는 컴포넌트가 보이도록, 벗어나면 다시 사라지도록 구현해야 한다. 우선 뼈대를 구성할 건데 styled-components를 사용하여 스타일링했다. 일정 커뮤니티 const MenuUl = styled.ul` list-style: none; display: flex; align-items: center; gap: 48px; position: relative; & span { cursor: pointer; } `; ul의 기본 스타일을 없애고, 메뉴 사이에 gap을 줬다. SubHeader는 각 메뉴에 마우스를 호버 하면 나타나는 서브 메뉴이다. 간단하게 아래와 같이 작성했다. const SubHeader = ({ tab }) => { const..

사이드 프로젝트를 하다가 아래처럼 예쁜 체크박스를 구현할 일이 생겼다. 사실 예전에 React-Native에서도 비슷하게 체크박스 커스텀을 했었는데, 그 당시에는 button으로 구현했었다. CheckBox 컴포넌트가 있던데 왜 안 썼을까.. 그래서 이번에는 다른 방법으로 구현해보고자 했다. 우선 기본 틀을 잡았다. 기본 아이디어는 다음과 같다. input을 숨기고, label로 input 값을 컨트롤한다. 이때 전체를 label로 감싸서 텍스트 클릭으로도 컨트롤 할 수 있도록 한다. input 값의 변화에 따라 div 스타일이 달라진다. style 파일에는 기본적인 스타일링과 특히 input이 체크되었을 때와 아닐 때의 div 스타일을 정의한다. 이렇게 하면 아래와 같이 예쁜 커스텀 체크박스가 완성된다!

웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다. 이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다. 간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다. const Home = () => { return ( GET ); }; const Btn = styled.button` all: unset; margin-bottom: 20px; border: 1px ..

개발을 하다 보면 모달창을 자주 사용하게 된다. 모달창은 보통 화면에 한가운데에 위치하게 되는데 이를 라이징 테스트에서 원티드를 클론코딩하며 내가 겪었던 과정과 함께 기술하겠다. 원티드에서는 대표적으로 로그인 및 회원가입에서 모달이 필요한데, 우선 가장 쉽게 떠올렸던 방법은 모달의 width와 height를 고정값으로 정했다. width: 500px; height: 500px; top: calc(50% - 250px); left: calc(50% - 250px); 위와 같이 화면 중앙에 모달을 배치했었다. 그러나 모달마다 크기가 다르기 때문에 이는 분명한 한계점이 있다. 그래서 생각한 방법은 width는 고정값을 주고, height를 다르게 받았다. left: `calc(50% - ${width / 2}..