반응형 웹 Responsive Web
하나의 웹 페이지가 창 크기에 따라 해상도에 특화된 레이아웃으로 자동으로 변하는 웹 페이지를 말한다.
과거에는 모바일과 태블릿, 데스크탑 등 기기에 맞도록 독자적인 웹 페이지를 디자인했었다.
즉, 시간과 비용이 2, 3배로 뛰게되어 비효율적이었고 이러한 문제를 개선해준 것이 CSS의 미디어 쿼리라고 할 수 있다.
그래서 오늘은 미디어쿼리를 살펴볼까 한다.
미디어 쿼리 Media query
미디어는 모두가 알다시피 매체이며, 쿼리는 질의를 의미한다.
굳이 의미를 짚어보자면 '매체(기기)에 따른 요구사항' 정도로 받아들이자.
사용법
다음 코드를 CSS 파일 내 작성하면 동작한다.
@media (max-width: 768px) {
html{background-color:red;}
}
@media (min-width: 769px) {
html{background-color:blue;}
}
코드를 살펴보면 @media는 미디어쿼리의 시작을 알리는 키워드이며,
반응형 웹의 주 목적이 모바일 환경과 데스크탑 환경 모두를 통용하는 것이기 떄문에
윈도우 사이즈이자 뷰의 너비, 기기의 해상도 조건을 걸고 시작하게 된다.
@media(max-width:768px). 즉, 화면 너비가 최대 768px 일 경우엔 중괄호({}) 안의 내용을 실행하란 의미가 된다.
반대로 min의 경우는 당연히 최소 너비가 되며, 최소 769px을 넘어가게 되므로 데스크탑에 해당한다고 할 수 있다.
따라서 위 코드를 적용한다면,
가로 너비 768px 이하의 태블릿 PC 또는 모바일 환경에선 배경화면이 붉게 보일 것이고
가로 너비 769px 이상의 데스크탑 환경에선 파랗게 보이게 될 것이다.
가이드
모바일, 태블릿, 데스크탑 총 3개의 환경으로 나누어 저 마다의 레이아웃을 제공하고 싶을 때
다음과 같은 형태에서 코드를 작성해나가면 된다.
물론 너비는 자신이 원하는대로 설정해도 좋고,
보편적으로는 480까지 모바일, 768 또는 1024까지 태블릿, 그 이상을 데스크탑으로 구분한다.
@media (max-width: 480px) {
/* 모바일 환경 */
}
@meida (min-width: 481) and (max-width: 768px) {
/* 태블릿 환경 */
}
@media (min-width: 769) {
/* 데스크탑 환경 */
}
이제 위의 뼈대에 살을 붙이기 위한 사전지식을 알아보자.
- 셀렉터
디자인에 앞서, 자신이 원하는 태그에 접근하는 것이 우선일 것이다.
이를 셀렉터(Selector)라 하고, 크게 3가지 방법을 간단히 살펴보겠다.
1) 엘리먼트(Element)로 직접 접근하기
우리가 흔히 사용하는 HTML 마크업 태그인 '<html>', '<div>' 를 지칭한다.
css에서 이들을 가리킬 때에는 아무런 수식없이 그대로 적으면 된다.
예) html에 접근하고자 할 경우
html{ /* 지정할 스타일 내용 */}
또한 정의하지 않은 태그도 생성가능하다.
예) cc 태그를 만들고자 할 경우
<!-- HTML 문서 -->
<cc> 나만의 태그 </cc>/* CSS 문서 */
cc { /* 지정할 스타일 내용 */ }
2) ID 값을 통해 접근하기
우리는 엘리먼트에 속성(Attribute)을 지정해 줄 수 있다.
원하는 태그 아무데나 사용가능하지만 통상적으로 고유성향을 가진 위치에 삽입한다.
'#'을 통해 접근한다.
예) div 태그에 id 부여하기
<!-- HTML 문서 -->
<div id='view'>/* CSS 문서 */
#view{ /* 지정할 스타일 내용 */ }
3) Class 값을 통해 접근하기
ID와 마찬가지로 클래스(class)를 지정하여 접근할 수 있다.
클래스는 통상적으로 여러 자원들을 묶어서 스타일링 해주고자 할 때 사용한다.
'.'을 통해 접근한다.
에) button 태그에 class 부여하기
<!-- HTML 문서 -->
<button class='btn01' />/* CSS 문서 */
.btn01 { /* 지정할 스타일 내용 */ }
4) 보너스로 상속관계
쉽게말하면 포함관계다. 흔히 부모와 자식관계라고도 하는데, 예를 통해 보면 이해가 쉽다.
예) p 태그 안의 a 태그 접근하기
<!-- HTML 문서 -->
<p> <a href="http://it-ing.tistory.com/" target="_blank"> 아이티-잉 </a> </p>/* CSS 문서 */
p > a { /* 지정할 스타일 내용 */ }즉, '>' 는 하위레벨로 커서를 이동시킨다고 생각하면 된다.
하지만 클래스와 ID는 '>'없이 나열만으로 접근할 수 있다.
5) 셀렉터 응용
종합적으로 접근 예시를 들어보겠다.
<!-- HTML 문서 -->
<div id='view'>
<font> 폰트 </font>
<button class='btn'/>
</div>
<ul class='category'>
<li> 홈 </li>
<li> 즐겨찾기 </li>
<li> 문의 </li>
</ul>/* CSS 문서 */
#view { width: 100%; }
#view > font { color: red; }
#view .btn { background-color: blue; border-radius: 25px;}
.category {height: 200px;}
ul.category > li {text-align: center;}
접근 요령을 위한 예제이고, 어렵지않은 내용이므로 설명은 생략하겠다.
- 버리기
조만간 UX 카테고리를 채워나갈 예정이고 그때 다시 자세한 설명을 하겠지만,
반응형 웹 디자인의 기본은 모바일부터 완성해 나가는 것이다.
사람들은 살을 붙여 추가하는 것엔 강하나, 대부분 빼거나 줄여나가는 것에 약하다.
예를 들면 장바구니에 물건 담는건 잘해도 덜어내는 걸 어려워한다.
개발자는 또한 많은 것을 보여주고 기능을 제공하고 싶어하나,
사용자는 원하는 정보만 간결하고 보기쉽게 얻길 원한다.
그렇기때문에 작은 화면에 핵심 콘텐츠를 담아야하는 모바일 페이지부터 작성하는게 좋다.
@media (max-width: 480px) {
/* 모바일 환경 */
#m_nav {display: block;}
#t_header {display: none;}
#contents {display: inline-block; width: 100%;}
}
@meida (min-width: 481) and (max-width: 768px) {
/* 태블릿 환경 */
#m_nav {display: none;}
#t_header {display: block;}
#contents {display: inline-block; width: 50%;}
}
@media (min-width: 769) {
/* 데스크탑 환경 */
#m_nav {display: none;}
#t_header {display: none;}
#contents {display: inline-block; width: 25%;}
}
대략적으로 간단히 풀이해보자.
모바일 환경에선 전용 네비게이션을 보여주고 콘텐츠는 행마다 1개씩 표기된다.
태블릿 환경에선 네비게이션을 숨기고 태블릿 헤더를 표기하며 콘텐츠를 행마다 2개씩 표기한다.
데스크탑에선 네비게이션과 태블릿 헤더를 숨기고 콘텐츠를 행마다 4개씩 출력한다.
본 블로그 또한 반응형 웹으로 디자인했기 때문에 창 크기를 줄이고 늘리다보면 변화하는 레이아웃을 볼 수 있다.
(이미지 캡쳐 : 아이티-잉 PC 버전)
(이미지 캡쳐 : 아이티-잉 모바일버전)
마치며
사실 내용이 별로 없어서 어리둥절 할 수 있지만,
원하는 태그에 접근하는 방법과 창 크기에 따라 스타일을 지정하는 방법만 알아도 충분히 반응형 웹을 디자인 할 수 있다.
그래도 보다 자세한 작성법은 필자가 공부했던 책의 리뷰 또는 UX 카테고리를 통해 구체적이고 심도있게 다뤄보기로 하겠다.
오늘은 여기까지.
끝!
'IT > WEB, UI, UX' 카테고리의 다른 글
| [웹 서비스 개발 환경 구축 ①] 이클립스 :: 스프링 프레임워크 설치하기 (0) | 2016.04.29 |
|---|---|
| [UX] UX(User Experience) :: 개념, 목업 및 프로토타입 도구, 와이어프레임 (0) | 2016.04.13 |
| 티스토리 블로그 :: 웹 페이지 로딩속도 최적화하기 (0) | 2016.03.14 |
| 티스토리 디자인 팁 :: 댓글 프로필버튼 제거, 메인페이지 설정, 카테고리 변경 (3) | 2016.03.02 |
| 아이콘폰트 :: Fontello 사용법 (4) | 2016.01.13 |