웹페이지 편집을 하다보면 색상코드를 수정할 일이 많습니다. 웹페이지를 처음 제작할 때는 많이 사용하는 컬러코드는 CSS 스타일 페이지 상단에 붙여놓고 복사해서 사용하지만 이미 있는 웹페이지를 수정하려면 화면을 캡쳐하여 포토샵에서 컬러피커로 알아내거나 브라우저에 있는 개발자도구로 스타일시트를 찾아 알아내야하는데 참 번거롭습니다. 웹개발자들은 브라우저로 파이어폭스를 많이 사용하는데 여러가지 도구들이 아주 유용한 것이 많기 때문입니다. 모질라재단에서 개발되는 파이어폭스는 추가되는 프로그램을 애드온(Add-on)이라하여 개발자들이 무료로 배포하고 있는데 가장 많이 쓰이든 도구가 파일질라죠. 파일을 서버에 보내자면 FTP프로그램을 사용하는데 속도도 빠르고 많은 개발자들이 사용하는 도구중에 하나입니다.
이번글에서는 웹페이지의 컬러코드를 쉽게 알아내는 컬러질라 컬러피커의 사용법을 알아봅니다. 우선 이곳 을 클릭하여 컬러질라 홈페이지에서 화면 우측에서 다운을 받거나 아래의 파일을 다운받습니다. 파이어폭스에서 다운 받으면 바로 설치됩니다. 다른 브라우저를 사용해서 다운 받았을 경우 해당파일을 우클릭해서 연결프로그램을 파이어폭스로 연결하면 설치되고 파일을 파이어폭스 화면에 클릭드래그해도 설치됩니다.
파이어폭스용
ColorZilla_2.6.2.1.xpi구글 크롬용
https://chrome.google.com/webstore/search/colorzilla
설치가 되면 파이어폭스 우측에 아이콘이 만들어집니다. 1의 포토샵의 스포이드툴처럼 생긴 것을 클릭하거나 단축키로 Shift+ESC키를 누르면 2처럼 커서가 십자모양으로 전환 되고 웹페이지의 어느 요소에 놓으면 3처럼 빨간색 점선이 생깁니다. 웹페이지의 body 태그내에서만 나타나고 벗어나면 일반 커서로 전환됩니다. 마우스가 이동하면서 4처럼 컬러밸류, 컬러코드, 위치가 나타나고 5처럼 요소의 태그가 나타납니다. 클릭하면 6처럼 클립보드에 저장되었다고 나오고 7처럼 툴의 배경색상이 바뀝니다. 클립보드에 저장이 되었으니 원하는 곳에 Ctrl+V키를 누르면 색상코드가 복사됩니다. 색상코드는 기본적으로 #RRGGBB형태로 저장이 되고 다른 형태로 복사하려면 1의 우측에 있는 작은 세모를 클릭하면 8처럼 다양한 형태의 색상코드가 만들어져 있습니다. 기본적으로 저장되는 색상코드를 변경하려면 8의 하단에 있는 Options항목을 클릭하면 다음과 같이 4가지의 컬러코드 형태를 선택할 수 있습니다.
이프로그램은 포토샵과 같은 컬러피커도 제공하고 있습니다. 툴메뉴에서 Color Picker를 선택하면 다음과 같은 창이 나옵니다.
색을 선택하고 1의 Add to Favorites를 클릭하면 저장이 되고 2에 이름을 입력하면 구별하기 쉽습니다. 저장된 색상은 3의 팔레트를 선택하면 아래와 같이 다양한 팔레트가 있습니다. 4의 옵션을 클릭하면 컬러피커 타입이 나오고 5에서 화면처럼 부드럽게 나오게 하거나 사각형모양으로 분리된 형태로 나오게 할 수 있습니다.
1에서 Favorites를 선택하면 에 저장된 컬러를 볼 수 있고 2의 History는 그동안 저장한 컬러들이 모여있으며 3을 클릭하면 색상을 썸네일형태나 아래와 같이 리스트형태로 볼 수 있습니다. 위 사진에서 다른 컬러 팔레트는 웹페이지 작업시 많이 사용되는 컬러입니다.
List형태로 보여주는 팔레트입니다.
메뉴에서 CSS Gradient Generator를 선택하면 인터넷으로 홈페이지에 접속되고 위와같은 화면이 나옵니다. 그래디언트를 설정하고 CSS화면에서 원하는 부분을 선택해서 복사하면 됩니다.
메뉴에서 Webpage Dom Color Analyzer를 선택하면 위화면처럼 하단에 웹페이지에 나타나는 모든 색상을 하나의 팔레트에 나오게 할 수 있습니다.
메뉴에서 줌기능을 이용하면 확대해서 컬러의 세밀한 선택이 가능합니다. 원상복귀하려면 Ctrl+R키를 누르거나 새로고침버튼을 클릭합니다.
기타 자세한 내용은 메뉴에서 여러가지 옵션을 선택해서 확인해 보세요.
