웹 브라우저 개발자 도구 [F12]

 주요 웹 브라우저에서 F12 키를 누르면 개발자 도구를 활성화 할 수 있다. 이것을 이용하여 웹 페이지를 디버그 하거나 테스트, 속도를 향상 시킬 수도 있다. 개발자 도구는 각각의 브라우저마다 조금씩 모습이 다르지만 기능은 비슷하다.

[개발자 도구 활용]

 Ctrl + 마우스 휠을 이용해 가장 많이 이용하는 배율로 (100% 혹은 110%) 맞추어 놓고 이 개발자 도구를 이용하면 블로그나 홈페이지를 제작할 때 필요한 타이틀 이미지 크기 혹은 비율 등을 알아낼 수 있다. 우측에 html로 표기되는 값들에 마우스를 가져다 대면, 좌측 화면에 자신이 마우스를 갖다 댄 부분이 푸르스름하게 표기되며 그 부분의 사이즈가 픽셀 단위로 표기된다.  

[픽셀 표기]

 이렇게 픽셀로 표기된 이미지 사이즈를 알아냈다면 포토샵이나 기타 이미지 편집프로그램을 이용해 이미지를 제작할 때 캔버스사이즈를 이에 맞춰 제작하면 된다.

[포토샵 캔버스 사이즈 조절]