반응형 웹 디자인을 만드는 방법
매우 어려운 인상이 있지만,방법 자체는 매우 간단합니다.. 대부분의 경우 다음 두 단계로 가능합니다.
HTML 파일과 같은 헤더 부분에 meta viewport 태그 추가
CSS 파일에서 PC용과 스마트폰용의 표시 방법의 차이를 기술한다
실제 작업에는 미세 조정이 필요합니다. 경우에 따라 표시 화면을 보면서 확인하므로 시간이 걸릴 수 있습니다.
단계 (1) meta viewport 태그 추가
추가할 위치
HTML 파일로 만든 웹 사이트의 경우 모든 HTML 파일의 헤더 부분에 추가합니다. 반면에 WordPress로 만든 웹사이트의 경우 공통 템플릿 파일(header.php 등)에 추가합니다.
사용자가 액세스할 때 사용한 기기에 대한 화면 크기 등의 정보를 얻습니다.
이 정보에 있는 화면의 가로 사이즈로부터 PC용인지 스마트폰용인지를 판단한다
위의 판단 후에 구체적인 지시(다른 파일의 CSS 등)에 따라 웹사이트의 표시가 PC와 스마트폰으로 전환됩니다.
단계 (2) CSS 파일에서 지정
미디어 쿼리를 사용합니다. 적용되는 CSS의 지시 내용을 화면 크기에 따라 전환할 수 있는 곳이 포인트입니다. 이렇게 하면 PC와 스마트폰에서 서로 다른 디스플레이와 레이아웃을 할 수 있습니다. 미디어 쿼리를 사용한 구체적인 지시 내용은 다음과 같습니다.
■PC용의 경우
예로서, 표시 화면의 사이즈가 481px 이상인 경우를 상정하고 있습니다. 이 숫자를 「브레이크 포인트」라고 부르고, 포인트의 사이즈가 되면, PC와 스마트폰에서의 지시 내용이 바뀝니다. 481px라는 숫자는 임의의 숫자를 지정할 수 있습니다. 혼란스럽지만, 이 경우의 「min-width」란, 여기에서 지정한 481px 사이즈 이상의 경우의 지시 내용이 됩니다.
【소스 코드】
@media screen and (min-width: 481px) { }
{} 안에 일반 CSS를 넣습니다.
■스마트폰용의 경우
다음에, 표시 화면의 사이즈가 0px~480px의 경우는 이하와 같습니다. 마찬가지로, 이 경우의 「max-width」란, 여기에서 지정한 480px사이즈 이하의 경우의 지시 내용이 됩니다.
【소스 코드】
@media screen and (max-width: 480px) { }
{} 안에 일반 CSS를 넣습니다.
반응형 웹 디자인에서 자주 사용하는 CSS
PC와 스마트폰으로 구분하는 대표적인 CSS를 소개합니다.
【기본 패턴】 화상 사이즈 변경
웹 사이트에서 이미지를 탐색할 때 PC에서 판별할 수 있지만, 그대로 스마트폰 표시하면 이미지가 너무 작아 판별할 수 없는 경우가 있습니다. 이 경우, 화상의 가로폭을 스마트폰의 가로폭 한 잔에 표시시키면 보기 쉬워집니다. 따라서 스마트 폰의 경우에만 다음과 같이 이미지의 가로 폭 크기를 100 %로하는 내용을 설명합니다.
