as3pr.png

Aptana Studio 3 Rails는 Aptana 2에서 플러그인으로 지원하던 Ruby on Rails 프로그래밍 환경을 통합하여 독립실행형으로 때낸 것이며, 조금 더 생산적인 웹앱을 개발할 수 있도록 도모하기 위한 목적으로 만들어진 개발도구입니다. 기존 버전의 불안하거나 불편한 요소를 제거하여 인터페이스를 간소화하고 빠르며 안정적인 개발환경을 제공합니다. 아직 베타 버전이기 때문에 일부 기능이 완전하지 않으며 몇몇 알려진 문제가 존재하기 때문에 주 개발도구로 사용하지 말아달라고 합니다. 주요한 변동사항은 다음과 같습니다.

  • App Explorer를 이용하여 작업에 집중할 수 있습니다.
  • GIT와 완벽하게 통합되었습니다.
  • 보다 빠른 키보드 친화적 텍스트 편집을 지원합니다.
  • HTML5 그리고 CSS3를 지원합니다.
  • Ruby 1.9 그리고 Rails 3를 지원합니다.
  • 보다 다양한 검색 기능을 지원합니다.
  • Ruby 디버거를 포함합니다.
  • Ruble과 플러그인 API를 제공합니다.
  • 쉘 윈도를 내장하여 보다 쉽게 명령줄을 사용할 수 있습니다.
  • 무료이며 오픈소스입니다.

사실 Aptana Studio 3 Rails가 출시된지는 한달이 지났습니다만 이제서야 사용해 보았네요. 오픈소스로 전향된 후 Aptana 2.0.x는 다소 불안한 모습을 보여왔습니다. 특히, 문법 강조가 깨져 보이거나, HTML5를 지원하지 않아서 HTML 마크업할 때 짜증이 나곤 했거든요. 당분간 코딩용도로만 사용하려고 마음먹고 있습니다. 쉘 윈도를 내장하여 명령줄을 이용한 GIT 프로젝트를 포크하거나 서버를 다루는 작업이 한층 수월해 졌다는 것이 가장 마음에 드는군요. 하루빨리 정식버전에도 적용되었으면 하는 바램입니다.

Comments

resolutiondeplayouts.jpg
Chris Coyier씨는 브라우저의 창 크기에 따라 스타일시트를 로드하여 최적화된 레이아웃을 제공하는 방법에 대하여 작성했습니다. 위 데모는 윈도의 너비에 따라 3가지 스타일시트가 번갈아가며 실시간으로 적용합니다. 적용하는 방법은 다음과 같은 두 가지가 있습니다.

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' /> 

이 HTML 코드는 IE계열 브라우저를 제외한 브라우저에서 작동합니다. IE계열 브라우저까지 지원하기 위해서는 다음과 같은 자바스크립트(jQuery)를 이용해야 합니다.

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
        $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Comments

break-word.gif
동적으로 생산되는 HTML에 CSS를 입히는 과정에서 문자가 자동으로 줄바꿈되지 않는 경험을 한 적이 있나요? 저는 한 때 이러한 현상에 대한 해결방법을 찾지 못해 overflow속성을 이용하여 모양이 흐트러지지 않도록 하는 등의 삽질을 했던 기억이 있습니다. Nick La씨는 이 문제를 시원하게 해결할 수 있는 방법을 정리하여 개시했네요. 위 그림처럼 숫자나 영문에 뛰어쓰기 없이 붙여쓰여진 문자는 요소의 너비를 무시하고 다음 공백이 나타날 때 까지 줄바꿈되지 않습니다. 이러한 현상을 방지하는 CSS 속성이 있습니다. 바로 word-wrap속성입니다. IE 5.5 이상, 파이어폭스 3.5 이상, 사파리, 크롬 등 모든 브라우저에 이 속성을 적용할 수 있습니다.

.break-word {
  word-wrap: break-word;
}

Comments