자바스크립트 개발자 포럼opacity를 컬러로 지정하는 이유
컬러는 일반적으로 #ffffff 6개의 글자를 갖습니다.
여기에 앞에 두 자리를 추가할 수 있는데 이 두자리가 투명정도를 뜻하는 opacity입니다.
다만 우리가 일반적으로 사용하는 opacity 0에서 1사이의 숫자를 입력하는 것이 아니라 그 값을 0~256값으로 변환하고 그 값을 16진수(hex)로 적어야합니다.
이렇게 컬러 값으로 지정하면 배경색만 투명으로 할때 유용합니다. button의 배경색을 반투명으로 하고 button title은 투명으로 하고 싶지 않을 경우 이렇게 하면 편리합니다. 이런식으로 지정하지 않을 경우 따로 투명 배경을 위한 view를 따로 만들어서 button 뒤에 놓아야하니 번거롭습니다.
hex 계산 방법
이 계산이 상당히 귀찮은데요 그래서 맥용 alfred workflow로 만들었습니다. alfred workflow는 유료 alfred에서만 사용 가능합니다.
현재 연결한 명령 키워드는 opacityashex 이며 이는 변경가능합니다.
alfred 명령어 창에서 opacityashex 를 이력하고 한칸 띄고 opacity 값을 입력합니다. (0~1 사이의 값)
그리고 엔터를 치면 클립보드에 해당 hex값이 복사됩니다.
설치
다음 파일을 압축풀고 더블클릭하면 alfred에 설치됩니다.
hexOpacityColor.alfredworkflow.zip (1.4 MB)
계산 코드
계산식에 사용한 코드는 아래와 같습니다.
// Thanks, Jared Rummler : http://stackoverflow.com/a/27813407
var i = Math.round(query * 100) / 100;
var alpha = Math.round(i * 255);
var hex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
// var perc = Math.round(i * 100);