화면 너비가 480px 이하가 되면 네비게이션 바 없어지는 html, css 코드 - @media

화면 너비가 480px 이하가 되면 네비게이션 바 없어지는 html, css 코드 - @media

See the Pen Untitled by hyunho (@momalcy) on CodePen.

 

코드 설명

 

• 폰트 크기:
  • 기본적으로 h1 태그는 2rem 크기로 설정됩니다.
  • 화면 너비가 768px 이하가 되면 1.5rem으로 줄어듭니다.
• 네비게이션 메뉴:
  • .nav 클래스의 ul 요소는 기본적으로 flex로 표시됩니다.
  • 화면 너비가 480px 이하가 되면 .nav는 display: none;으로 설정되어 화면에서 사라집니다.
• 반응형:
  • meta viewport 태그를 추가하여 다양한 디바이스 화면에서 적절히 반응할 수 있도록 설정했습니다.