개발 초보 꿀팁! 개발자 도구 F12 사용법!

개발자 도구란?

코드를 요렇게 바꾸면? 이 홈페이지의 모양이 요렇게 바뀌겠구나, 속도가 빨라지겠구나, 버그가 고쳐지겠구나 뭐 이런 것들을 테스트해볼 수 있는 도구입니다.

 

 

 

개발자 도구 사용법!

개발자 도구 실행법

F12 키를 누릅니다.

 

창모드로 변환하는 법

우측 상단의 점 세개를 누른 후, 창 두 개가 겹쳐져 있는 모양의 아이콘을 누릅니다.

개발자 도구 창모드 전환법

 

한국어로 언어 변경하는 법

← 우측 상단의 설정 아이콘을 클릭한 후, 

개발자 도구 언어 설정 메뉴

Preferences - Language에서 Korea - 한국어로 변경해줍니다.

개발자 도구를 한 번 닫은 후 다시 F12를 눌러 개발자 도구를 실행하면 변경된 언어가 적용됩니다.

 

 

 

개발자 도구 사용 예시!

좌측 상단의 화살표 모양 아이콘을 누른 다음, 아이콘이 파란 색으로 변한 상태에서,

홈페이지의 변경하고 싶은 부분에 마우스를 대면,

그 부분이 어떤 타이틀인지, 크기는 어떤지, 컬러와 폰트 등의 정보가 나오며,

클릭하면,

개발자 도구 화면

그 부분이 어느 클래스에 있는지 보여지고, 어느 파일의 어느 부분에 대한 어떤 속성이 적용되었길래 저렇게 보이는지 알 수가 있다. 참고로 저기서 취소선 되어있는 것은 오류나 어떤 이유에 의해 적용되지 않은 속성이다.

하나씩 속성을 지워가보고(체크표시를 클릭하여 지울 수 있다!), 수치를 변경해보며 개발할 수 있다.

밑줄 친 style.css.... 부분을 클릭하면 저 속성들이 style.css... 파일의 몇 번째 줄에 있는지도 알 수 있다.

 

개발자 도구 없이 코딩했을 때는 어떻게 했는지 참 ㅎㅎ