Please Enable JavaScript!
Gon[ Enable JavaScript ]

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

인터넷/구글 크롬
반응형

크롬 개발자 도구를 사용하면 HTML 로 디자인된 웹 페이지의 색상값을 바로 알아낼 수 있습니다. 개발자 도구에서 적용한 CSS 값을 확인할 수 있기 때문입니다. 그럼 이미지의 색상값은 어떻게 알 수 있을까요? 이미 디자인이 완료된 이미지는 HTML 코드에서 알 수 없습니다. 그렇다고 방법이 없는 것은 아닙니다. 다른 디자인 툴처럼 개발자 도구에도 컬러 피커(Color Picker) 를 제공합니다. 이미지에 컬러 피커를 클릭하면 바로 색상값을 알아 낼 수 있습니다. 이렇게 다양한 기능들을 제공함으로써 다른 디자인 툴의 도움없이 개발자 도구로도 충분히 웹 페이지 분석이 가능합니다.

 

 

웹 페이지에 적용한 CSS 색상값 확인하기

 

먼저 웹 페이지에 적용된 색상값을 찾는 기본적인 사용법을 알아보겠습니다. F12 단축키를 눌러 개발자 도구 창을 띄웁니다. 그리고 Elements 탭으로 이동합니다.

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

웹 페이지의 특정 위치에 HTML 소스를 바로 찾기 위해서 왼쪽 끝에 있는 화살표 아이콘을 클릭합니다. 아이콘이 파란색으로 바뀌면 활성화가 된 것입니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

웹 페이지로 가서 색상값을 알고 싶은 위치의 디자인에 마우스를 가져갑니다. 화면에는 간략한 디자인 정보들이 나타납니다. 적용된 색상의 해시코드값과 폰트 종류, 버튼의 크기 등 많은 정보를 한 눈에 확인할 수 있습니다. 좀 더 상세한 정보를 위해 위치한 영역을 클릭합니다.

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

브라우저 아래 개발자 도구에서 클릭한 위치의 HTML 디자인을 보여줍니다. 적용된 색상은 오른쪽 Styles 탭에서 확인할 수 있습니다. 색상을 표시한 정사각형 아이콘을 클릭해서 색상 팔레트를 띄웁니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

화면에 나타난 팔레트에서 색깔을 변경해 보세요. 기존에 적용된 웹 페이지의 색상이 바뀔 겁니다. 이것은 주로 웹 페이지 개발자 들이 소스를 수정하지 않고 적당한 색상값을 찾고 싶을 때 많이 활용하는 기능입니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법
스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기
스타일 시트 CSS 여러 태그에 스타일 특정 태그에 적용하는 방법
스타일 시트 CSS 브라우저 위치를 지정하는 left, right, top, bottom
타일 시트 CSS 값을 표현하는 절대단위 상대단위 알아보기



 

 

 

이미지의 색상 알아내기

 

 

다음은 웹 페이지에 적용된 CSS 색상값이 아닌 이미지에 적용된 색상값이 무엇인지 알아보겠습니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

개발자 도구의 Styles 탭으로 이동해서 CSS 컬러 값이 있는 사각형 아이콘을 클릭합니다. 어떤 것이든 상관없습니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

다음은 컬러 팔레트에서 스포일러 모양의 아이콘을 클릭합니다. 아이콘 색상이 회색에서 파란색으로 바뀌면 선택된 상태입니다. 마우스를 웹 페이지의 이미지가 있는 곳으로 가져갑니다. 화면에는 잘 보이지 않지만 마우스 아이콘이 격자 모양의 둥그런 원 형태로 바뀌어 있을 겁니다. 이것을 추출하고 싶은 색상의 위치로 가져가서 클릭합니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

팔레트에는 컬러 피커로 클릭한 색상과 동일한 값이 나타납니다. 이런 식으로 이미지의 색상도 바로 알아낼 수 있습니다

크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법
스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기
스타일 시트 CSS 여러 태그에 스타일 특정 태그에 적용하는 방법
스타일 시트 CSS 브라우저 위치를 지정하는 left, right, top, bottom
타일 시트 CSS 값을 표현하는 절대단위 상대단위 알아보기
반응형
Posted by 녹두장군1
,