Responsive Design

스마트 폰와 타블렛의 보급으로 웹 사이트를 보는 Device가 다양해지면서, Device의 화면의 사이즈 별로 프로그램의 직접 수정없이 동적으로 보여주는 디자인을 Responsive Design 이라고 합니다.

Responsive 기능은 CSS3에서 추가된 Media queries로 인하여 구현이 가능해졌습니다.
예로, 아래 코드는 화면 사이즈가 0~600px까지 HTML tag에 class=”sidebar”가 붙은 내용은 보여주지 않으라는 CSS3 코드입니다.

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}
</style>

2015년에 Google이 mobile-friendliness를 랭크에 반영하기로 하면서, Responsive 디자인은 웹사이트 개발에서 선택이 아닌 필수 사항이 되어버렸습니다.

Responsive Design