Rev. 2.73

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니다.

속성으로 구분하기

스마트폰 (가로/세로):

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

스마트폰 (가로):

@media only screen and (min-width : 321px) {
/* Styles */
}

스마트폰 (세로):

@media only screen and (max-width : 320px) {
/* Styles */
}

iPad (가로/세로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

iPad (가로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

iPad (세로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

데스크탑 브라우저 (가로):

@media only screen and (min-width : 1224px) {
/* Styles */
}

큰 모니터:

@media only screen and (min-width : 1824px) {
/* Styles */
}

iPhone4와 같은 높은 해상도:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

파일로 구분하기

스마트폰 (가로/세로):

<link rel="stylesheet" href="smartphone.css"
  media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

스마트폰 (가로):

<link rel="stylesheet" href="smartphone-landscape.css"
  media="only screen and (min-width : 321px)">

스마트폰 (세로):

<link rel="stylesheet" href="smartphone-portrait.css" 
  media="only screen and (max-width : 320px)">

iPad (가로/세로):

<link rel="stylesheet" href="ipad.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

iPad (가로):

<link rel="stylesheet" href="ipad-landscape.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

iPad (세로):

<link rel="stylesheet" href="ipad-portrait.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

데스크탑 브라우저 (가로):

<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1224px)">

큰 모니터:

<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1824px)">

iPhone4와 같은 높은 해상도:

<link rel="stylesheet" href="iphone4.css"
  media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

Comments

JS Bin은 오픈소스 기반의 자바스크립트 협업 도구입니다. PHP로 만들어진 녀석이라 설치를 시도했습니다만, 구글의 Closure Compiler(JAVA)를 이용한 빌드 과정이 포함되어 있어서 걍 안쓰고 말았더랬습니다. 일반적인 웹 호스팅 서비스에서는 자바 서블릿을 실행할 수 없기 때문입니다. A.J님boxersb님이 설치하는 모습을 보고 "이거 서버 시스템 스킬을 익혀야 하나..."하는 생각을 하며 마냥 부러워만 하다가 꼼수가 떠올라 우회할 수 있는 몇가지 방법을 시도하여 성공했고 그 과정을 기록합니다.

1. github로 부터 소스를 내려받습니다.
2. 동봉된 sql 파일들을 DB에 등록합니다.
3. 동봉된 phpMake 파일을 phpMake.php로 이름을 변경하고 마지막 부분을 다음과 같이 편집합니다.

변경 전:

...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";
system ('java -jar "./lib/compiler.jar" --js="' . SPROCKETIZED . '" --js_output_file="' . PRODUCTION . '" --warning_level=QUIET');

unlink(SPROCKETIZED);
echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
?>

변경 후:

...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";

$ch = curl_init("http://closure-compiler.appspot.com/compile");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, "output_info=warnings&output_info=errors&output_info=statistics&output_info=compiled_code&output_format=json&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=".urlencode(file_get_contents(SPROCKETIZED)));

$output = json_decode(curl_exec($ch));
curl_close($ch);

if ($output->compiledCode) {
  file_put_contents(PRODUCTION, $output->compiledCode, LOCK_EX);
  echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
} else {
  echo "Compile error!";
}
unlink(SPROCKETIZED);
?>

4. jsbin 폴더를 웹 서버에 업로드합니다.
5. 브라우저의 주소창에서 phpMake.php를 호출합니다.
6. 설치된 경로에서 작동여부를 확인합니다.

서버에서 자바 서블릿을 실행하는 부분을 구글에서 제공하는 Closure Compiler의 오픈 API를 사용하는 방식으로 변경한 것입니다. 결국 스크립트를 빌드하는 과정 때문에 설치를 못하고 있었던 것입니다. 더 쉬운 방법으로는 jsbin.com에서 이미 빌드되어 서비스 되고있는 /js/2.x.x/jsbin.js 파일을 저장하여 정적으로 호출해도 해결되는 문제인 것입니다. 더욱 자세한 설치 방법은 위 두 분의 포스팅을 참고하면 되겠습니다. 추가적으로 나름 한글화를 시도했으며, 루트에 설치하지 않아도 되도록 소스를 전반적으로 수정했습니다. 계정 인증으로 보안하고, 실제 서버에 있는 자바스크립트 리소스를 호출하여 편집할 수 있도록 손보면 온라인 에디터로도 손색이 없겠더군요. 이미 누군가 하고 있겠죠? 참 오랜만에 포스팅합니다. 개인사정으로 한동안 방치하게 될지도 모르겠습니다.

