[CSS] 미디어 쿼리를 이용한 네비바

✨media query

미디어 쿼리(Media Query)는 CSS에서 사용되는 기능으로, 웹 페이지의 미디어(장치 또는 미디어 유형)에 따라 스타일을 조건부로 적용할 수 있게 해준다. 이를 통해 다양한 장치에서 웹 페이지를 적절하게 렌더링할 수 있다.

@media mediaType and (mediaFeature) {
  /* 스타일 규칙들 */
}

• mediaType은 대상 미디어 유형을 지정하고,
  mediaFeature는 조건을 설정하는데 사용된다.

• 일반적으로 mediaType은 미디어 유형(화면, 인쇄 등)을 지정하고,
  mediaFeature는 미디어 특성(화면 너비, 장치 방향 등)을 지정한다.

@media screen and (max-width: 768px) {
  /* 화면 너비가 768px 이하인 경우에만 적용되는 스타일 규칙들 */
}

실전

body {
  font-family: 'Open Sans', sans-serif;
}
 
h1 {
  font-size: 60px;
  text-align: center;
}
nav {
  font-size: 30px;
  display: flex;
  justify-content: space-between;
}
ul,li {
  display: inline;
  margin: 0;
  padding: 0;
}
ul {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: space-evenly;
}

@media (max-width: 768px) {
  h1 {
    font-size: 40px;
    color: yellow;
  }
  nav, nav ul {
    flex-direction: column;
    align-items: center;
  }

}

👍🏻화면 너비가 768px 이하일 때 세로로 정렬, 가운데 정렬