반응형 홈페이지란?

반응형 홈페이지란 무었일까요?

스마트폰이 개발되면서 작은 사이즈의 모바일 기기에서 인터넷에 접속이 가능하고 홈페이지까지 접속을 할 수 있게 되었습니다.

하지만 스마트폰 특성상 작은 화면에서 홈페이지의 모든 내용을 보여줘야 하게 되었죠.

보통 일반적인 PC 모니터를 생각해 본다면 가로 세로 사이즈가 스마트폰 보다 몇배는 더 크죠.

이 PC모니터에 최적화되어있는 홈페이지를 작은 스마트폰에서 접속한다면 이미지나 글자가 몇배는 작아져서 보이겠죠.

그렇다면 이 문제를 위해서 스마트폰에서 접속을 할 경우 작은 화면에 맞춰진 홈페이지를 다시 만들어야 할까요?

처음 스마트폰이나 모바일 기기들이 출시되었을때는 PC용 홈페이지따로 모바일기기 홈페이지따로 제작을 해서 사용을 했었습니다.

이렇게 두가지 홈페이지를 만들면서 모바일 기기에서 접속했을 경우 이미지나 글자, 홈페이지의 전체적인 레이아웃이 작은 화면에 최적화 되어서 PC, 모바일 기기 모두에서 홈페이지가 잘 보이게 되었습니다.

하지만 단점이 있죠.

홈페이지가 두개이기 때문에 홈페이지에 내용을 수정할때 작업을 두번 해주어야 합니다.

그리고 처음 제작비용도 더 많이 들겠죠.

그래서 반응형 홈페이지가 나오게 됩니다.

반응형 홈페이지는 홈페이지에 접속하는 기기의 화면 사이즈에 맞춰서 홈페이지를 제작할때 정해놓은 화면 사이즈별 레이아웃과 이미지크기, 텍스트 크기가 자동으로 적용이 되게 됩니다.

가장 쉽게 반응형 사이트가 작동하는 모습을 보시고 싶다면 지금 보고계시는 Source Market 사이트에서 인터넷 창의 가로를 천천히 줄여보시면서 어떻게 바뀌는지 보시면 좋을거 같아요.

가장 간단한 방응형 홈페이지입니다.

너무 간단한가요? ㅎㅎ

쇼핑몰이나 대기업 홈페이지에 접속해서 인터넷창의 가로를 줄여보시면 확인해 보실 수 있습니다.

이렇게 반응형 홈페이지를 만들게 되면 어떤 기기에서 접속을 하더라도 최적화된 모습의 홈페이지를 볼 수 있게 됩니다.

 

그럼 이제 반응형 홈페이지의 기본적인 html/css 소스코드를 알아볼까요?

“반응형 웹사이트의 기본 소스 코드” http://sourcemarket.co.kr/index.php/responsive-website-basic-code

 

카테고리Web

답글 남기기