[CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법

안녕하세요. 명월입니다.

이 글은 CSS에서 반응형 style를 만들기 위한 브라우져 사이즈별 css 적용 방법에 대한 글입니다.

제 블로그도 마찬가지이지만 반응형 css로 브라우져의 기종 별이 아닌 너비(width)에 따라 css가 보이는 형태가 다릅니다.

예를 들면 큰 모니터의 경우는 왼쪽 메뉴가 보일 것입니다.

너비의 크기가 줄어 들수록 보이는 글자 크기던가 리스트의 여백 크기가 조금씩 변합니다.이런 너비 사이즈마다 css 스타일이 변경되는 것은 반응형 웹이라고 합니다.

예전에는 PC에서 접속하는 환경과 mobile에서 접속하는 환경을 파악해서 javascript혹은 css를 구분하여 style를 작성했으나 PC는 브라우저가 정해져 있지만 모바일의 경우는 브라우저 뿐아니가 모델마다 각각의 화면 크기가 다르다보니 기종별로 웹을 작성하는 건 한계가 생겼습니다. 새로운 스마트 폰이 나올때마다 대응할 수 있는 것도 아닙니다.

그러다 보니 어느 정도 크기의 너비를 기준으로 반응형을 작성하기 시작했는데 그것이 반응형 웹입니다.

크기의 기준은 각자 편한대로 정해서 작성해도 되나 보통은 576px,768px,992px,1200px 기준으로 나눕니다.(bootstrap 기준)

링크 - https://getbootstrap.com/docs/4.3/layout/overview/

이 사이즈 별로 css를 달리해야 하는데 방법은 다음과 같습니다.

<style>
/*너비가 최대 576px까지의 style*/
@media screen and (max-width: 576px) {
  .Span-Responsibility{
    color:red;
  }
}
/*너비가 576px - 768px의 style*/
@media screen and (min-width: 577px) and (max-width: 768px) {
  .Span-Responsibility{
    color:blue;
  }
}
/*너비가 769px - 992px의 style*/
@media screen and (min-width: 769px) and (max-width: 992px){
  .Span-Responsibility{
    color:yellow;
  }
}
/*너비가 993px - 1200px의 style*/
@media screen and (min-width: 993px) and (max-width: 1200px){
  .Span-Responsibility{
    color:green;
  }
}
/*너비가 최소 1201px부터의 style*/
@media screen and (min-width: 1201px) {
  .Span-Responsibility{
    color:orange;
  }
}
.Span-Responsibility{
  font-weight: bold;
}
</style>
<span class="Span-Responsibility">Hello world Test</span>

Hello world Test

실제 브라우저의 크기를 늘였다 줄였다 하면 위 글씨의 색이 변하는 걸 확인할 수 있습니다.

위는 style안에서 적용하는 방법이고 크기별로 css 참조도 바꿀 수 있습니다.

<link rel="stylesheet" media="screen and (max-width: 576px)" href="css576.css" />
<link rel="stylesheet" media="screen and (min-width: 577px) and (max-width: 768px)" href="css768.css" />
<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 992px)" href="css992.css" />
<link rel="stylesheet" media="screen and (min-width: 993px) and (max-width: 1200px)" href="css1200.css" />
<link rel="stylesheet" media="screen and (min-width: 1201px)" href="css1201.css" />
<span class="Span-Responsibility-2">Hello world Test</span>

참조 - css576.css, css768.css, css992.css, css1200.css, css1201.css

Hello world Test-2

국내에서도 아직 많은 사이트들이 이런 반응형을 대응하지 않고 있습니다.예로 네이버나 다음도 반응형이긴 하지만 모바일과 PC사이트를 나눈 후에 모바일 쪽은 브라우져 크기에 따라 달리 보이게는 하는 것 같습니다만..

대형 포탈은 돈이 많으니 따로 디자인을 하는 것이겠지요.. 그 이유 뿐아니라 광고 등등의 여러 이유가 있을 것입니다.

너비를 통한 반응형이라고 만능은 아니니깐요..

그러나 블로그나 여러 디자인을 설계할 수 없는 사이트의 경우는 반응형을 사용하는게 모바일이나 PC 대응도 되고 여러모로 개발 공수를 줄일 수 있을 거라 생각합니다.

여기까지 CSS에서 반응형 style를 만들기 위한 브라우져 사이즈별 css 적용 방법에 관한 내용이였습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.