반응형 웹 페이지 구현할 때 도움이 될 만한 내용.

※ 본 게시글은 제가 2016년 4월 28일에 네이버에 작성하였던 글을 가져온것입니다. (원본)

요즘 회사에서 반응형 웹피이지를 구현하고 있습니다.

반응형 웹이라는거, 생각해보면 별거 없습니다.

특히, 기존의 웹페이지가 구현되어있는 경우에는 아래의 사항에 유의(?)하여 소스를 수정하시면 됩니다.

우선은 html파일의 헤더부에 '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' viewport 태그를 삽입합니다.

이로서 해당 페이지는 접속하는 기기의 해상도에 따라 페이지 크기가 자동으로 조절됩니다.

(글자가 화면 밖으로 삐져나가서 이리저리 스크롤할 일이 없어집니다.)

그리고 이미지나 테이블 같은 경우에는 width나 height값을 px단위가 아닌 %단위로 설정한다면, 역시 기기 해상도에 따라 크기가 조절됩니다.

단, 이미지의 경우 이미지 자체 해상도등에 따라 내용이 뭉게져서 출력될 수도 있습니다.

마지막으로 글자크기.

글자크기를 설정할 때 em단위를 이용하여 설정하면 적당히 조절된다고 합니다.

사실 이것 말고 제가 추천하는 것은 jquery 플러그인을 이용하는 방법인데요.

제가 추천드리는 플러그인은 'flowtype'이라는 플러그인입니다. 이 플러그인을 소개하자면, 화면의 크기에 따라 글자들의 크기를 자동으로 조절해줌은 물론이고, 최소 및 최대 크기 제한을 둘수도 있습니다.

해당 플러그인의 자세한 사용법은 아래의 링크를 참고하세요~

'http://simplefocus.com/flowtype/'

이 플러그인은 저도 찾아만 놓고 써보지는 않았습니다.

왜냐하면 제가 구현중인 페이지들에는, 굳이 이 기능을 넣을 필요가 없을것 같아서 안 넣었습니다.

그래도 샘플을 확인해보시면 아시겠지만, 굉장히 편리하게 이용할 수 있을것 같습니다.

(해서 까먹을까봐 여기다가 써놓는 중입니다. jquery가 안 익숙한건 비밀)

사실 이 작업 시작하기전에는 '반응형 웹'이라는 단어만으로 굉장히 복잡하고 대단할꺼라는 인상을 많이 받았습니다만, 생각보다는 큰 문제 없이 작업이 진행되고 있습니다.

(물론, 모바일에 맞춰서 css까지 수정하는건 굉장히 번거롭습니다.. ㅠ)