TIL 12.26

오늘 해야 할 것

1. 현재 보여지는 카테고리는 border-top의 색을 변경해서 사용자로하여금 어느 카테고리 화면인지 알게 할 것.

• 시도1: 카테고리 이름들(menu1,2,3,4)을 누르면(visited) 그 부분의 title위에 그어두었던 border의 색상을 변경한다.

div [className~='menu']:visited ~ .title {
  border-top: solid 2px #727272;
}

• 시도2: 이벤트리스터로 클릭하면 글자색이 변경되는 함수를 실행하도록 한다.
  css파일

.active {
  color: red;
}
.deactive {
  color: black;
}

jsx파일

  const handleCategory = (menu) => () => (menu.className = 'active');


// return
<div
          className='menu1'
          onClick={() => {
            handleClick('bread'), addEventListener('click', handleCategory);
          }}
        >

두 시도 모두 놀랍게도 아무런 일이 일어나지 않았고, 이 기능구현은 다음으로 미루겠다.

2. grid cell item들이 너무 위에 위치해서 행 간격이 넓어보이는 문제 해결
   : 이미 다른 곳에서 쓰인 변수명이 있어서 내가 쓴 css가 적용이 안된 것이었음!