[CSS] 반응형 웹(Responsive Web)

반응형 웹(Responsive Web)

반응형 웹(Responsive Web)은 다양한 디바이스( 데스크톱, 노트북, 태블릿, 스마트폰 등 )에서 웹 사이트가 적절하게 표시되도록 하는 디자인 및 개발 접근 방식입니다.

---

주요 특징과 장점

1. 다양한 디바이스 호환성 : 반응형 웹은 데스크톱, 노트북, 태블릿, 스마트폰 등 모든 디바이스에서 일관된 경험을 제공합니다.
2. SEO 향상 : 구글과 같은 검색 엔진은 모바일 친화적인 웹 사이트를 선호하며, 반응형 디자인은 SEO(검색 엔진 최적화)를 향상시키는 데 도움이 됩니다.
3. 유지 보수 용이성 : 하나의 코드베이스를 유지보수하면 되므로 개발 및 업데이트가 간편합니다. 
4. 사용자 경험 향상 : 사용자는 화면크기에 관계없이 일관된 경험 느낄 수 있습니다.

 

반응형 웹의 핵심 원리

1. 유연한 레이아웃 : 웹 페이지의 구성 요소들이 화면 크기에 따라 유동적으로 배치되어야 합니다. 이를 위해 상대적인 단위(%, em, rem 등)를 사용하여 레이아웃을 설계합니다.
2. 미디어 쿼리(Media Queries) : CSS에서 소개된 미디어 쿼리를 사용하여 화면 크기, 해상도, 장치 종류 등과 같은 다양한 미디어 특성에 따라 스타일을 조정합니다. 이를 통해 특정 디바이스에 맞춤형 스타일을 적용할 수 있습니다.
3. 유동적인 이미지와 미디어 : 이미지와 동영상 같은 미디어 자산들은 화면 크기에 따라 적절한 크기로 조정되어야 합니다. 이를 위해 유동적인 이미지 크기와 미디어 쿼리를 사용하여 적절한 이미지를 로드 할 수 있습니다.

 

미디어 쿼리(Media Queries)

미디어 쿼리는 @media 규칙을 사용하여 특정 미디어 유형에 대한 스타일 규칙을 설정합니다. 아래 구문을 통하여 사용해 봅시다.

3개의 반응형 분기점

/* 데스크톱 화면 */
@media only screen and (min-width: 1024px) {
  /* 데스크톱 화면에서 적용될 스타일 */
}

/* 태블릿 화면 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* 태블릿 화면에서 적용될 스타일 */
}

/* 스마트폰 화면 */
@media only screen and (max-width: 767px) {
  /* 스마트폰 화면에서 적용될 스타일 */
}

• PC : 1024px ~
• 태블릿 가로, 태블릿 세로 : 768 ~ 1023px
• 모바일 가로, 모바일 세로 : ~ 768px

위의 예제에는 데스크톱 화면은 최소 너비가 1024px 이상일 때, 태블릿 화면은 최소 너비가 768px에서 최대 너비가 1023px일 때, 스마트폰 화면은 최대 너비가 767px일 때의 스타일을 지정하고 있습니다.

 

4개의 반응형 분기점

/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
  ...
} 

/* 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
  ...
} 

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {
  ...
} 

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
  ...
}

 

• 낮은 해상도의 PC, 태블릿가로 : ~1024px
• 태블릿 가로 : 768px ~ 1023px
• 모바일 가로, 태블릿 : 480px ~ 767px
• 모바일 : ~ 480px

---

정리!

프로젝트마다 유동적으로 할 수 있게 충분한 연습을 하시길 바랍니다.

다음 포스팅은 CSS 레이아웃 구성에 대해 포스팅 하겠습니다.

---

참고사이트

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design

반응형 디자인 - Web 개발 학습하기 | MDN

https://velog.io/@hihijin/HTMLCSS-%EC%8B%AC%ED%99%94-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9

[HTML/CSS 심화] 반응형 웹