반응형 웹 / UI를 꾸미자.

미디어 쿼리

스크린의 넓이 값에 따라 헤더의 네비게이션 영역이 밑으로 흘러내린다. 그래서 반응형 웹으로 바꾸기 위해서 많이 정보들을 찾아보았다.

1. 스크린 사이즈를 확인하고, 그에 맞게 적용하는 방법 (이것이 적응형 웹인가..?)
   이 방법은 처음에 랜더링될 때 깔끔하게 나오나 리사이징하게 되면 깨질 우려가 있다.
2. 미디어쿼리를 이용하는 것인데 styled-component에도 적용이 가능했다.
3. Material-ui를 이용해서 네비게이션 영역을 dropdown 형식으로 바꿈.
4. 나중에 안 사실인데 Material-ui에도 미디어쿼리 사용에 관한 것이 있었다. 더 쉽게 갈 수 있었는데..
   https://material-ui.com/components/use-media-query/
5. 중단점을 768px로 했다.
6. 네비게이션 부분에 스타일 컴포넌트를 두개 넣어서, 미디어 쿼리에 해당되지 않는 값일 때에는 속성을 display: none 시켜서 중첩되지 않게 하였다.

홈 화면

1. 처음에 시작하면 이미지나 백그라운드가 있고 그 위에 텍스트가 입력된다.
2. 그리고 몇 초 후에 자동으로 화면이 전환된다. 내려가던지 바뀌던지.. 그리고 그곳에는 간단히 어떠한 개발자가 될 것 이라는 포부? 다른 내용이 보여진다.
3. 그 다음 컨텐츠 내용 하나 더보여준다. 화면 두개로는 뭔가 부족한데.. 어떤 것을 넣어볼까?

역시나 css는 어렵다. 기획도 어렵다. 그래도 한 가지 깨달은 것은 기획할 때 반응형을 먼저 생각해서 반응형에 따른 레이아웃까지 생각해야 한다는것!

https://spyrestudios.com/7-tips-to-speed-up-responsive-websites/

문제점 발생

• github.io 서비스를 이용하고 있는데 이는 정적인 서비스이다. 확실치는 않으나 개발환경에서는 잘 동작하던 것이 배포 이후에는 작동하지 않는다.
• 예상하건대 setTimeout 이나 onClick 메서드를 이용해서 hooks로 상태변화 시키고 페이지를 랜더링 시키는 작업이 작동하지 않는다....
• 기획했던 것과 달리 새로운 작업이 필요한 것 같다. 짜증나지만 정적인 서비스와 동적인 서비스의 차이점을 명확히 배운 시간이 된 것 같다... 내 아까운 시간.. ㅠ

// 환경 체크

var mql = window.matchMedia("screen and (max-width: 768px)");

  mql.addListener(function (e) {
    if (e.matches) {
      console.log("모바일 화면 입니다.");
    } else {
      setRender(<HomeHH />);
      console.log("데스크탑 화면 입니다.");
    }
  });

// 타이핑 효과

  overflow: hidden;
  font-size: 1.5em;
  white-space: nowrap;
  letter-spacing: 0.25em;
  animation: typing 2.5s steps(50, end);

  padding-top: 5em;
  margin-left: 20%;

  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 20em;
    }
  }