티스토리 강좌 / CSS / Media Query / 가로폭에 따라 다른 디자인 만들기

반응형 웹디자인의 기본은, 접속하는 웹브라우저의 가로폭에 따라 다른 디자인을 적용하는 것입니다. 이때 사용하는 것이 @media입니다. @media로 가로폭의 범위를 정하고, 그 때 적용될 코드를 넣습니다.

범위를 정하는 방식은 min-width와 max-width가 있습니다.

min-width : 모바일 우선

아래는 min-width를 이용한 것으로, 기본 모양은 A, 768px 이상일 때는 B, 1024px 이상일 때는 C가 적용됩니다.

A
@media ( min-width: 768px ) {
  B
}
@media ( min-width: 1024px ) {
  C
}

예를 들어 아래와 같이 코드를 만들면, 767px 이하에서는 문단의 글자 크기가 16px, 768px 이상일 때는 17px, 1024px 이상일 때는 18px가 됩니다.

p { font-size: 16px; }
@media ( min-width: 768px ) {
  p { font-size: 17px; }
}
@media ( min-width: 1024px ) {
  p { font-size: 18px; }
}

max-width : 데스크톱 우선

아래는 max-width를 이용한 것으로, 기본 모양은 A, 1023px 이하일 때는 B, 767px 이하일 때는 C가 적용됩니다.

A
@media ( max-width: 1023px ) {
  B
}
@media ( max-width: 767px ) {
  C
}

예를 들어 아래와 같이 코드를 만들면, 1024px 이상에서는 문단의 글자 크기가 18px, 1023px 이하일 때는 17px, 767px 이하일 때는 16px가 됩니다.

p { font-size: 18px; }
@media ( max-width: 1023px ) {
  p { font-size: 17px; }
}
@media ( max-width: 767px ) {
  p { font-size: 16px; }
}
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침