크롬 개발자도구 알면 편한 유용한 기능

크롬에서 개발자 도구를 사용하면 간단하게 css를 수정해 디자인을 변경해 볼 수 있는데요.

그런데 더 간단히 코드를 치치 않고도 아이콘만 눌러서 간편하게 세팅할 수 있는 것들이 있어 정리해 보았습니다.

우선 오른쪽 하단에 보이는 점 세개 아이콘에 마우스를 올려보면

오른쪽 하단 아이콘을 클릭

이렇게 4개의 아이콘이 나타납니다.

4개의 아이콘이 보인다

왼쪽 아이콘부터

taxt-shadow : 텍스트 그림자

box-shadow : 박스 그림자

color : 텍스트 컬러

background-color : 백그라운드 컬러

하나하나 눌러보면 코드가 자동으로 입력되고 세부 설정을 할 수 있습니다.

 

1) taxt-shadow : 텍스트 그림자

text-shadow 설정

2) box-shadow : 박스 그림자

box-shadow 설정

3) color : 텍스트 컬러

color 설정

4) background-color : 백그라운드 컬러

background-color 설정

이렇게 마우스로 간편하게 설정이 가능해서 빠른 작업을 하는데 도움을 줍니다. 작게나마 도움이 되었으면 좋겠습니다.