반응형
[Visual Inspector] 디자이너를 위한 툴 비주얼 인스펙터 (Visual Inspector)
크롬을 쓰다보면 필요한 프로그램을 크롬에 직접 설치하여 쓰는 경우가 많은데,
이러한 확장 프로그램들을 쓰다보면 용량만 차지하고 쓰지는 않는 프로그램들이 있는 반면에,
편리하게 실무에서 자주 쓰게 되는 확장 프로그램들이 생기기 마련입니다.
비주얼 인스펙터 (Visual Inspector)가 바로 그런 프로그램인데요,
비주얼 인스펙터는 디자인 분석 툴로 웹 사이트에 적용된 위치, 불투명도, 색상, 그라디언트, 타이포 그래피 등의
구성요소를 빠르고 간편하게 확인할 수 있는 아주 편리한 툴입니다.
소개글로 디자이너가 디자인을 위해 제작되었다고 해도 과언이 아닌데요.
먼저 크롬에서 아래 URL로 접속하여 해당 확장 프로그램을 다운로드, 설치해줍니다.
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=ko
설치가 완료되면 우측에 하늘색 눈 모양의 작은 아이콘이 생기는데,
네이버로 들어가서 해당 창을 열어보도록 하겠습니다.
창을 열고 네이버 로고를 클릭하니, 해당 위치가 한 눈에 보기 쉽게 표시가 되는데요,
(창 외의 부분은 프로그램 내에서 어두워지는 게 아니라 보기 편하게끔 제가 임의로 처리하였습니다.)
이런 식으로 위치가 확인이 가능할 뿐만아니라 각 탭에서
해당 페이지에 대한 정보를 손 쉽게 확인할 수 있고 또 변형하는 것도 가능합니다.
(변형을 한다해서 해당 페이지에 실질적으로 영향을 주지는 않습니다.)
색상 코드 확인은 물론 폰트 관련 정보도 손쉽게 알 수 있어 페이지를 서치할 때 큰 도움이 됩니다.
또한 페이지에 쓰이고 있는 이미지도 Export 버튼으로 손쉽게 다운로드도 가능합니다.
반응형
'[공부]하는 몽씨 > bookmark' 카테고리의 다른 글
| [user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기 (0) | 2018.02.09 |
|---|---|
| [tinypng/optimizilla] png 파일 용량 줄여주는 사이트 (0) | 2017.06.12 |
반응형
[Tip] 크롬에서 현재 창 닫기 (window.close)
기획 사항 중에 버튼을 클릭시 보고 있는 창(현재 창)을 닫게 해달라는 요청으로
자바스크립트의 window.close를 쓰면 되겠다고 생각하고 진행을 하던 중, 크롬에서 해당 소스가 먹히지 않는 상황이있었습니다.
왜 안 되지 하고 삽질을 하던 중, 이 이슈가 생각보다 오래 전부터 있었던 이슈라는 것도 발견하게 되었습니다.
(글 올려진 때가 2013년이면 .... 지금이 2020년이니까 7년 전이네요. 이런 뒷북이.. )
올려진 답안지를 해보다가 안 된다면서 다른 예제를 찾으러 돌아다니고 괜한 삽질하다보니 다행히도 해결방안을 찾게 됐는데요.
너무 단순해서 허무할 정도였네요. 그래도 해결 됐으니 다행!
<a href="javascript:close();">창 닫기</a>
<script>
function close()
{
window.open('','_self').close();
}
</script>
* 참고사이트
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [Tip] checkbox 초기화하기 (0) | 2020.10.19 |
|---|---|
| [Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기 (0) | 2020.04.03 |
| [Tip] 워드프레스 관련 메모2 (0) | 2020.03.18 |
| [Tip] 워드프레스 관련 메모 (0) | 2020.03.17 |
| [Tip] 세팅된 magnific popup에 추가 작업하기 (0) | 2020.03.17 |
