간단하게 HTML 페이지의 레이아웃을 확인하는 방법!

마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다.

pestcide.io 라는 툴 인데요.

CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다.

각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다.

(설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.)

적용 방법은 사이트에서 css를 다운받아서

크롬을 이용하시는 분들은 크롬 extension을 통해서 사용하실 수 있습니다.

진정한 경제적 시간적 자유를 위하여~