반응형 웹페이지란? (with 간단한 반응형 애플사이트 navBar만들기!)

우리가 웹사이트를 만들 때 화면이 작아지면 구성요소가 깨지는 현상을 많이 겪어봤을 것이다.

나 또한 그랬고 이를 해결하기 위해서는 반응형 웹페이지로 만들어야 한다는 설루션이 있었다.

 

또, 모바일 , 테블릿 등에서 웹페이지를 접속할 때, 각기 다른 페이지를 보여줘야 하는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 하는데, 그렇게 되면 번거로울 수 있기 때문에 한 파일에서 pc , 모바일 , 태블릿 등을 고려한 웹사이트를 만들 수 있게 반응형 웹페이지를 만드는 것이다.

 

우리는

미디어 쿼리

라는것을 사용해서 반응형 웹페이지를 만들어 볼 것이다.

미디어 쿼리의 개념은, 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념이다.

 

스타일 시트 내에서 

@media

라는 기능이 있는데 이 기능을 사용해서 미디어 쿼리를 구현할 수 있다.

간단한 nav bar을 만들어보면서 반응형 웹페이지는 어떤 식으로 만들어지는지 개념을 알아보도록 하자. 

 

시작하기에 앞서, fontawesome이라는 웹사이트를 추천해주도록 하겠다.

다양한 icon들을 제공하며, 이 icon들의 특징은 바로 font라는 점이다. 

fontawesome.com/

Font Awesome

 

 

하지만 이번 예제에서는 react-icons를 사용하려고 한다.

 

레이아웃을 잠시 설명하자면,

 

 

왼쪽이 기본, 오른쪽이 화면이 작아졌을 때에 레이아웃이다.

파란색 영역이 로고,

주황색 영역이 메뉴,

분홍색 영역은 facebook이나 github로 이동하는 아이콘들이 있는 곳이다.

 

이제 html을 짜 보도록 하자

 

대강 이렇게 작성을 하였고, 

이제 css로 레이아웃을 구성해보도록 하겠다

 

똑같진 않지만 느낌을 살려서 구성해보았다.

애플 사이트에서 화면이 작아짐을 감지하면,

 

이렇게 화면을 바꾸고, 저 작대기 두 개를 누르면

 

이런 식으로 나오게 된다.

이제 이것을 구현해보도록 하겠다. 참고로 이번 예제는 리액트를 사용하였기 때문에 state를 이용한 

메뉴 토글을 구현해보도록 하겠다.

.navBar {
  background-color: #333333;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px;
}
.navBar_toggleBtn {
  display: none;
}
.navBar_menus {
  display: flex;
  list-style: none;
  justify-content: space-around;
  width: 50%;
}
.navBar_menus_menu a {
  color: #d6d6d6;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .navBar {
    justify-content: space-between;
  }
  .navBar_menus {
    display: none;
  }
  .navBar_toggleBtn {
    display: flex;
  }
  .navBar_icons .search {
    display: none;
  }
}

 

 

이렇게 간단하게 미디어 쿼리로 반응형 웹사이트를 만들어보았다.

 

---

여기서부터는 외람된 주제이므로 주의!

 

하지만 우리에게 남은 숙제가 하나 있는데 바로 토글 되는 버튼을 누르면 촤라락! 하게 해 주는 것이다.

그것을 리액트에서 구현하려면 state를 이용하는 방법이 있다.

const [isToggled, setIsToggled] = useState(false);

 

상태를 선언하고 

 

클릭할 때마다 상태의 부정을 해주자  이제 촤르륵 거릴 것을 navBar밑에 만들어야 한다.

 

그다음 리액트의 조건부 렌더링을 사용해서 토글이 되는지 확인해보자.

아마 , 정상적으로 토글이 되는 모습을 볼 수 있을 것이다.

 

이제, 토글 되어 보이는 부분을 사용자가 꾸미는 작업을 해주어야 한다.

 

뿅!

그런데 apple사이트의 border를 보면 아마...

 

1px보다 작은 border 같다... 하지만 크롬에서는 1px보다 작은 border를 그릴 수가 없다.

그래서 이걸 어떡하지... 어떡하지 하다가 

 

좀 더 굵긴 하지만, 색깔을 칙칙한 색으로 해서 착시! 효과를 주었다 (ㅋㅋㅋ

 

아무튼 구현은 여기까지이며 이제 점점 포트폴리오 사이트를 만들 수 있겠다는 자신감이 생기고 있다...!

그럼 뿅!

 

>> 최종 완성