[HTML + CSS + JAVASCRIPT] 반응형을 적용한 스타벅스 UI 따라 만들어보기

우선 스타벅스의 Header 부분의 외관 디자인을 따라만들어보았다.

스타벅스 홈페이지

내가 만든 페이지

 

반응형을 확인하기 위해 화면을 줄여보면?

 

그렇다면 문제점을 이제 하나하나 뜯어보겠다.

 

1️⃣ 첫번째 문제

• 처음 화면을 줄일때 처음부터 전체적으로 줄어들어 nav가 로고를 침범하는 문제가 발생

❓ 원인

width 값의 설정값 방식 차이

 

% 로 설정할 경우 창이 줄어들면 블럭의 크기 또한 같이 줄어든다.

px로 설정할 경우 창이 줄어들어도 블럭은 절대크기를 유지한다.

 

따라서 header 안에 inner 요소 width를 % 로 설정한 것이 원인이다.

 

💡 해결

    header .inner {
      width: 75%;
      height: 100%;
      position: relative;
    }

⬇️

    header .inner {
      width: 1100px;
      height: 100%;
      position: relative;
    }

 

 

---

2️⃣ 두번째 문제

• 어느정도 창이 줄다가 메뉴에서는 같이 줄어들어야되는데 그대로 줄어들어 메뉴가 없어진다.

❓원인

위에서 같이 줄어들지 않게 px로 절대크기를 잡은것이 원인

 

원하는 시점부터는 같이 줄어들게 하기위해 width 크기값을 %로 바꾸어야한다.

 

💡 해결

    @media screen and (max-width: 1114px) {
      header .inner {
        width: 100%;
      }
    }

 

미디어 쿼리를 사용해 1114px 이하부터는 width값을 %로 설정하도록 하였다.

 

---

3️⃣ 세번째 문제

• 일정 크기 이상 줄어들면 창이 좁아 텍스트가 자동 줄바꿈되어 깨지는 현상

❓ 원인

각 메뉴마다 width 값을 지정해주지않았기 때문이다.

px로 값을 부여한다면 창의 크기가 줄어도 절대값을 유지할게 될것이다.

 

그러나 스타벅스의 홈페이지는 메뉴의 width값을 부여하지않고 텍스트 길이에 따라서 가로길이가 설정되어있다.

똑같이 하기위해선 width값을 부여하는 방법말고 다른 방법을 찾아야한다.

 

💡 해결

flex-shrink 속성 활용

 

flex-shrink는 컨테이너의 너비가 축소될때 플렉스 항목이 어느정도 축소될지를 설정하는 속성이다.

기본값은 1이며 , 0으로 지정할 경우 너비가 축소되도 줄어들지않는다.

 

#service_nav li {
      flex-shrink: 0;
    }

 

홈페이지 출처: https://www.starbucks.co.kr/index.do