크롬 개발자 도구를 사용하면 HTML 로 디자인된 웹 페이지의 색상값을 바로 알아낼 수 있습니다. 개발자 도구에서 적용한 CSS 값을 확인할 수 있기 때문입니다. 그럼 이미지의 색상값은 어떻게 알 수 있을까요? 이미 디자인이 완료된 이미지는 HTML 코드에서 알 수 없습니다. 그렇다고 방법이 없는 것은 아닙니다. 다른 디자인 툴처럼 개발자 도구에도 컬러 피커(Color Picker) 를 제공합니다. 이미지에 컬러 피커를 클릭하면 바로 색상값을 알아 낼 수 있습니다. 이렇게 다양한 기능들을 제공함으로써 다른 디자인 툴의 도움없이 개발자 도구로도 충분히 웹 페이지 분석이 가능합니다.
| ◎ 웹 페이지에 적용한 CSS 색상값 확인하기 |
▼ 먼저 웹 페이지에 적용된 색상값을 찾는 기본적인 사용법을 알아보겠습니다. F12 단축키를 눌러 개발자 도구 창을 띄웁니다. 그리고 Elements 탭으로 이동합니다.
▼ 웹 페이지의 특정 위치에 HTML 소스를 바로 찾기 위해서 왼쪽 끝에 있는 화살표 아이콘을 클릭합니다. 아이콘이 파란색으로 바뀌면 활성화가 된 것입니다.
▼ 웹 페이지로 가서 색상값을 알고 싶은 위치의 디자인에 마우스를 가져갑니다. 화면에는 간략한 디자인 정보들이 나타납니다. 적용된 색상의 해시코드값과 폰트 종류, 버튼의 크기 등 많은 정보를 한 눈에 확인할 수 있습니다. 좀 더 상세한 정보를 위해 위치한 영역을 클릭합니다.
▼ 브라우저 아래 개발자 도구에서 클릭한 위치의 HTML 디자인을 보여줍니다. 적용된 색상은 오른쪽 Styles 탭에서 확인할 수 있습니다. 색상을 표시한 정사각형 아이콘을 클릭해서 색상 팔레트를 띄웁니다.
▼ 화면에 나타난 팔레트에서 색깔을 변경해 보세요. 기존에 적용된 웹 페이지의 색상이 바뀔 겁니다. 이것은 주로 웹 페이지 개발자 들이 소스를 수정하지 않고 적당한 색상값을 찾고 싶을 때 많이 활용하는 기능입니다.
| ◎ 이미지의 색상 알아내기 |
▼ 다음은 웹 페이지에 적용된 CSS 색상값이 아닌 이미지에 적용된 색상값이 무엇인지 알아보겠습니다.
▼ 개발자 도구의 Styles 탭으로 이동해서 CSS 컬러 값이 있는 사각형 아이콘을 클릭합니다. 어떤 것이든 상관없습니다.
▼ 다음은 컬러 팔레트에서 스포일러 모양의 아이콘을 클릭합니다. 아이콘 색상이 회색에서 파란색으로 바뀌면 선택된 상태입니다. 마우스를 웹 페이지의 이미지가 있는 곳으로 가져갑니다. 화면에는 잘 보이지 않지만 마우스 아이콘이 격자 모양의 둥그런 원 형태로 바뀌어 있을 겁니다. 이것을 추출하고 싶은 색상의 위치로 가져가서 클릭합니다.
▼ 팔레트에는 컬러 피커로 클릭한 색상과 동일한 값이 나타납니다. 이런 식으로 이미지의 색상도 바로 알아낼 수 있습니다.
'인터넷 > 구글 크롬' 카테고리의 다른 글
| 구글 크롬 개발자 도구 이용해서 Javascript 메모리 관리하는 방법 (2) | 2024.01.28 |
|---|---|
| 구글 지메일 예약 발송 설정하기 (1) | 2024.01.04 |
| 구글 지메일(Gmail) 전체 삭제하기 (3) | 2023.12.24 |
| 크롬 Chrome 사이트 비밀번호 저장 기능 다시 사용하는 방법 (7) | 2023.12.23 |
| 구글 드라이브 파일, 이미지 미리보기와 다운로드 하는 방법 (0) | 2023.12.18 |
| 크롬 화면 확대, 글꼴 크기 조절하는 방법과 단축키 (2) | 2023.12.08 |
| 크롬 Chrome 단축키 주소창 이동하는 방법 (0) | 2023.12.06 |
| 구글 계정 찾기, 다양한 방법으로 계정 찾거나 로그인하기 (10) | 2023.12.03 |
