내가 방금 발견 한 크롬 개발 도구에 내장 된 매우 유용한 도구가 있습니다. 이름도 모르고 Google에서도 찾을 수 없습니다. 픽셀 인스펙터 도구라고 할 수 있습니다.
사용 방법은 다음과 같습니다.
1a. 배경색으로 html 요소를 검사합니다.
1b. 요소의 배경색을 정의합니다.
- 색상 선택기를 클릭하십시오.
- 페이지의 요소 위로 마우스를 이동합니다 (개발 도구가 아님).
참조 : http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif
내 질문 :이 도구 이름은 무엇입니까? 쉽게 사용하는 방법? 대부분의 경우 색상은 신경 쓰지 않지만 아이콘의 픽셀을 검사하고 싶습니다. 이 도구의 단축키가 있습니까?
답변
스포이드를 여는 방법은 간단합니다.
- DevTools 열기 F12
- 요소 탭으로 이동
- 스타일 사이드 바에서 색상 미리보기 상자를 클릭하십시오.
주요 기능은 픽셀 색상 값을 클릭하여 검사하는 것이지만 새로운 기능을 사용하면 하단에있는 두 개의 화살표 아이콘을 클릭하여 페이지의 기존 색상 팔레트 또는 머티리얼 디자인 팔레트를 볼 수도 있습니다. 페이지를 디자인 할 때 매우 편리 할 수 있습니다.
답변
스포이드 도구라고합니다. 내가 아는 바로 가기 키가 없습니다. 지금 사용할 수있는 유일한 방법은 스타일 사이드 바에서 색상 선택기 상자를 클릭 한 다음 이미 수행 한 페이지를 클릭하는 것입니다.
답변
현재 스포이드 도구는 이전에 저에게 도움이되었지만 내 버전의 Chrome에서 작동하지 않습니다 (위에서 설명한대로). 최신 버전의 Chrome에서 업데이트되고 있다고 들었습니다.
하지만 Firefox에서는 쉽게 색상을 잡을 수 있습니다.
- Firefox에서 페이지 열기
- 햄버거 메뉴-> 웹 개발자-> 스포이드
- 스포이드 도구를 이미지 위로 드래그합니다 …을 클릭 합니다.
색상이 클립 보드에 복사되고 스포이드 도구가 사라집니다. - 색상 코드 붙여 넣기
스포이드 도구를 Chrome에서 사용할 수없는 경우이 방법을 사용하는 것이 좋습니다.
또한 액세스하기가 더 쉽습니다. 🙂
