웹솔루션개발 25년 노하우! 해피CGI의 모든것

사이트에 대한 텍스트와 이미지정보를 자세하게 알려주는 크롬 확장프로그램입니다. 설치를 하면 브라우저 상단에 peeper아이콘이 생깁니다. 이제 확인하고 싶은 사이트에 이동하여 아이콘을 누르면 아래와같이 별도의 창이 뜨고 사이트에 대한 기본정보가 먼저 노출이 됩니다. . 이제 확인하고 싶은 요소를 브라우저에서 클릭하면 별도의 창에서 폰트 및 이미지에 대한 정보가 노출이 됩니다. 크롬 뿐많이 아닌 웨일브라우저에서도 설치가 잘되니 참고하세요 ^^ ​​

크롬브라우저에서 설치만으로 간단하게 유튜브 광고를 제거할 수 있는 확장프로그램입니다. 크롬 웹스토에서 'adblock' 검색 후, 가장 상단의 '유튜브용 애드 블록' 프로그램을 설치하시면 됩니다. 설치하면 위 이미지처럼 빨간색 아이콘이 생깁니다. 혹시 광고를 봐야하는 경우에는 해당 아이콘을 누르고 비활성화를 해주면 광고를 보실 수 있습니다. ^^ ​ ​ ​

크롬 확장프로그램으로 구현된 Full Page Screen Capture 입니다. 크롬으로 웹페이지 접속후 해당 페이지의 전체 스크린샷이 필요 할 경우 유용하게 이용이 가능 합니다. 스크린샷된 화면은 PDF 파일이나 PNG 이미지 파일로 저장이 가능 하며, 저장전에 편집을 할 수도 있습니다. 크롬 브라우저를 통해 아래 링크로 접속시 즉시 추가 가능 합니다. https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?utm_source=chrome-ntp-icon 추가버튼을 클릭해서 Install 이 완료 되는 경우 주소창 옆에 아래와 같이 스크린샷 아이콘이 추가 됩니다. 스크린샷이 필요..

[F12]를 누르면 나오면 개발자도구는 무척 유용합니다. 개발자도구는 웹페이지의 구성요소를 확인할 수 있고 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있습니다. 그러나 개발자도구는 css의 컬러값이 몇개가 사용되고 몇개의 이미지가 사용되는지 바로 확인할 수가 없습니다. 이러한 문제를 해결해줄수 있는 프로그램이 크롬의 확장 프로그램인 비주얼 인스펙터입니다. 팝업에서 구성요소 중 하나를 클릭하면 어떤 요소인지 알려주며 직접 수정도 할 수 있습니다. 색상은 물론 위치와 사이즈도 변경할 수 있습니다. 또한 이렇게 고쳐본 결과물을 이미지 파일로 받을 수도 있습니다.

크롬 브라우저에서 인풋에 포커스를 했을때 파란색 테두리 부분의 디자인 변경법입니다. input[type=text], textarea { @include transition(all 0.30s ease-in-out); outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, textarea:focus { @include box-shadow(0 0 35px rgba(0, 0, 0, 1)); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } ..