브라우저별 개발자 도구 실행법

1. 크롬(Chrome)

    1) 크롬 브라우저를 켜고, 오른쪽 상단 [...] 아이콘을 클릭합니다.

    2) [도구 더보기] > [개발자 도구]를 선택합니다.

    3) 개발자 도구창 오른쪽 끝에 있는 [...] 아이콘을 클릭하고, 개발자 도구창 위치를 변경할 수 있습니다.

    4) Elements 탭을 선택하면 현재 웹페이지의 HTML 소스코드를 볼 수 있습니다.

    5) 개발자 도구창 왼쪽 끝에 있는 화살표가 있는 아이콘을 선택해서 웹페이지 화면으로 커서를 이동하면 선택한 요소가 표시됩니다.

---

2. 인터넷 익스플로러(Internet Explorer)

    1) 인터넷 익스플로러 브라우저를 켜고, 오른쪽 상단 도구 아이콘을 클릭합니다.

    2) [F12 개발자 도구]를 선택합니다.

    3) DOM 탐색기 탭을 선택하면 현재 웹페이지의 HTML 소스코드를 볼 수 있습니다.

    4) 개발자 도구창 왼쪽 끝에 있는 화살표가 있는 아이콘을 선택해서 웹페이지 화면으로 커서를 이동하면 선택한 요소가 표시됩니다.

---

3. 사파리(Safari)

    1) 사파리 브라우저를 켜고, 왼쪽 [Safari] > [환경설정]을 클릭합니다.

    2) 환경설정에서 [고급] > [메뉴 막대에서 개발자용 메뉴 보기]를 선택합니다.

    3) 브라우저 상단에 [개발자용] > [웹 속성 연결]을 클릭합니다.

    4) 왼쪽 두 번째 아이콘을 선택하면 개발자 도구창 위치를 변경할 수 있습니다.

    5) 요소 탭을 선택하면 현재 웹페이지의 HTML 소스코드를 볼 수 있습니다.

    6) 개발자 도구창 오른쪽에 있는 아이콘을 선택해서 웹페이지 화면으로 커서를 이동하면 선택한 요소가 표시됩니다.

---

4. 파이어폭스(Firefox)

    1) 파이어폭스 브라우저를 켜고, 오른쪽 상단 메뉴 아이콘을 클릭합니다.

    2) [Web Developer] > [Toggle Tools]를 선택합니다.

    3) 개발자 도구창 오른쪽 끝에 있는 [...] 아이콘을 클릭하고, 개발자 도구창 위치를 변경할 수 있습니다.

    4) Inspector 탭을 선택하면 현재 웹페이지의 HTML 소스코드를 볼 수 있습니다.

    5) 개발자 도구창 왼쪽 끝에 있는 화살표가 있는 아이콘을 선택해서 웹페이지 화면으로 커서를 이동하면 선택한 요소가 표시됩니다.

 

 

클래스 자세히 보기 >

 

모코클래스