[23.02.08] TIL

오늘 CSS 관련 이슈가 있었다.

window와 mac에서 보이는 input의 길이가 달라서 UI적인 부분에서 꼬였던 것이다.

 

해결 방법은 container를 이용하는 것,

 

원래는..

const InputBox = styled.input`
  width: 21.5rem;
  height: 2.4rem;
  padding: 0 3rem 0 1rem;
  font-size: 1rem;
  background-color: #fafafa;
  border: 1.3px solid #ddd;
  border-radius: 8px;
  &::placeholder {
    color: #d1d1d1;
  }
`;

스타일드 컴포넌트는 이렇게 작성되어 있었는데 아래와 같이 100%로 주니 해결되었다.

const InputBox = styled.input`
  width: 100%;
  height: 2.4rem;
  padding: 0 3rem 0 1rem;
  font-size: 1rem;
  background-color: #fafafa;
  border: 1.3px solid #ddd;
  border-radius: 8px;
  &::placeholder {
    color: #d1d1d1;
  }
`;

 

컨테이너에 width를 지정해주고 자식 태그들에게 width를 %로 주면 좋을 것 같다.

 

 

그리고 지금.. 회원가입을 위해 hook form을 공부하고있는데.. 어려워서 그냥 if문을 쓸까 싶기도 한데, 성능적인 면에서 hook form이 좋다고 하니 어떻게든 공부 해서 한번 구현해보고자 한다.

내일은 hook form으로 유효성 검사까지 마쳐보고 싶다.