반응형 웹이란

Monday essay 2013. 1. 29. 10:46 Posted by GTHJ
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

반응형 웹 (Responsive WEB) 디자인

반응형 웹을 간단히 정의하자면 다양한 디바이스의 각각 다른 디스플레이 규격떄문에 데스트탑 기준으로 디자인된 웹페이지를 어떻게 하면 모바일 디바이스에서도 디자인을 유지하면서 보여줄지를 고민하면서 나온 방법이라고 할 수 있습니다.

기존에는 데스트탑 버전과 모바일 버전을 따로 제작하는 이중작업이 필요했는데요, 반응형 웹으로 작업하면 하나의 소스로 각 디스플레이에 최적화 되어 보여줄수 있습니다.

무수히 늘어나는 디스플레이 규격을 맞춰 최적화 하는 것은 사실 완벽함이란 없습니다. 보편적으로 분류되는 타입에 따라 규격화 할 수 있습니다.

<시중에 나온 디바이스 규격>

아래는 삼성 증권의 반응형 웹으로 제작된 홈페이지 입니다.
데스크 탑 및 모바일 브라우저에서 불편함 없이 확인 할 수 있습니다.

320,768,1024의 넓이를 기준으로 별도로 제작된 CSS 를 적용하는 것이 일반적인 반응형 웹의 제작 방식입니다.
웹 코딩 혹은 프로그램시 아래의 기준에 따라 만들어진 CSS 가 모바일 디바이스의 화면에 알맞게 적용 되도록 처리 합니다.

<반은형 웹을 적용한 홈페이지 사례 입니다.>

CSS ? 정식명칭은 캐스케이딩 스타일 시트 (Cascading Style Sheet),
HTML
로 레이아웃을 만들 경우 나중에 디자인 수정시 소스를 확인 후 변경해야 하기 때문에 적용하는 것이 CSS 입니다. 디자인 변경시 CSS 만 수정하면 되므로 작업이 효율적으로 이루어 집니다. 폰트,택스트 등의 기본 스타일을 작업 해 놓은 후 불러다 쓴다고 이해하시면 됩니다.