Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[번역]스마트폰에 모바일 CSS 적용시키기

스마트폰에 모바일 CSS 적용시키기[원문]

Posted by Jen in coding front-end, trends on December 9th, 2009

(역자 주 : 당연히, 나는 전문 번역자가 아니다. 그래서 오역이 있을 수 있다. 원문의 링크는 클리어 보스에서 얻었다. 원문과 비교해 보면 의역이 많다는 걸 알 수 있을 텐데, 번역 실력이 모자라기 때문에 그런 거다;;)

내가 모바일 CSS에 대해 얘기할 때, 나는 아이폰의 사파리, 블랙베리의 기본 브라우저, 그리고 신제품이지만 많은 이들이 사용하게 될 오페라 미니를 떠올린다.(원문은 이거다 : I am looking for safari in iphone, blackberry default browser and this new born but the mobile browser for majority to be – opera mini.)

오늘날, 3세대 폰임에도 불구하고 스마트폰은 미국 시장에서 가장 중요한 시장을 형성하고 있다. 그런데 불행히도 데스크탑 컴퓨터와는 달리 모바일 웹은 국제 표준이 없다. 결국, 모바일용 페이지를 디자인할 때, 브라우저 호환성과 접근성을 해결하기 위해 보통 더 많은 노력을 들여야 한다. 그리고 우습게도, 대부분의 스마트폰은 자신을 handheld 기기로 간주하지 않는다. 그래서 이 “handheld” CSS 선언이 제대로 작동하지 않는다.

<link media=”handheld” href=”mobile.css” type=”text/css” rel=”stylesheet” />

우선, 아이폰 기본 브라우저인 사파리.

맞다, 아이폰은 모두에게 모든게 쉽게 만들어져 있다. 소비자뿐 아니라 아이폰 어플 개발자도 [아이폰용 작업을 하기는] 웹디자이너만큼이나 쉽다. ^^ 그래서 아이폰에 접근하는 게 다른 스마트폰 기기에 접근하는 것보다 훨씬 간단하다.

<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

스스로를 handheld로 여기는 기기들을 포함하기 위해, 이 라인을 좀더 일반적으로 작동하도록 고쳐 보자.

<link media=”handheld, only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

좀더 안전하게, 한 번 더 작업을 해 주자. 기기의 가로 사이즈가 320픽셀이거나 그 아래인 경우에도 작동하도록. 그걸 위해서 이렇게 해 준다.

<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

이 두 라인을 넣으면 어디서나 완벽하게 작동을 한다. 단, W3C CSS validator만 빼고. 그렇다. W3C는 모바일 style 라인을 고려하지 않는데다가 검증(validation)을 통과시켜 주지도 않는다. 여기서는 대응법을 말하지 않겠다. 더 많은 정보를 얻으려면, 여기를 보라 : http://csscreator.com/node/28171

블랙베리 기본 브라우저

블랙베리는 어떤 식으로 세팅을 해 놔도 모바일 스타일시트를 인지하지 않는다.[그냥 데스크탑 css를 사용해 버린다.] handheld로 해도, 가로 480px이나 320px로 해 놔도 마찬가지다. 블랙베리[로 들어온 유저]한테 모바일 페이지를 보여 주기 위해서 딱 한 가지 방법이 있다. 자바스크립트를 이용해서 블랙베리에게 모바일용 페이지를 보여 주는 것이다. [그러려면 블랙베리를 인지하는] 스크립트를 다른 작동하는 스크립트들보다 더 앞쪽에 놔야 한다. 나는 페이지 이동 없이 모바일 스타일시트를 적용하기 위해서 노력했는데, 불행히도 작동하지 않았다. 더 자세한 내용을 보자.

<script type=”text/javascript”>
var deviceBB = “blackberry”;
//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
var cssFile = “mobile.css”;
//**************************
// Detects if the current browser is a BlackBerry of some sort.
if (uagent.search(deviceBB) > -1) {
//document.getElementById(’blackb’).href = ‘mobile.css’; // this doesn’t work
window.location = ‘home_bb.html’;
//document.write(’<link href=”‘+cssFile+’” type=”text/css” rel=”stylesheet”>); //this doesn’t work either
}
</script>

