마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다.
 
pestcide.io 라는 툴 인데요.
 
CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다.
각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다.
(설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.)
 
적용 방법은 사이트에서 css를 다운받아서
 
<link rel=”stylesheet” href=”css/pesticide.css”> 이렇게 바로 <head>태그 안에 넣어주셔도 되고
 
크롬을 이용하시는 분들은 크롬 extension을 통해서 사용하실 수 있습니다.
 
demo2

카테고리: Research

2개의 댓글

nigayo · 2014년 8월 20일 3:32 오후

extension을 설치했어요.
만세네요.

WIT - We are UIT · 2014년 7월 17일 9:46 오후

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

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다