둘째마당 기초! 모바일 웹 익히기

8장.미디어쿼리로 N스크린 스타일 준비하기 01. 원하는 글꼴을 마음껏! 웹폰트 사용하기 02. ‘미디어쿼리’로 디바이스 맞춤형 스타일 준비하기 03. 실전에 ‘미디어 쿼리’를 응용할 때 고려사항

01. 원하는 글꼴을 마음껏! 웹폰트 사용하기 CSS3의 웹폰트는 사용하고 싶은 글꼴을 자동으로 다운로드 받아 브라우저가 출력 @font-face { font-family: SeoulNamsanFont; src: url('SeoulNamsanL.ttf'); } p { font-family: SeoulNamsanFont; }

scalable-vector-graphic 웹폰트 지원현황 글꼴의 종류 확장자 설명 지원 브라우저 TrueType ttf 글꼴을 벡터형식인 직선과 곡선을 이용해서 표시하는 형식. MS의 PC환경에서 글꼴의 표준이 되어 많이 사용. 대부분의 브라우저 지원함(단, IE 지원안함) OpenType otf TTF 기술을 보유한 MS와 포스트스크립트 기술의 어도브 사가 제휴해서 PC와 맥 서체 환경을 통합하기 위해 만든 형식. TTF에 비해 용량이 적고 인쇄매체에 적합한 특징. Embedded- Opentype eot MS에서 웹페이지에 폰트를 포함시킬 목적으로 CSS2 에서 인터넷 익스플로러(이하 IE) 4.0 버전부터 시작한 형식. 현재는 IE 브라우저만 지원되며 EOTFast 툴(http://www.eotfast.com/)을 이용해서 TTF를 EOT로 변환. IE만 지원 scalable-vector-graphic svg, svgz W3C에서 벡터 그래픽을 표현할 목적으로 XML 기반으로 만든 오픈 형식. 1999년부터 시작된 오래된 형식이지만 최근에 와서 브라우저들이 지원. 대부분의 브라우저 지원함(단, IE는 버전 9이상만 지원)

01. 원하는 글꼴을 마음껏! 웹폰트 사용하기 글자효과에 맞는 글꼴만 따로 등록도 가능 @font-face { /* 서울남산체(Extra bold)를 다운로드 받아 설정 */ font-family: SeoulNamsanFont; src: url('SeoulNamsanEB.ttf'); font-weight: bold; /* bold 스타일은 이 폰트로 등록 */ } <p>이 문장은 웹폰트로 <b>"서울남산체"</b>를 사용하였습니다. </p>

서울 남산체 다운로드 http://design.seoul.go.kr

[따라해 보세요] 웹폰트 사용하기 (ex08-01)

02. ‘미디어쿼리’로 디바이스 맞춤형 스타일 준비하기 Media Query는 HTML에서 <link>를 여러 미디어에 해당되는 CSS파일을 다르게 포함시켜 사용하는 것 <link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)"> <link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">

미디어쿼리 값의 사용사례 종류 값 설명 예 디바이스 all 모든 디바이스가 대상 media="all" screen 컴퓨터 화면이 대상 media="screen" print 인쇄 미리보기, 또는 실제 인쇄매체가 대상 media="print" orientation 디바이스의 방향을 나타냅니다. "portrait"(세로로 길게), "landscape"(가로로 길게) 값을 사용해서 방향을 지정. media="orientation: landscape" 연산자 and And 연산자 역할 수행 media="screen and (orientation: landscape)" , Or 연산자 역할 수행 media="screen, print" 속성값 width 대상 매체의 해상도의 너비값을 지정해서 미디어 쿼리가 만족하는 조건을 설정함. "min-"(최소값),"max-"(최대값)의 접두어를 함께 적어서 범위를 지정할 수 있음. media="screen and (min-width:320px)" height 대상 매체의 해상도의 높이값을 지정해서 미디어 쿼리가 만족하는 조건을 설정함. "min-","max-"의 접두어를 함께 적어서 범위를 지정할 있음. media="screen and (max-height:480px)"

대표적인 스마트폰 브랜드 별 지원 해상도 (단위: 픽셀) 모바일 해상도 해상도 크기 적용 스마트폰 HVGA 320 * 480 아이폰 3GS, LG 옵티머스 원 WVGA 480 * 800 갤럭시 S/S2, LG 옵티머스 3D, 팬택 스카이 베가 레이서 FWVGA 480 * 854 모토로라 모토로이 qHD 540 * 960 HTC 센세이션, 모토로라 아트릭스 HD 640 * 960 아이폰 4 HD LTE 720 * 1280 옵티머스 LTE, 갤럭시 S2 HD LTE

[따라해 보세요] 미디어쿼리 사용하기 (ex08-02)

03. 실전에 ‘미디어 쿼리’를 응용할 때 고려사항 1단계 : 모바일과 데스크탑 PC 인터넷 환경의 차이점 인식 ① 가급적 이미지를 적게 사용해서 빠른 접속 속도가 나올 수 있도록 해야 함 ② 가로 크기를 고정시켜 놓고 CSS 작업을 하는 것은 바람직하지 않음 ③ 모바일 디바이스의 범위를 줄여서 테스트를 실시 ④ 터치환경에서는 숨기는 메뉴를 사용하는 것은 바람직하지 않음 ⑤ 모든 브라우저에서 모두 동일한 화면을 제공해 줄 필요는 없음

03. 실전에 ‘미디어 쿼리’를 응용할 때 고려사항 2단계 : HTML 작업 ① 심플한 시멘틱 마크업 ② 뷰포트 메타데이터 <meta name="viewport" content="user-scalable=no, width=device-width" />

<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화면에서만 보입니다. ...</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> <li><a href='#'>디지털 아트</a></li> <li><a href='#'>사운드 아트</a></li> <li><a href='#'>정보 가시화</a></li> <li><a href='#'>뉴 미디어 프로그래밍</a></li> </nav> <!-- 'sidebar' 끝--> </article> <!-- 'pg-main' 끝--> <footer class='foot'> <p>Copyright © 2011 All Rights Reserved</p> </footer> <!-- 'foot' 끝--> </div> <!-- 'pg' 끝-->

03. 실전에 ‘미디어 쿼리’를 응용할 때 고려사항 3단계 : 모바일 스타일링 ① 미디어 쿼리 ② 공통 스타일 파일 제작 ③ 하이퍼링크 스타일 ④ 메뉴를 접근하기 편한 곳에 배치

① 미디어 쿼리, ② 공통 스타일 파일 제작, ③ 하이퍼링크 스타일 <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)"> ① ② <link href="common.css" rel="stylesheet" type="text/css"> a:link, a:visited { color: inherit; /* 상위 엘리먼트의 색상 상속받음 */ text-decoration: none; } a:hover, a:active { text-decoration: underline; ③

④ 메뉴를 접근하기 편한 곳에 배치 .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; ④

03. 실전에 ‘미디어 쿼리’를 응용할 때 고려사항 4단계 : 데스크탑 PC 스타일링 ① 타이틀은 배경이미지를 활용

① 타이틀은 배경이미지를 활용 .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; /* 텍스트 표시는 우측 정렬시킴 */ /* 너비는 entries 고려하여 800px을 넘지 않도록 100px 로 설정 */ width: 100px; margin-left: 20px; /* entries와 간격을 만듬 */ ②

[따라해 보세요] 모바일과 PC 레이아웃 스타일 응용 (ex08-03)