TIL - 19

- Keyword

styled-components / CSS

 

styled-components로 가상 요소 after를 사용하였다.

생각보다 사용법이 간단해서 금방 적응하였다.

 

CSS 애니메이션에서 생각보다 진짜 시간을 많이 썼다.

시작점부터 가로로 늘어나는 선을 표현하는데 

처음엔 width를 0으로 주었다가 transition을 설정하여 늘리는 방법으로 구현하였다.

const NavContent = styled.div`
  display: flex;
  align-items: center;
  width: 80px;
  height: 55px;
  color: white;
  opacity: 0.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  letter-spacing: -1px;

  &::after {
    position: absolute;
    width: 0px;
    height: 51px;
    content: "";
    border-bottom: 4px solid white;
    transition: all 0.1s ease-in-out;
  }

  &:hover {
    opacity: 1;
  }

  &:hover::after {
    width: 80px;
    border-bottom: 4px solid white;
    transition: all 0.1s ease-in-out;
  }
`;

 

input tag에 입력한 문자와 placeholder에 입력되어 있는 문자가 수직이 안 맞아서 찾아보니

input의 height 값과 line-height 값을 동일하게 설정하면 수직이 맞게 된다는 것을 알았다.

그리고 styled-components로 focus 시 placeholder가 안보이게 구현하였다.

const SearchInput = styled.input`
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  color: white;
  font-size: 24px;

&:focus{
    &::placeholder{
        color: transparent;
        transition: all 0.2s ease-in-out;
    }
}

  &::placeholder {
    
    color: white;
    opacity: 0.5;

  }
`;

 

 

- 오늘 하루 느낀 점

주말에 코딩 테스트 공부 및 시험을 보느라 개인 기업 과제 생각을 잠시 안했었는데, 생각보다 난이도도 있고 구현할 내용이 많았다. 역시 게임 업계에서 알아주는 N사의 과제인 건가..

 

styled-components를 사용하는데 점점 styled 코드가 너무 많아진다. 매 tag 마다 새로 만들고 있는데, 뭔가 효율적인 방법이 있을 것 같지만 당장 생각나는 건 그냥 따로 파일을 빼서 정리하는 것 외에는 생각이 나질 않는다.

 

일단 해보자!