프론트 개발을 더 편리하게 도와주는 크롬 플러그인 : CSSViewer

웹을 접할 때 가장 먼저 공부하게 되는 HTML과 CSS이지만

언제나 공부를 하면 할수록 그리고 자신이 원하는 형태로 바꾸거나 수정하려고 하는 것은 언제나 어렵죠

다른 공부도 마찬가지지만 HTML과 CSS는 정말 끝이란 게 없는 것 같아요 

 

그래서 HTML과 CSS를 사용하기 쉽게 그리고 많은 시간을 소모하지 않도록

부트스트랩과 시맨틱UI가 있지만 이미 만들어진 것을 각자의 필요에 맞게 바꿔나가는 게 쉽지만은 않죠

 

 

네이버의 웹사이트의 HTML 한 부분

위처럼 다른 잘 만든 웹페이지를 참고하기 위해 개발자 도구를 열어보는 것도 방법이지만

직접 만든 코드도 아니고 CSS는 직접적으로 노출되어있지 않고 class로 사용되기 때문에 알 수가 없죠

 

이를 위해서 크롬에서 여러분들의 HTML과 CSS를 구성하는데 도움을 줄 수 있는 플러그인을 제공하고 있어요

 

CSSViewer

 

플러그인 확장하고 나서  주소창 옆에 메모지 같은 아이콘을 클릭해주면 활성화가 돼요

 

활성화되면 웹페이지 아무 곳에 갖다 대면 빨간 테두리 부분의 CSS 코드가 어떻게 구성되어있는지 볼 수 있어요