TechMaster/Google(130)
-
Visual Inspector(비주얼 인스펙터)
Visual Inspector(비주얼 인스펙터) 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있으며 웹디자인에 필요한 대부분 요소를 확인하고 임시로 수정해 볼 수 있습니다. https://www.canvasflip.com/visual-inspector/ [Chrome에 추가] https://bit.ly/2wRyXjm [확장앱 추가] 설치 완료!!!
-
Page Ruler(페이지 룰러)
Page Ruler(페이지 룰러) · 웹 페이지의 포함된 요소들을 측정할 수 있는 도구입니다.· 페이지 상단에 조작 컨트롤과 판독 표시줄이 추가되며 선택 영역과 가이드라인(옵션)을 제공한다. 컨트롤 막대를 사용하여 선택 영역의 가장자리를 옮길 수 있으며 요소 모드(element mode)에서는 개별 페이지 요소와 각 요소의 하위 또는 상위 요소가 자동으로 선택되므로 특정 구성 요소를 빠르게 측정할 수 있습니다. https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn [+ CHROME에 추가] [확장앱 추가] 상단 주소표시줄에 Page Ruler 아이콘이 생성됩니다. Page Ruler 아이콘을 클릭하면 페이..
-
크롬 개발자 도구를 통한 반응형 웹 테스트
크롬 개발자 도구를 통한 반응형 웹 테스트개발자 도구에서 [Toggle device toolbar] 아이콘을 클릭하면좌측에 각종 디바이스를 선택할 수 화면이 오픈됩니다. 상단의 드롭다운 항목을 클릭하면 주로 사용하는 디바이스 목록을 생성한 후 변경할 수 있습니다. 디바이스 목록하단의 [Edit…]항목을 클릭하면 오른쪽에 설정 화면이 나타닙니다. 기존 목록에서 디바이스를 선택할 수 있습니다. 또는 상단의 [Add custom device…]버튼을 클릭하여 원하는 디바이스를 등록 후 사용할 수 있습니다.
-
Chrome(크롬) - 영상/음원 자동재생 활성화하기
Chrome(크롬) - 영상/음원 자동재생 활성화하기크롬 브라우저의 업데이트에 따라 웹페이지에 삽입된 영상 및 음원 등의 자동재생이 중단되어 설정을 통해 자동재생되도록 설정을 해주어야 합니다. 크롬 브라우저의 URL에 아래와 같이 입력하여 설정 페이지로 이동합니다.chrome://flags/#autoplay-policy "Autoplay Policy" 항목에서 [Default] 를 [Not user gesture is required] 로 변경합니다. 하단의 [RELAUNCH NOW] 클릭하면 모든 크롬 브라우저 창이 닫힌 후 다시 오픈됩니다.다시 시작한 후에는 페이지를 접속하면 자동으로 재생이 됩니다.
-
CSSViewer(CSS뷰어)
CSSViewer(CSS뷰어) 마우스가 위치한 영역의 ID와 글꼴, 텍스트, 색, 배경, 상자, 위치 및 효과 특성에 대한 상세한 정보를 보여주는 도구입니다. https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce [+ CHROME에 추가] [확장앱 추가] 상단의 주소표시줄 오른쪽에 추가한 확장 프로그램 아이콘을 확인할 수 있습니다. CSSViewer 아이콘을 클릭 한후 마우스 포인터를 페이지의 요소에 가져가면 상세한 정보를 보여줍니다.
-
Window Resizer(윈도우 리사이저)
Window Resizer(윈도우 리사이저)반응형 웹 개발시 브라우저 창 크기를 즉석에서 조절할 수 있습니다. https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh [+ CHROME에 추가] [확장앱 추가] 상단의 주소표시줄 오른쪽에 추가한 확장 프로그램 아이콘을 확인할 수 있습니다. 아이콘을 클릭하면 변경할 수 있는 항목이 표시됩니다. 현재 사이즈는 우측 하단에서 확인할 수 있습니다.