마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다.
pestcide.io 라는 툴 인데요.
CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다.
각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다.
(설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.)
적용 방법은 사이트에서 css를 다운받아서
<link rel=”stylesheet” href=”css/pesticide.css”> 이렇게 바로 <head>태그 안에 넣어주셔도 되고
크롬을 이용하시는 분들은 크롬 extension을 통해서 사용하실 수 있습니다.
아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요? 어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 더보기…
Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 더보기…
part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 더보기…
2개의 댓글
nigayo · 2014년 8월 20일 3:32 오후
extension을 설치했어요.
만세네요.
WIT - We are UIT · 2014년 7월 17일 9:46 오후
[…] 간단하게 HTML 페이지의 레이아웃을 확인하는 방법! […]