반응형 웹사이트

💡 디바이스 크기가 줄어들고 늘어남에 따라

• 자연스럽게 웹사이트의 스타일이 변화되면 반응형
• 뚝뚝 끊겨서 독립적인 스타일이 적용되면 적응형

미디어쿼리 @media

여러 디바이스에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

스타일을 변경하기 위한 조건

• min-width : 브라우저의 최소 가로 폭
• max-width : 브라우저의 최대 가로 폭
• ex) 브라우저의 가로폭이 320px ~ 800px이 되었을 경우 아래 CSS 속성으로 대체한다.

  @media screen and (min-width: 320px) and (max-width: 800px) {
  	h1 {...}
  	h1:hover {...}
  }

미디어쿼리 사용 시 주의사항

1. meta 코드 작성

다음 코드를 반드시 html의 head에 작성해야 한다.

• 작성하지 않을 시 미디어쿼리가 제대로 작동하지 않는 문제 발생
• viewport로 너비, 비율 설정 ⇒ 모바일 디바이스에서 의도한 화면으로 볼 수 있음

• viewport : 다양한 디지털 기기의 화면에 표시되는 영역을 의미
  • 너비와 배율을 설정할 때 사용하는 속성 중 하나
• width=device-width : viewport의 가로폭 = 디바이스의 가로폭
• initial-scal=1.0 : 디바이스의 초기 비율 = 1.0

2. CSS 속성 상속

• 미디어쿼리 외부 영역에 있는 CSS 속성을 상속 받음
• 상속 받고 싶지 않다면 속성 값으로 none 입력

사용

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Media Query의 표현식에서 사용할 수 있는 프로퍼티

• orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있음
• 일반적으로 반응형 웹 디자인은 viewport를 기준으로 한다.

참고 및 사진 출처

• https://poiemaweb.com/css3-responsive-web-design