본문 바로가기

반응형 웹

적응형 웹(AWD, Adaptive Web Desing)과 반응형 웹(RWD, Responsive Web Design)의 차이점 적응형 웹(AWD, Adaptive Web Desing)의 정의 적응형은 몇개의 해상도를 정의하여 CSS코딩시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다. 적응형웹은 PX단위를 사용하여 각 디비이스마다라기 보다는 정해진 해상도에 적응된 형태로 화면에 그려지기 때문이다. 반응형웹과 적응형웹모두 공통적으로 미디어쿼리를 사용한다. 반응형 웹(RWD, Responsive Web Design)의 정의 사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것이다. 협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단말환경에 반응하여 웹페이지를 제공하는 것이라고 정의 할 수 있다. 즉, 화면 너비에 ..
RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게..
미디어 쿼리(media queries) 사용법과 속성 미디어쿼리(@media)를 사용하기전 체크사항 1. HTML5인지 확인합니다 ==> HTML 4.0 버전에서는 개발하기 힘듭니다. 2. 이 하나라도 있는지 확인합니다 ==> TABLE가 존재할 경우 레이아웃이 깨집니다. 3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다 ==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠. 4. 되도록 스크립트 코드는 부분보다는 끝에 작성합니다 ==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다. 미디어쿼리(@media)를 사용법 구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.) @media를 미디어쿼리라고 합니다. 모두 스타일 시트 내부에 작성됩니다. 1) @media only all ..
[MEDIAQUERI.ES]미디어쿼리(Media queries)를 사용한 반응형 웹 사이트 갤러리 반응형 웹 모음 마크업은 모두 같고, CSS로만 제어하여, 반응형 웹으로 만든 사이트들을 한눈에 볼 수 있는 갤러리 사이트입니다. 바로가기