102924 til

반응형 웹이란?

반응형 웹(Responsive Web)은 다양한 사용자 환경(노트북, 모바일, 데스크톱 등)에서도

 

웹사이트가 사용자 화면 크기에 맞춰 자동으로 조정되는 디자인 방식을 의미 한다 

 

반응형 웹을 통해 각 기기에서 최적의 사용자 경험을 제공할 수 있다 

 

왜 반응형 웹이 중요한가?

사용자 경험 개선: 모바일이나 태블릿 등 다양한 기기에서도 편리하게 이용할 수 있어 사용자 만족도가 높아짐

SEO 최적화: 구글과 같은 검색 엔진에서 반응형 웹사이트를 더 우대하여 검색 순위에 긍정적인 영향을 줄 수 있다

관리 효율성: 여러 디바이스에 맞춰 여러 버전을 따로 만드는 것보다 하나의 디자인을 유지 관리하기가 쉽다.

 

 

미디어 쿼리 사용하기

• 반응형 웹을 구현할 때 가장 중요한 도구는 CSS의 미디어 쿼리(media queries)다 
• 예를 들어, 화면 크기가 768px 이하일 때 특정 스타일을 적용하고 싶다면 아래와 같은 코드를 작성할 수 있다 

 

/* 모바일 화면 (최대 768px) */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 태블릿 화면 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 데스크탑 화면 (1024px 이상) */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}