JB FACTORY

반응형 웹디자인의 기본은, 접속하는 웹브라우저의 가로폭에 따라 다른 디자인을 적용하는 것입니다. 이때 사용하는 것이 @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; }
}