221227 TIL

배운 점

• [css] input type=”date” 클릭 범위 넓히기

input창 type을 date로 했는데 달력모양 아이콘을 클릭해야 날짜를 선택할 수 있었다

내가 원하는 건 연도,월,일이라는 글자를 클릭하면 날짜를 선택할 수 있게 만드는 것이었다

일단 저 오른쪽에 있는 달력 아이콘을 없애고 싶어서 관련 css속성을 구글링 해보았다

• 해결 과정

🛠 여러 사이트를 찾다보니 `::-webkit-calendar-picker-indicator` 속성을 건드리면 달력아이콘을 없앨 수 있다는 사실을 알았다

그래서 ::-webkit-calendar-picker-indicator display:none을 했더니 아이콘은 사라졌지만
글자를 클릭했을 때 날짜를 선택할 수 없었다 아예 날짜를 선택할 수 없게 된 것이다

이건 아니다 싶어 다시 검색을 하던 중 스택오버플로우에서 정말 보석같은 답변을 발견!

::-webkit-calendar-picker-indicator 속성을 사용하는 건 맞았지만 display:none을 하면 안 되었던 것이다

그래서 저 코드를 참고하며 조금씩 고쳐본 결과 다음과 같이 코드를 작성했다

• 참고 사이트

  How to show calendar popup when input[type="date"] is on focus

  hitublog : 네이버 블로그

  input type date remove calendar icon

  input - date 외

  input type="time"に表示される時計のアイコンを非表示にする ⏰ - みかづきブログ・カスタム

느낀 점

새벽 늦게 자니까 너무 피곤하다
그래도 서버 배포하니까 마음이 편하다... 다른 조 처럼 엄청난 기능은 못 넣었지만 그래도 완성을 할 수 있어서 좋았다
내일 오전에 얼른 시연 영상 찍고 노션에 프로젝트 관련 내용을 더 적어야겠다

내일 할 일

• 오전 11시 전까지 시연 영상 촬영 후 제출
• 발표 연습