반응형 웹 사이트를 만들때 알아두면 좋은 3가지

반응형 모바일 디자인이란 콘텐츠가 사용자가 보는 화면에 맞게 조정된다는 것을 의미합니다. 스마트폰은 태블릿이나 데스크톱보다 화면 공간을 덜 차지합니다. 디바이스에 따라 화면이 맞지 않을 수가 있는데, 디바이스별로 레이아웃을 조정해야 합니다.

 

반응형 웹 사이트

 

반응형 웹 사이트를 만들 때 알아두면 좋은 3가지 사항

1. Fuid 그리드 : 데스크톱, 노트북과 같은 대형 화면으로 웹 사이트를 만들지만 스마트폰, 태블릿과 같은 매우 작은 화면에는 Fluid 그리드가 필요합니다. 고정 너비 레이아웃에서 크기는 픽셀로 설정되는 반면 유동적 디자인에서는 레이아웃의 크기가 백분율로 정의되어 화면 해상도와 브라우저 창의 크기에 따라 사용 가능한 공간에 적응하고 제한 없이 표시됩니다.

 

2. Fluid Images: 반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.

이미지가 응답성에 따라 각각 위아래로 크기를 조정하려면 CSS height를 auto로 설정하고 width 속성을 100%로 설정해야 합니다.

img { 

    width: 100%; 

    height: auto;

}

 

원래 크기보다 큰 배율이 없더라도 이미지를 축소하려면 max-width:100%를 사용합니다.

img { 

    max-width: 100%; 

    height: auto;

}

 

반응형 이미지의 최대 크기를 제한하려면 선택한 구성 픽셀과 함께 max-width 속성을 사용해야 합니다.

img {

    max-width: 300px; 

    width: 100%; 

    height: auto;

}

 

3.Media Queries, Device Breakpoints: 높이와 너비가 완전히 다른 화면과 장치가 많기 때문에 장치마다 고정된 중단점을 만드는 것이 쉽지 않습니다. 아래의 5가지 디바이스별 브레이크 포인트가 있습니다.

 

 /* Extra small devices (phones, 576px and down) */

@media only screen and (max-width: 575px) {.......}

 

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 576px) {.......}

           

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {.......}

 

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {.......}

 

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {.......}

 

 

반응형 웹디자인의 좋은점으로는 더 많은 모바일 트래픽을 불러올수 있으며, 저렴한 비용으로 더 빠른 모바일 개발과 낮은 유지 보수 SEO 속도 향상과 더 높은 전환율이 있습니다. 또한 디자인과 브랜드의 일관성 간편한 분석 보고도 좋은 점이라 할 수 있습니다.