이 가이드는 크롬 개발자 도구 색상 코드 확인 및 HTML 및 CSS 값을 변경하여 변경된 색상이 적용된 사이트를 미리 볼 수 있는 방법에 대해 설명합니다.
크롬 개발자 도구는 Google Chrome 브라우저에 내장된 웹 개발자 도구 세트입니다.
개발자 도구를 사용하면 페이지를 즉석에서 편집하고 문제를 신속하게 진단할 수 있으므로 웹 사이트를 빠르게 구축할 수 있습니다.
예를 들어 특정 웹 사이트 및 이미지에 대한 색상 코드를 쉽게 확인할 수 있습니다.
또한 사이트에 적용된 HTML 및 CSS 값을 임의로 변경하여 브라우저에서 모든 페이지를 미리 보고 변경할 수 있습니다.
크롬 개발자 도구 색상 코드 확인 및 HTML, CSS 값 변경 미리 보기
개발자 도구 색상 선택기(Color Picker) 도구를 사용하여 웹 사이트 및 이미지의 색상 코드를 확인하거나 사이트에 적용된 색상을 임의로 조작할 수 있는 방법을 살펴보겠습니다.
01 사이트 및 이미지 색상 코드 확인
크롬 브라우저에서 웹 사이트 접속 후 F12 단축키를 눌러 개발자 도구를 실행합니다.
개발자 도구 패널이 열리면 [요소] 탭으로 이동 후 [검사할 요소 페이지 선택]을 선택합니다.
이제 웹 페이지로 이동하여 색상 코드를 확인하려는 위치에 마우스를 올려 놓으면 적용된 폰트, 색상 등 다양한 정보를 확인하실 수 있습니다.
다음은 웹 페이지에 적용된 CSS 색상 값이 아닌 이미지 색상 코드를 확인하는 방법입니다.
개발자 도구에서 [스타일] 탭으로 이동하여 CSS 색상 값이 있는 미리 보기 사각형 아이콘을 클릭합니다.
색상 선택 도구 요소(Color Picker) 상자가 열리고 ‘스포이드’ 도구를 선택하면 마우스 커서가 둥근 격자 모양으로 변경됩니다.
이제 색상을 추출하려는 이미지에 마우스를 이동하여 클릭하면 색상 선택 도구 요소에 16진수 색상 코드 값을 확인하실 수 있습니다.
스포이드 도구는 다른 웹 페이지에서 UI 기능을 복제하거나 단순히 특정 기능을 다시 빌드 하려는 경우 매우 유용하게 활용할 수 있습니다.
만약 해당 색상의 16진수 코드가 아닌 다른 형식으로 전환하고 싶다면 [색상 형식 변경]를 클릭하여 원하는 형식으로 변경하실 수 있습니다.
응용 프로그램에서 특정 색상 모드로 작업하고 다른 형식으로 전환할 때 유용하게 사용할 수 있습니다.
02 사이트 CSS 값 수정 미리 보기
색상 선택 도구 요소를 사용하여 사이트의 색상을 변경하고 미리 보는 방법에 대해 살펴보겠습니다.
웹 페이지에서 다른 색상을 적용하기 앞서 개발자 도구에서 임시로 기존 색상을 원하는 색상으로 변경하여 미리 확인할 수 있습니다.
개발자 도구를 열고 웹 페이지에서 색상을 변경하려는 요소를 선택하고 [스타일] 탭으로 이동합니다.
스타일 탭에서 색상 값이 있는 미리 보기 사각형 아이콘을 클릭합니다.
색상 선택 도구 요소(Color Picker) 상자에서 원하는 색상으로 변경합니다.
기존에 적용된 웹 페이지의 색상이 사용자가 선택한 색상으로 변경되는 것을 확인할 수 있습니다.
웹 페이지 소스를 수정하지 않고 결과물을 미리 확인할 수 있으므로, 유용하게 사용할 수 있습니다.
예를 들어 운영 중인 블로그 개편을 위해 일부 구성 요소들의 색상을 변경하고 싶을 때 스타일 탭에서 색상 선택 도구 요소를 활용하여 변경하려는 색상을 모두 변경합니다.
원본 파일을 수정하지 않고도 원하는 색상 코드가 전체 분위기에 조화롭게 어울리는지 확인할 수 있으므로 작업 중 실수를 최대한 줄일 수 있습니다.
마치며
구글 크롬 브라우저의 개발자 도구로 색상 선택 도구 요소(Color Picker)를 사용하여 사이트의 색상 코드를 확인하거나, HTML 및 CSS 값을 임의로 변경하여 변경된 색상을 적용, 미리 보기 할 수 있는 방법을 살펴 보았습니다.
개발자 도구 및 색상 선택 도구는 Google Chrome 브라우저만 국한되지 않고 Whale, Edge, Brave 등 Chromium 기반 웹 브라우저에서 모두 사용할 수 있습니다.
