[CSS] 반응형 헤더 만들기 (feat. mediaQuery)

CSS의 mediaQuery를 사용하여 뷰포트(viewport) 너비에 따라 CSS 속성 값을 변경해보자❗

 

📌 mediaQuery란 무엇인가요?

미디어 쿼리(mediaQuery)는 단말기의 유형 (출력물 vs. 화면)과, 어떤 특성이나 수치 (화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. if 조건문과 비슷한 개념이라고 생각하면 이해하기 쉽습니다.

ex) 뷰포트 너비가 62rem 이하이면 flex-direction을 row에서 column으로 바꿔줘~

 

@media 키워드로 시작하는 미디어 쿼리의 문법 구조

@media (조건) {
   스타일
}

스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시됩니다.

 

뷰포트 너비가 62rem(992px)을 초과한 화면

 

뷰포트 너비가 62rem 이하인 화면

 

Header.jsx

   <header className={styles.header}>
      <div className={styles.logo}>
        <span className={styles.icon}>B</span>
        <h1 className={styles.title}>바로</h1>
      </div>
      <ul className={styles.menu}>
        <li>
          <button className={styles.button}>프로젝트</button>
        </li>
        <li>
          <button className={styles.button}>라운지</button>
        </li>
        <li>
          <button className={styles.button}>랭킹</button>
        </li>
        <li>
          <button className={styles.button}>SIGN IN</button>
        </li>
      </ul>
    </header>

 

 

Header.module.css(postCSS)

// 뷰포트 너비가 62rem을 초과한 경우
.header {
  display: flex;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.icon {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: makerOrange;
  color: white;
  border-radius: 50%;
}

.title {
  margin: 0;
  padding: 0 0.2em;
}

.menu {
  display: flex;
  align-items: center;
}

.menu li {
  list-style: none;
  padding: 0 0.5em;
}

.button {
  cursor: pointer;
  outline: none;
  background-color: transparent;
  font-size: 1.1rem;
  border: 0;
  padding: 0.5em 1em;
  border-radius: 5%;
}

.button:hover {
  color: makerOrange;
}

// 뷰포트 너비가 62rem 이하인 경우
@media screen and (max-width: 62rem) {
  .header {
    flex-direction: column;
  }
  
  .menu {
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    text-align: center;
    padding: 0.5em 0;
  }
  
  .button {
    width: 20rem;
  }
  
  .button:hover {
    color: white;
    background-color: makerOrange;
    opacity: 0.8;
  }
}

@media screen and (max-width: 62rem) { 스타일 }

screen은 미디어 유형 중 하나로 화면이 대상일 경우 사용합니다. 화면의 최대 너비를 조건으로 하여  62rem 이하의 화면인 경우 flex-direction: row (default)에서 flex-direction: column으로 스타일이 적용된 것을 볼 수 있습니다.

 

마무리...😂

햇병아리 프론트 엔지니어지만 사용자의 편의성을 고려하여 반응형 웹을 만들어보기로 했습니다. 많은 시행착오를 겪고 있지만 지금처럼 찾아보면서 공부하고 정리하다보면 어제보다 더 나은 개발자가 되있을 것이라고 생각합니다. 

머릿속으로는 이해하고 있지만 이해한 내용을 기록한다는 것은 여전히 쉽지 않습니다. 대단한 실력도 아니기에 코드가 좋지 못할 수 있고, 이해를 잘못했을 수도 있지만 부족한 점을 댓글로 남겨주시면 감사하겠습니다❗❗

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries#%EB%B3%B5%EC%9E%A1%ED%95%9C_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%83%9D%EC%84%B1

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

https://www.daleseo.com/css-media-queries/

CSS 미디어 쿼리 (Media Query) 사용법