반응형 홈페이지 준비하기

1. 반응형페이지의 필요성

현재 사이트를 운영할때에 PC, 스마트폰, 태플릿 등 다양한 기기를 활용하여 접속하는 관계로 인하여, 하나의 페이지로 다양한 

접속기기 환경에서의 대응하는 기술이 필요하게 되었다.

그것을 충족하게 한 기술은 반응형홈페이지(RWD, Responsive Web Design) 이다.

즉, 모든 크기의 화면에 대응이 된다.

2. 반응형홈페이지 구현방법 3가지

 1) Flexible Image(가변이미지) : 이미지의 크기가 화면크기에 따라 줄어들고 늘어난다. max-width:100%

출처 : http://tobyyun.tumblr.com/

 2) Fluid Grid(가변그리드) : 컬럼의 너비가 창크기에 따라 간격이 자동적으로 조정된다. 그리드는 문서의 서식을 잡아주기 위해 사용되는 규칙적 간격

출처 : http://tobyyun.tumblr.com/

 3) Media Query(미디어 쿼리) : 메뉴제목이 화면크기에 따라 적합한 형태로 변화.

    소스코드는 min-width, max-width 등을 활용하여 특정지점을 기준으로 설정하고, 이를 바탕으로 화면을 최적화시킨다.

출처 : http://tobyyun.tumblr.com/

3.  RWD는 중소형 사이트 적합 VS   포털사이트 부적합

  1) 포털사이트에 RWD 적용하기 어려운 이유1 - 페이지최적화

   - 원칙적으로 PC에서 보이는 모든 컨텐츠는 스마트기기에서 모두 볼 수 있다.

   - 넓은 PC화면에 있는 것을 스마트기기 화면으로 옮기면 세로로 길어질 수 밖에 없다. = 스크롤수 증가

   - 중요치 않은 컨텐츠는 display:none 속성을 활용하여 숨길 수 있다.

   - 단, 눈에만 보이지 않을뿐 백그라운드에서 다운로드를 받고 있다. 그만큼 시간과 데이터가 낭비된다.

   2) 포털사이트에 RWD 적용하기 어려운 이유2 - 소스오더의 문제

    - RWD구현시 HTML소스를 기록한 순서대로 화면에 나열을 한다.

    - 특정기기에서만 나열순서를 바꿀 수 없고, 바꾸려면 사이트 전체를 함께 바꿀 수 밖에 없다.

    - RWD는 웹표준을 준수하여 작성된 코드를 전제로 한다.

    - 순서는 CSS,Flexbox,Grid 등을 활용하여 편법적으로 하는 것도 가능할 수는 있으나,

       RWD의 중요한 특성인 가변성을 잃어버릴 수 있다.

      잃게 되는 문제점을 가지고 있다.

   3) 결론

    - 상기제시한 두가지 사유로 인해 RWD는 중소형사이트에 적합하다.

    - 그래서, 다양한 컨텐츠를 가지고 있는 포털이나 대형사이트들은 모바일 사이트를 별도로 운영하는 것이다.