<HtmlStudy /> 웹페이지 - 제작 상황(3)

1. 로고문제

로고를 저번에 바꿨지만 다크모드를 켜보니  배경색이 있는 문제가 있었다. 그래서 직접 로고를 유튜브를 보면서 만들기로 했다. 배경은 투명색으로 교체하였다. 뭔가 급하게 만든감이 있어서.. 다시 시간 날 때 제대로!

2. 헤더 문제 

배포전

배포후

 태그를 이동했을 때 왼쪽 헤더 내비게이션이 닫히는 문제를 항상 열려있게 변경시켰다.

  const [open, setOpen] = useState(true);
  const [openSubMenu, setOpenSubMenu] = useState({});
  
  useEffect(() => {
   ~~~
    setOpenSubMenu(openMenu);
  }, [location.pathname]);
  
   const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

그리고 네비게이션만 있으면 뭔가 가독성이 떨어져 html, css 조금이 나나 구분이 가능하게 구분선과 문구를 작성했다.

다른 좋은 react 라이브러리가 많기 때문에 material-ui 쓰지 않을 것이다.

구버전 리액트를 사용하기 때문에 고치는데 어디가 문제인 건지 파악하기 너무 나도 어려웠다.

요즘 공부하시는 분들은 신버전 리액트를 사용하기 때문에 다른 좋은 라이브러리 많기 때문에 비추천한다.

만약 사용하게 된다면 먼저 material-ui를 적용하고 이후 코드 작성하는 걸 추천드립니다.

코드의 유지보수나 반응형을 위해 css는 최대한 적게 공통적으로 작성하는 게 문제다.

3.  방향성

• html 부분은 어느정도 완성
• css 영역을 어떡해 해야 할지 기획
• 어차피 내가 볼것이기 때문에 가독성 있게 작성
• 헤더 쪽이나 메인 홈페이지 디자인 벨류업

웹디자인에 관심 있으신분은 bp4sp4@naver.com 연락주시면 언제나 환영입니다~