[CSS] 반응형 디자인 - 미디어 쿼리 사용법

반응형 디자인의 정의

반응형 디자인이란, 다양한 디바이스에서 사용자에게 최적화된 뷰를 제공하는 웹 디자인 기법이다. 휴대폰, 노트북, 가로 방향이, 세로 방향 등의 사용자의 환경에 따라 웹페이지의 레이아웃과 콘텐츠가 유동적으로 변화한다.이 기법은 주로 CSS3의 미디어 쿼리를 사용하여 구현된다.

---

왜 중요할까? 🤔

인터넷 초창기에는 대부분 컴퓨터만을 사용했기 때문에 화면 크기가 다양하지 않았다. 이 때에는 웹사이트를 디자인하기가 쉬웠지만, 최근에는 기술이 발달로 인해 기기와 화면의 크기가 다양해졌다.

초기에는 모바일 전용 웹사이트(m.naver.com)를 따로 만들어 해결했으나, 최근 7~8년 사이에 반응형 디자인이 주목받기 시작했다.이 접근 방식을 통해 웹사이트의 접근성을 높이고 사용자의 편의성을 향상시킬 수 있다. 사용자가 어떤 디바이스를 사용하든 일관된 경험을 제공하는 것은 매우 중요하다.

 

또한 구글과 같은 검색 엔진은 모바일 친화적인 웹사이트를 검색 결과에서 우선적으로 노출시키고 있다. 따라서 반응형 웹 디자인은 검색 엔진 최적화(SEO)에도 중요한 영향을 미친다.

 

마지막으로 별도의 모바일 사이트를 개발 및 유지하는 것보다 웹 사이트의 유지보수 비용을 절감할 수 있다.

---

MEDIA QUERIES

미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이다.

기본 문법

미디어 쿼리는 @media 키워드로 시작하며, 기본 구조는 아래와 같다.

@media 미디어 타입 and (조건) {
  스타일
}

• 미디어 타입: all, print, screen 등이 들어갈 수 있다. 생략하면 기본값은 all이다.
• 조건: 화면 너비, 해상도, 색상 등 다양한 미디어 특성을 포함한다.
• 스타일: 조건이 만족되었을 때 적용할 CSS 규칙이다.

사용 예시

사용 예시는 나중에 추가 예정ㅎㅅㅎ

---