이곳은 Mac 관련 유용한 정보들을 모아 많은 분과 함께 공유하기 위해 운영되고 있습니다. 잠깐 들르시는 나그네라도 자유롭게 글을 올리시고 의견을 나누실 수 있습니다.이번에 소개할 BBEdit용 (혹은 AppleScript 지원 글자 편집기) Apple Script는 웹 페이지를 설계할 때, 유연한 배치 기술(elastic layout techniques)을 적용할 경우 아주 유용하게 사용될 수 있는 것들입니다.
여기서, 유연한 배치 기술이란 간단하게 CSS style sheet에서 측정 단위로 pixel 대신에 em 단위를 사용하는 기술이라 말할 수 있습니다. 이러한 기술의 장점이라면, 사용자가 웹 페이지의 글꼴 크기를 바꿀 때, 전체 페이지 구조도 글꼴 크기에 따라 자동 축소/확대 되는 효과를 구현할 수 있다는 것입니다. 이런 효과를 구현하는 데 사용될 수 있는 좋은 한 방법으로는, 페이지에 기본적으로 정해져 있는 글꼴 크기에 따라 모든 pixel 측정 단위를 대응하는 em 단위로 변환해 주는 방법이 있습니다. 간단한 예로, 기본 글꼴 크기를 다음과 같이 설정해 줄 수도 있을 겁니다:
body {font-size : 75%; ... }
body * { font-size : 1em;}여기에 사용된 글꼴 크기의 % 값은 페이지의 기본 글꼴 크기를 'medium(16px)', 'small(14px)' 그리고 'smallest(12px)'로 설정되어 있을 경우, 각각 100%, 87.5%, 75%로 설정될 수 있습니다.
그래서, pixel 측정 값인 Xpx을 em 측정 값인 Xem으로 변환하기 위해선, 기본 글꼴 크기에 따른 비율을 다음과 같이 곱해 주면 됩니다:
[uli]75%일 경우: Xem = 0.083333 * Xpx[/uli]
[uli]87.5%일 경우: Xem = 0.0715 * Xpx[/uli]
[uli]100%일 경우: Xem = 0.0625 * Xpx[/uli]
예를 들어, 만약 기본 글꼴 크기가 75%로 설정되어 있다면, margin : 10px;는 margin : 0.8333em;가 되겠지요. 참고로, 비율 값으로 사용될 숫자는 모든 브라우져들에서도 똑같은 측정 크기를 나타내게 하기 위해서 적어도 소수점 이하 네 자리의 값이 필요합니다.
script: 여기에 소개될 스크립트는 커서의 왼 쪽에 위치하는 숫자를 해당 em 단위 값으로 변환하고, 뒤에다가 em 글자를 추가해 주는 아주 간단한 기능을 가지고 있습니다. 세 가지의 스크립트가 있으며, 앞의 각기 다른 세 가지 비율 값을 제외하고는 모두 똑 같답니다:
설치는, 위의 스크립트들을 ~/Library/Application Support/BBEdit/Scripts 폴더로 복사한 후, BBEdit의 Window 메뉴에 있는 Palettes>Script를 선택하면 나타나는 창에서 원하는 스크립트를 선택하고, 'Set Key...' 단추를 눌러서 해당 스크립트를 위한 축약키(에:ctrl-E)를 설정해 놓습니다.
이렇게 하면, 예를 들어 BBEdit에서 width : 25[control]-E라고 입력하면 width : 2.0833em으로 자동적으로 변환이 되서 아주 유용하게 사용될 수 있답니다.
따옴 - Mac OS X Hints