Customized:

- 소스 탐색 기능 추가
- Format(html, javascript) 도구 추가
- Compress 도구(jsmin, cssmin, closure-compiler) 추가
- Javascript Bookmarklet 도구 추가
- 트위터 계정 연동
- 계정단위 리비전 생성 기능 추가
- 계정단위 리비전 삭제 기능 추가
- 계정단위 편집 가능여부 확인
- 관리자 환경 추가
- 미리보기 상태 유지
- 리비전 이동 도구 추가
- 레코드 되지 않은 필드 구분 오류 출력
- 아이폰 화면 최적화
- URL 변경 도구 추가
- CSS 필드 추가
- CSS Format 도구 추가
- 필드 단위 Format 기능 추가(현재 포커스 된 창)
- 필드 단위 Compress 기능 추가(현재 포커스 된 창)
- HTML Compress 기능 추가(css, js 복합 압축 기능 지원)

Comments

트위터가 가진 데이터는 왜이리 가지고 싶은걸까요? 요 며칠동안 트위터에 저장된 데이터를 가져오기 위해 그들이 제공하는 오픈 API로 많은 삽질을 해 보았지만 이렇다 할 성과를 거두지 못했습니다. 얻은 결론은 오픈 API를 통해서는 트위터 사이트로 부터 얻어낼 수 있는 만큼의 데이터를 확보하기는 어렵다는 것입니다. 그래서 다음과 같은 북마크릿을 만들었습니다. 이 북마크릿은 트위터에서 현재 머무르고 있는 곳의 모든 자료를 JSON 스트링으로 만들어 줍니다. 예를들어 @사용자ID 를 클릭하여 멘션을 조회하는 상태라면 트위터 서비스에서 허용한 데이터 출력 범위 내의 모든 멘션 데이터를 JSON으로 만들어 주는 것입니다.

HTML로 부터 얻어내는 데이터는 다음과 같습니다.

{
  "user": {
    "screen_name": "zziuni",
    "profile_image_url": "http://a0.twimg.com/profile_images/1082290724/gravatar_normal.jpg"
  },
  "id": "19455882373",
  "text": "@firejune 큰일날뻔했군요.. waterjune.com 될뻔.. ㅡ ㅡ;",
  "source": "<a href=\"http://www.tweetdeck.com\" rel=\"nofollow\">TweetDeck</a>",
  "created_at": "Sun Jul 25 00:12:55 +0000 2010",
  "in_reply_to_status_id": "19431051539"
}

일단 이곳에서 필요로하는 최소한의 데이터 속성들만 수집하였으며 필요하면 더 많은 속성을 추출할 수도 있을 것입니다. 그리고 유기적으로 연결된 글들을 표현하기 위한 데이터이므로 "in_reply_to_status_id" 값이 없는 것들은 제외하였습니다. 아래의 북마크릿을 브라우저의 북마크 바에 끌어다 놓고 트위터 페이지에서 추가된 북마크릿을 클릭하여 사용할 수 있습니다. 수집이 완료되는 즉시 결과을 페이지에 출력하며 AJAX 요청이 많이 일어나기 때문에 환경에 따라서는 수분이 소요될 수도 있습니다. 트위터가 사용하는 스크립트를 이용하기 때문에 나중에는 작동하지 않을 수도 있으니 필요한 분들은 지금 덤프하세요.

twtdump 북마크릿 - 이 링크를 브라우저의 북마크 바로 끌어다 놓으세요.
twtdump.js 스크립트 소스 - 직접 수정해서 사용하세요.

Comments