실전에서 미디어쿼리 응용하기
1단계 : 모바일과 테스크톱 PC 인터넷 환경의 차이점 인식
● 3G 사용이 제한된 무선 인터넷
● 다양한 모바일 디바이스의 화면 크기
● 중요한 스마트폰으로 한정해 놓고 초점을 맞출 것!
● 링크의 ‘롤오버’ 처리는 역사 속으로
● 모든 브라우저에서 모두 동일한 화면을 제공해 줄 필요는 없습니다.
2단계 : HTML 작업
● 심플한 시맨틱 마크업
HTML 마크업 작업은 웹 표준에 입각해서 심플하면서도 분명하게 작업해 주어야 합니다. 시맨틱 마크업을 위해서 HTML5의 지침에는 header, article, section, footer 같은 훌륭한 엘리먼트들을 사용하라고 알려줍니다. 아차피 div 엘리먼트를 사용하던 시절에도 이런 구분을 사용했으므로 오히려 새로운 엘리먼트를 과감히 적용해 사용합니다. div 만 이용해서 구분하던 것보다 훨씬 더 직관적이고 분병하게 콘텐트를 이해할 수 있습니다.
<div class='pg'>
<div class='head'>
<h1>미디어아트 인터랙션 디자인 </h1>
</div> <!-- 'head' 끝-->
<div class='pg-main'>
<div class='entries'>
<h2>브라우저의 너비를 800px 미만으로 줄여보세요.</h2>
<p class='pcview_only'>이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. </p>
<p>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
<hr/>
<h2>반대로 브라우저의 너비를 800px 이상으로 늘려 보세요. </h2>
<p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
<p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
</div><!-- "entries" 끝 -->
<div class='sidebar'>
<h3>SNS 등록</h3>
<ul>
<li><a href='#'>페이스북</a></li>
<li><a href='#'>트위터</a></li>
</ul>
<h3>카테고리</h3>
<ul>
<li><a href='#'>디지털 아트</a></li>
<li><a href='#'>사운드 아트</a></li>
<li><a href='#'>정보 가시화</a></li>
<li><a href='#'>뉴 미디어 프로그래밍</a></li>
</ul>
</div> <!-- 'sidebar' 끝-->
</div> <!-- 'pg-main' 끝-->
<div class='foot'>
<p>Copyright © 2011 All Rights Reserved</p>
</div> <!-- 'foot' 끝-->
</div> <!-- 'pg' 끝-->
● 뷰포트 메타데이터
스마트폰 브라우저를 통해서 데스크톱 PC용 사이트에 접속해 볼 때 줌아웃(zoom-out) 되어 글자가 작게 보였던 기억이 있으신가요?
예를 들어 스마트폰의 해상도가 320px * 480px 로 되어 있다고 해서 가로 너비를 320px 에 맞춰서 작업을 하더라도 기본 뷰토트는 더
큰값(예: 980 px) 에 맞춰져 있습니다. 그래서 한 화면에 모든 내용르 다 보여주기 위해서 자동으로 화면을 줌 아웃시켜서 글자가
작게 보이는 것입니다.
이러한 문제점을 해결하기 위해서는 다음과 같은 메타 태그를 사용해서 선언해 주면 됩니다.
<meta name="viewport" content="user-scalable=no, width=device-width" />
위 예에서 user-scalable=no 라고 선언한 것은 사용자가 줌인/줌아웃 기능을 사용하지 못하도록 해줍니다. width=device-width라고 선언한 것은
디바이스의 원래 해상도값으로 너비값을 재설정하는 것입니다. 예를 들어 아이폰 3GS 의 경우 320px 이라면 그 값으로 너비를 자동으로 지정해
줍니다. 만약 다른 스마트폰이라면 알아서 자동으로 설정해 주므로 일일이 해상도를 지정하지 않아도 됩니다.
원래 이 메타 태그는 아이폰에서 페이지를 표시할 때 사용할 목적으로 만들어졌습니다. 하지만 아이폰뿐만 아니라 안드로이드 스마트폰에서도 잘
동작합니다.
3단계 : 모바일 스타일링
● 미디어 쿼리
모바일 디바이스와 데스크톱 PC를 모두 지원하기 위해서는 각 경우에 맞는 CSS 스타일을 포함시켜 사용해야 합니다. 앞에서 설명한
미디어쿼리가 정답입니다. 여기서도 동일하게 화면 크기를 800px 을 기준으로 해서 그 이상이면 데스크톱 PC 로 간주하고 미만이면 모바일
디바이스로 간주합니다.
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)">
최대 799px 이면 모바일 디바이스로 간주하여 'mobile.css ' 파일을 가져오고 최소, 800px 이상이면 데스크톱 PC 로 간주하여
'desktop_pc.css' 파일을 가져오는 경우 입니다.
● 공통 스타일 시트 제작
데스크톱 PC와 모바일 디바이스를 분리하여 제작하는 것은 쉬우면서도 가장 효율적인 방법입니다. 하지만 실제로 이렇게 양분해서
작업하다 보면 두 개의 스타일을 완벽하게 나누기가 어렵다는 것을 알게 됩니다. 때로는 동일한 스타일이 양쪽 파일에 중복해서 사용되는
경우가 있게 됩니다. 이런 경우를 대비하여 공통분모만 모아서 별도의 파일로 분리하는 것이 해결책이 될 수 있습니다.
<link href="common.css" rel="stylesheet" type="text/css">
위 예는 공통 스타일만 묶어서 'commons.css' 라는 파일로 가져다 작업하는 경우입니다.
전체적인 엘리먼트의 여백이나 자주 사용되는 a, h1, h2, h3, p 등의 엘리먼트는 공통 스타일 파일에서 선언해 주면 됩니다.
● 하이퍼링크 스타일
하이퍼링크 스타일의 경우 상속 기능을 사용하면 상위 엘리먼트의 스타일을 그대로 전해 받아 처리할 수 있으므로 편리합니다.
a:link, a:visited{
color: inherit; /* 상위 엘리먼트의 색상 상속받음 */
}
a:hover, a:active{
text-decoration: underline;
}
위 예를 보면 방문 전과 후 보통 형태의 링크 스타일을 적용하기 위해 a:link와 a:visited 를 사용했는데, 눈여결볼 점은 색상의 특성에
inherit 를 준 것입니다. 이렇게 해주면 상위 엘리먼트의 색상을 이어받아 동일한 모습으로 표시할 수 있으므로 매번 링크 스타일을 지정하지
않아도 됩니다.
<h1>h1의 글자 색은 회색입니다.
<a href="#">하이퍼링크도 상속을 받아 회색입니다.</a>
</h1>
그리고 데스크톱 PC와 모바일 디바이스 양쪽 모두 링크가 선택되었을 경우를 처리해 주어야 합니다. 데스크 톱 PC에서 마우스 롤오버 처리를
위해 hover에 밑줄을 생기게 하고, 스마트폰인 경우는 터치했을 때에 대비하여 active 에 밑줄을 나타나게 합니다.
● 모바일 퍼스트! 모바일 스타일을 먼저 멋지게 만들고
그 다음 데스크톱 PC의 큰 화면에서 스타일 하세요.
많은 분들이 이미 데스크톱 PC 에서 스타일 작업하는 것에 익숙해 있습니다. 그러다 보니 보통 데스크톱 PC로 스타일 작업을 하고 나서
그 후에 스마트폰 화면이 작아 못 넣을 부분이 있으면 생략하고 기존 CSS 를 손보면서 작업을 합니다. 이 방법은 이미 익숙한 작업이므로 당연하게
받아들여집니다. 하지만 작업을 하다 보면 느낄 수 있지만 이 방법에는 큰 약점이 있습니다. 작은 방에 코끼리를 넣지 못하듯 데스크톱 PC의 큰 화면
에 맞춰진 스타일을 스마트폰 으로 변환시키려면 분명히 희생할 부분이 생깁니다. 또한 데스크톱 PC를 먼저 멋지게 스타일을 하고 시간여유가 있을
때 스마트폼의 화면에 끼워 넣은 듯한 작업을 하게 됩니다. 그렇다 보니 디자인이나 콘텐츠의 손실도 생기고 우선순의에서 떨어져 간단하게 끝내게
됩니다. 이러한 문제점의 해결책으로 이미 루크 로블스키(Luke Wroblewski, 전 야휴 디자인 아키텍터) 가 제안했듯 반대의 접근법을 사용하는 것이
해결책이 될 수 있습니다
이 방법의 장점은 일단 모바일 스타일에 공들이게 되므로 콘텐츠의 손실이 없게 됩니다. 또한 작은 집에서 큰 집으로 이사 가면 이삿짐을 배치하기
쉽듯이 오히려 자연스럽게 데스크톱 PC용 스타일 변경이 이루어집니다. 모바일에 쓸 만한 디자인이라면 데스크톱 PC 에도 물론 유용할 것입니다.
● 메뉴를 접급하기 편한 곳에 배치
모바일과 데스트톱 PC에서 가장 차이가 나는 레이아웃은 메뉴 부분입니다. 일반적으로 스마트폰 사용자는 아래로 스크롤하면서 내용을 읽어
나갑니다. 그리고 메뉴를 이용하려면 다시 거꾸로 위로 스크롤 해서 원하는 페이지로 이동해야 합니다. 다시 말해서 모바일에서 사용자가 가장
번거로워하는 부분은 메뉴로 가려면 거꾸로 올라가야 한다는 것입니다. 따라서 사용자 경험 관점에서 볼 때 메뉴는 하단에 위치시키는 것이
바람직합니다. 이번 예제에서는 지금까지 설명한 내용을 쉽게 이해할 수 있도록 nav 엘리먼트를 사용해서 아예 하단에 배치하겠습니다.
그냥 표시하는 것보다 가로로 배치시키고 파이프 모양을 구분선으로 세워두면 세련되어 보이므로 다음처럼 스타일을 줄 수 있습니다.
4단계 : 데스크톱 PC 스타일링
● 타이틀 배경 이미지를 활용
데스크톱 PC는 화면 크기가 넓기 때문에 디자이너가 표현하고 싶은 그림을 마음껏 펼칠 수 있습니다. 배경 이미지를 넣기에 좋은 부분은
header 엘리먼트입니다. 다음처럼 head 클래스 선택자를 이용하면 됩니다.
데스크톱 PC 는 화면 크기가 넓기 때문에 디자이너가 표현하고 싶은 그림을 마음껏 펼칠 수 있습니다. 배경 이미지를 넣기에 좋은 부분은
header 엘리먼트입니다. 다음처럼 head 클래스 선택자를 이용하면 됩니다.
.head {
background-image:url(title.png); /* 타이틀 이미지를 배경으로 바꿈 */
background-repeat:no-repeat;
width:800px; /* 이미지 크기로 설정 */
height :264px;
}
.head h1{
display: none; /* 텍스트 제목은 이미지로 대치하므로 화면에서 생략함 */
}
.head 클래스 선택자에 배경 이미지와 가로 세로의 크기를 지정합니다. 또한 한번만 표시하면 되므로 반복은 없도록 설정합니다.
그리고 header 엘리먼트에 들어 있던 h1 엘리먼트의 제목 내용은 이미지가 대신할 것이므로 표시할 필요가 없습니다.
display 속성에 none 값을 대입하여 화면에서 사라지게 합니다.
● 메뉴를 오른쪽에 배치하기
데스크톱 PC의 레이아웃 작업에서 가장 핵심이 되는 것은 메뉴를 오른쪽에 배치하는 것입니다. 이렇게 하기 위해서는 한 행에 두 개의
열을 배치해야 합니다. 이러한 작업에 대해서는 float과 clear 를 사용하면 가능하다는 것을 앞에서 이미 배웠습니다. 이 예제의 경우
두 개의 Box(상자) 그룹인 'entries' 와 'sidebar' 를 다음처럼 float 를 사용하여 배치하면 됩니다.
이번 예제는 전체 너비가 800px 에 맞춰져 있으므로 그 안에서 너비와 여백 값을 조절하면 됩니다. entries 상자 ( BOX) 그룹은
680 px 로 고정하고, sidebar 상자 (BOX) 그룹은 100 px 로 고정하면 총 780px 이 됩니다. 나머지 20px 안에서 둘 사이의 여백을
주면 됩니다.
.entries{
float:left; /* entries 를 상자로 간주하여 왼쪽으로 float */
width: 680px; 너비는 sidebar도 고려하여 680px 로줄임 */
}
.sidebar {
float : left; /* entries 옆에 나란히 출력을 위해 float 시킴 */
text-align: right ; /* 텍스트 표시는 우측 절열 시킴 */
width: 100px ; /* 너비는 entries 고려하여 800px 을 넘지 않도록 100px 로 설정 */
margin-left: 20px; /* entries 와 간격을 만듬 */
}
위 예는 본문 글인 entries 와 메뉴인 sidebar 의 클래스 선택자 스타일을 지정한 내용입니다. entries 의 경우 너비 680px 이고
float 를 left 로 지정하여 왼쪽으로 정렬시키면서 뒤따라오는 엘리먼트들이 오른쪽으로 끌려오도록 만듭니다. 이어서 sidebar 도 너비
100px 이고 역시 float 를 left 로 지정하여 entries 바로 오른쪽에 달라붙으면서 왼쪽으로 정렬시킵니다. 이때 margin-left 를 20px로
지정하여 정확하게 800 px 안에서 모든 것이 배치되도록 합니다.
모바일과 PC 레이아웃 스타일 응용
1. custom_style.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link href="common.css" rel="stylesheet" type="text/css">
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)">
</head>
<body>
<div class='pg'>
<header class='head'>
<h1>미디어아트 인터랙션 디자인 </h1>
</header> <!-- 'head' 끝-->
<article class='pg-main'>
<section class='entries'>
<h2>브라우저의 너비를 800px 미만으로 줄여보세요.</h2>
<p class='pcview_only'>이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. 이 문장은 PC화면에서만 보입니다. </p>
<p>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
<hr/>
<h2>반대로 브라우저의 너비를 800px 이상으로 늘려 보세요. </h2>
<p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
<p class='pcview_only'>이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. 이 문장은 모든 디바이스 화면에서 보입니다. </p>
</section><!-- "entries" 끝 -->
<nav class='sidebar'>
<h3>SNS 등록</h3>
<ul>
<li><a href='#'>페이스북</a></li>
<li><a href='#'>트위터</a></li>
</ul>
<h3>카테고리</h3>
<ul>
<li><a href='#'>디지털 아트</a></li>
<li><a href='#'>사운드 아트</a></li>
<li><a href='#'>정보 가시화</a></li>
<li><a href='#'>뉴 미디어 프로그래밍</a></li>
</ul>
</nav> <!-- 'sidebar' 끝-->
</article> <!-- 'pg-main' 끝-->
<footer class='foot'>
<p>Copyright © 2011 All Rights Reserved</p>
</footer> <!-- 'foot' 끝-->
</div> <!-- 'pg' 끝-->
</body>
</html>
2. commons.css
@charset "utf-8";
@font-face { /* 서울남산체(모바일용)를 다운로드 받아 설정 */
font-family: SeoulNamsanFont;
src: url('SeoulNamsan.ttf');
}
@font-face { /* 서울남산체(Extra bold)를 다운로드 받아 설정 */
font-family: SeoulNamsanFont;
src: url('SeoulNamsanEB.ttf');
font-weight: bold; /* bold 스타일은 이 폰트로 등록 */
}
* {
margin: 0px;
padding: 0px;
}
body {
line-height: 150%;
font-family: SeoulNamsanFont; /*웹폰트로 '서울남산체' 설정*/
}
a:link, a:visited {
color: inherit; /* 상위 엘리먼트의 색상 상속받음 */
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h1 {
font-size: 25px;
color: #FFF;
}
h2 {
font-size: 19px;
color: #333;
margin-top: 5px;
margin-bottom: 5px;
}
h3 {
font-size: 12px;
color: #666;
margin-top: 5px;
margin-bottom: 5px;
}
p{
margin-bottom:10px;
}
header, footer {
display: block;
}
3.mobile.css
@charset "utf-8";
.head {
background-color: #473E37; /* 타이틀 그림 대신 고동색으로 변경 */
padding: 1em;
}
.pg-main {
padding-right: 10px;
padding-left: 10px;
}
.entries p.pcview_only{
display:none; /* pcview_only로 설정된 글 화면에서 생략 */
}
.sidebar ul { /* 맨 왼쪽에 장식용 바 그림 */
border-left-width: 2px;
border-left-style: solid;
border-left-color: #ccc;
}
.sidebar ul li { /* 인라인 레벨로 바꾸고 오른쪽에 장식용 바 그림 */
display: inline;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #ccc;
padding-right: 5px;
padding-left: 5px;
}
.foot {
background-color: #333;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999;
padding: 10px;
color: #FFF;
margin-top: 10px;
text-align: center;
}
4.desktop_pc.css
@charset "utf-8";
.pg {
width: 800px; /* 가로 너비를 800px로 고정 */
margin-right: auto; /* 좌우 여백을 같게 하여 가운데 정렬 시킴 */
margin-left: auto;
}
.head {
background-image: url(title.png); /* 타이틀 이미지를 배경으로 바꿈 */
background-repeat: no-repeat;
width: 800px; /* 이미지 크기로 설정 */
height: 264px;
}
.head h1 {
display : none; /* 텍스트 제목은 이미지로 대치하므로 화면에서 생략함 */
}
.entries {
float: left; /* "entries"를 상자로 간주하여 왼쪽으로 float */
width: 680px; /* 너비는 sidebar도 고려하여 680px로 줄임 */
}
.sidebar {
float: left; /* entries 옆에 나란히 출력을 위해 float 시킴 */
text-align: right; /* 텍스트 표시는 우측 정렬시킴 */
width: 100px; /* 너비는 entries 고려하여 800px을 넘지 않도록 100px 로 설정 */
margin-left: 20px; /* entries와 간격을 만듬 */
}
.sidebar ul {
list-style-type: none; /* 뷸렛 장식 제거*/
}
.foot {
background-color: #333;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999;
padding: 10px;
color: #FFF;
margin-top: 10px;
clear: left; /* 끌려 올라가지 않도록 clear 시킴*/
text-align: center;
}
결과 >>
http://braverokmc2.dothome.co.kr/junho/ex08-03/custom_style.html
HTML5 Presentation - HTML5 에 대하여 학습하기
https://www.html5rocks.com/ko/
댓글 ( 4)
댓글 남기기