'크롬 개발자도구 스타일 편집 팁'에 해당되는 글 1건

안녕하세요. 제임스 입니다. 

앞서 개발자도구를 이용한 스타일 편집에 대한 간략한 내용 설명 했었는데요. 

이번에는 스타일 편집 시 Color 값을 변경 하는 팁에 대해 알려 드리겠습니다. 

Color Format 을 변경하는 방법에 대해 먼저 알아 보겠습니다. 

원하는 요소를 선택 시 Syle 창에 위와 같이 color 값이 표기 됩니다. 

개발 시 어떤 color format 을 사용했느냐에 따라 표기 방식이 달라지는데요. 위 예제의 경우 Hex Color Code 를 사용 하여 색상을 표기하고 있습니다. 

첫번째 이미지의 색상표기 박스(정식 명칭은 Color Picker 입니다)를 키보드의 shift 키를 누른채 마우스 좌클릭 시 Color Format 이 변경되는데, 위와 같이 RGB Color Format 을 사용하여 표기 할 수 있습니다. 

또는 HSL Color Format 을 사용할 수도 있습니다. 

위와 같은 방법을 이용하여 좀더 편한 Color Format 을 이용하여 색상을 변경 적용 해볼수 있습니다. 

Color Picker 를 이용하여 원하는 색상 직접 선택 가능합니다. 즉, 색상 코드 표를 찾을 필요 없이 원하는 색상에 가까운 색을 직접 보고 찾을 수 있습니다. 

Color Picker 를 클릭 시 위와 같이 색상값을 선택 할 수 있는 팝업이 올라 오게 됩니다. 

거의 대부분 어떤 용도로 사용 하는지 유추가 가능하니 몇가지만 설명 드리겠습니다. 

1. Eyedropper 버튼을 클릭하여 Eyedropper 를 활성화 합니다. 현재 페이지 화면상으로 마우스를 이동하여 원하는 부위를 지정하고 마우스 클릭 시 붉은 색으로 표시된 지점의 색상값으로 설정이 됩니다. 

2. 현재 색상 값을 HEX, RGBA 또는 HSL 방식으로 표기 해주며 우측 화살표를 클릭 시 Color Format 을 변경 가능합니다. 

3. 현재 선택 된 색상을 시각적으로 표현한 부분입니다. 

이 Color Picker 를 이용하여 간편하게 원하는 색상을 지정해 볼 수 있습니다. 

개발자 도구를 이용한 색상 변경하기 정말 쉽죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D