오페라 미니

얘는 대부분의 스마트폰 ─ 블랙베리, 아이폰, treo palm 등 ─ 에서 작동하는 정말 좋은 모바일 브라우저다. 모바일 CSS를 이 오페라 미니에게 인식시키기 위해서, 다음 두 라인이면 충분하다.

<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

오페라 미니 시뮬레이터 사이트가 있다. http://www.opera.com/mini/demo/ 여기서는 모바일 폰 없이도 모바일 CSS를 테스트해 볼 수 있다. 그러나 ‘잘못된'(FALSE) 결과만 보여 준다. 그러니 테스트용으로 사용하지는 마라. 자기가 갖고 있는 모바일 폰에 직접 오페라 미니(it)를 설치해서 실제로 폰에서(there) 테스트를 해 봐야 한다.(이 부분은 제대로 번역한 것인지 좀 자신 없다.)

시뮬레이터에서 볼 수 없는, 진짜 폰에서 볼 수 있는 문제(Issue)가 있다 :

오페라 미니는 CSS에서 font size를 인식하지 않는다. 이건 내가 위키피디아에서 가져온 문장이다 : 오페라 미니는 오직 한 종류의 폰트만 지원한다. 이 폰트는 글꼴크기로 “Small”, “Medium”, “Large”와 “Extra large” 사이즈만 지원한다.

http://en.wikipedia.org/wiki/Opera_Mini

폰트의 기본 사이즈는 “medium”이다. 이 문제를 파악했다면, 모바일 스타일을 디자인할 때, 만약 오페라 미니 브라우저를 염두에 둔다면, 모든 텍스트 사이즈를 medium으로 놓고 페이지를 거기에 맞춰야 한다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (8개)

  • 안녕하세요. 클리어보스 운영자 추지호입니다^^ (제 블로그도 관심블로그로 되어 있네요. 영광입니다~)

    번역해 주신 글 잘 읽었습니다. 제가 언젠가 번역해야지 해 놓고 리스트업만 해 놨던거였는데 이렇게 먼저 번역해 주시고, 공개까지 해 주셔서 감사할 따름입니다.

    여유가 되시면 클리어보스에서 함께 번역 활동을 해 보시는건 어떨까 싶습니다. 순수하게 아마추어 번역에, 열정만 가지고 활동하는 모임이지만 한사람 한사람의 수고가 많은 분들께 도움을 줄 수 있는 활동이라고 생각하거든요.

    그리고 허락해 주시면 클리어보스 문서 페이지에 이 번역글을 링크하고 싶은데 괜찮을런지요? (원문은 여기에 그대로 두고, 목록에 리스트업만 하고 싶습니다.)

    • 안녕하세요? 자유게시판에도 올려 놨는에 http://www.clearboth.org/forum/viewtopic.php?pid=2182#p2182 이렇게 댓글까지 남겨주셔서 영광입니다. ^^
      제가 필요하기도 했고, 클리어보스에 링크됐으면 하는 생각도 해서 굳이 이렇게 번역을 한 거거든요. 당연히 링크해 주시면 영광이죠! ^^
      그리고 이거 번역은 했지만 영어실력이 제가 그닥 좋지가 않아요;; 그래서 제대로 할 수 없는 게 더 많겠지만, 맡겨 주신다면 최선을 다해서 번역해 볼게요. 직접 방문 정말 감사감사!!!

  • 좋네요. 안그래도 요즘 스마트폰 보급도 많이 되서.. 이런쪽 관심이 많았는데.. 감사합니닷

    • 답글이야말로 감사! ^^ 이런 게 나도 좋고 남도 좋은 일이군요. ㅋ 필요때문에 번역했는데 여러 분들이 고마워하는 것 같아 쑥스럽습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다