EverGiver

구글 개발자 도구 본문

Front-End (웹)/HTML

구글 개발자 도구

친절한개발초보자 2021. 8. 29. 21:43
728x90
  • 구글 크롬이 설치가 되어 있어야 한다.
  • 단축키
    : F12 / ctrl + shift + i 

    cf) 단축키를 눌러도 안 되는 경우
        → 크롬 오른쪽 상단 : 버튼 눌러준 다음 도구 더보기에 마우스 올리고 개발자 도구 눌러주면 된다.
  • 개발자 도구 웹사이트와 분리시켜주는 기능
    1. 개발자 도구 실행해준 다음 다시 사이트 오른쪽 상단 톱니바퀴 모양 옆 : 버튼 클릭
    2. DOCK SIDE 부분에서 제일 왼쪽 창이 2개가 겹쳐져 있는 버튼 눌러주기
  • 개발자 도구 폰트 크기 조절하기
    - CTRL + +
    - CTRL + -
  • 우클릭 막힘 풀기
    1. 원하는 사이트에서 개발자 도구 실행해준 다음
    2. 오른쪽 상단 톱니바퀴 모양 클릭
    3. Settings에 Preferences에서 Debugger 부분으로 와서 Disable Javascript 체크
    → 웹사이트 마우스 우클릭이 막혀있는 사이트, 글자 클릭 드래그사 안되던 부분 해결 가능
  • favicon
    - html 파일 title 밑에 <link href="사진 파일명" rel="icon">
    - favicon은 보통 <head> 부분에 작성한다.
    - 내가 favicon을 다운로드하길 원하는 사이트가 있다면 개발자 도구를 열어준 다음 head 부분을 확인해서 <link rel="icon">이라는 부분이 나올 때 내용을 전부 지워준 다음 link부분을 나왔으면 href 부분으로 가서 마우스 우클릭 open in new tab 눌러서 다른 이름으로 저장한다.
  • 웹사이트 전체 사진을 갭쳐해주는 기능
    1. 원하는 사이트 접속 후 개발자 도구 열어준 다음
    2. ctrl + shift + p (window)
    3. 검색창 뜨면 capture full size screenshot 입력
  • html 파일 다운
    1. 원하는 웹사이트 가서 ctrl+s 눌러주기
    2. html 파일을 받아주면 폴더도 같이 생기는데 이 폴더 안에는 그 웹사이트에서 사용한 사진의 90%가량이 들어있다.
    cf) 개발자 도구 사용 시 브래킷 미리 보기 기능으로 html 파일 열지 말고 그냥 파일 더블클릭해서 열어주는 거 추천한다.
  • 개발자 도구 내에서 css 수정
    1. 개발자 도구 실행
    2. 내가 원하는 html태그를 선택
    3. 오른쪽 css부분에서 px값이 입력된 부분을 클릭해서 값을 수정 (웹사이트에서 수정된 부분을 바로바로 확인 가능)
       - 키보드에 있는 방향키를 위아래 한 번씩 누르거나 꾹 눌러주는 경우
          : 1px 단위로 미세하게 값 변경
       -  shift키를 누른 상태에서 방향키를 눌러주는 경우
          : 10px 단위로 값 변경
       - ctrl키를 누른 상태에서 방향키를 눌러주는 경우
          : 100px 단위로 값 변경

    ★ 주의할 점
        : 이 수정은 새로고침을 해주면 다시 원상태로 돌아오기 때문에 일시적인 것이다.
  • css 비활성화를 원할 경우 css 속성 왼쪽 체크박스 해제해주면 된다.
  • css 속성 추가를 원할 시 css 속성 작성된 부분 빈 공간 아무 곳이나 클릭해주면 새로운 css속성 작성할 수 있는 공간 생성된다.
  • 개발자 도구에서 html 태그 추가, 제거, 수정이 하고 싶다면 원하는 html 태그 선택 후 마우스 우클릭 edit as html 클릭하면 된다. (웬만하면 body에 마우스 우클릭 추천!)
  • 개발자 도구 오른쪽 하단 도형 그림 ★
    : 내가 선택한 태그의 가로세로 값, padding값, border값, margin값을 그림으로 보여주는 도형
     (대상 태그에 정확히 어떠 방향에 무슨 값이 얼마큼 들어가 있는지 직관적으로 확인이 가능하다)
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>구글 개발자 도구</title>
    <link href="android-icon-36x36.png" rel="icon">
    <style>
        *{margin:0;padding:0;}
        li{list-style:none;}
        
        li{width:149px;height:149px;
            margin:30px;background-color:#123456;
            background-image:url("1.png");}
        
        /*#c li:nth-child(1){background-color:orange;}
        
        #a{background-color:red;}
        .b{background-color:green;}*/
        
        li:nth-child(1){background-position:-19px -9px}
        li:nth-child(2){background-position:-188px -9px}
        li:nth-child(3){background-position:-356px -9px}
        
        li:nth-child(1):hover{background-position:-19px -179px;}
        li:nth-child(2):hover{background-position:-188px -179px;}
        li:nth-child(3):hover{background-position:-356px -179px;}
        
    </style>
</head>
<body>
    <ul id="c">
        <li id="a" class="b"></li>
        <li></li>
        <li></li>
    </ul> 
</body>
</html>​

개발자 도구

728x90
저작자표시

'Front-End (웹) > HTML' 카테고리의 다른 글

지도 사용법 (카카오 지도)  (0) 2021.09.04
지도 사용법 (네이버 지도)  (0) 2021.09.02
외부 폰트  (0) 2021.08.27
<dfn>, <time>, <wbr> 태그  (0) 2021.08.24
입력 양식  (0) 2021.08.24
'Front-End (웹)/HTML' Related Articles more
Comments