TIL_230221_ 최종 프로젝트 - 디자인 적용

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 프로젝트 디자인 적용

• CategoryBar의 버튼 크기 줄이기

• Main 청약 정보 및 List UI

• Search Page 상단 검색결과 안내 text 부분

알게 된 것

• filter: blur(4px)

  • 해당 블록 블러 처리..!
  • opacity와 같이 쓰면 더 부드러운 효과

• transfrom 이용해서 카드에 띠 만들기

• 버튼 초기화

  • all:unset을 첫줄에 쓰면 버튼의 기본값(회색 배경, 보더 등)을 초기화 시켜줌

• 버튼 슉슉 눌리는 버튼느낌 나게 하기

  • border를 1px solid 주지 않고 border-color를 주면 된다.
    

문제 및 해결

• position absolute 올바르게 쓰기
  • position: relative인 상위 태그가 없으면 브라우저 화면을 기준으로 위치를 잡기 때문에 브라우저의 크기대로 위치가 바뀐다.
  • 카테고리 필터 작업할 때 계속 위치가 바꼈는데 최상위 태그에 position: relative를 주고 위치를 설정하니 해결!