const Remove = styled.div`

  display: flex;

  align-items: center;

  justify-content: center;

  (생략)

  display: none;

`;


const TodoItemBlock = styled.div`

  display: flex;

  align-items: center;

  (생략)

  &:hover {

    ${Remove} {

      display: initial;

    }

  }

`;


TodoItemBlock에 마우스 올리면 display: none으로 감쳐줘있던 Remove가 다시 보이는건데 헷갈리는것 두가지가

밑에 빨간칠해놓은 display: initial에서 initial이 해당 프로퍼티의 기본값인 inline아님? 그런데 위쪽 파란칠처럼 Remove가 보일때 flex, 안보일때 none이 의도일텐데...

css 너무 헷갈리네 아