HTML 수업

웹개발자도구

웹개발자도구는 웹 개발을 하는데 필요한 여러가지 기능을 모아둔 도구들로 웹브라우저별로 비슷한 기능의 도구를 제공하고 있습니다. 여기서는 HTML 개발과 관련된 부분에 초점을 맞춰서 크롬 개발자 도구를 살펴봅니다. 아래 링크는 크롬 개발자 도구에 대한 자세한 수업으로 연결됩니다. 

크롬개발자 도구 수업 바로가기

댓글

댓글 본문
작성자
비밀번호
  1. 서정필
    웹브라우저와 웹서버의 차이가 뭔가요?

    중간에 웹브라우저의 동작 방법에 대해서 설명해주셨어요.
    1) 웹브라우저는 img.html 다운
    2) 웹브라우저는 img.html 해석
    3) 웹브라우저는 코드를 해석하며 웹페이지를 순차적으로 만들어간다.
    ***>> 4) img tag를 만나면, img.jpg라는 이미지를 몰래 웹서버에 접속해서 다운 받는다.
    5) 다운로드 받은 이미지를 표시하는 방식으로 동작.

    만약 제가 어떤 .jpg 파일을 만들었다고 하면,
    웹서버에 제가 만든 파일은 없을텐데.. 어떻게 웹서버에서 다운받는거지요..?
    아니면 웹브라우저는 제 컴퓨터로부터 img.html을 다운 받은 후 자동적으로 웹 서버로 업로드 후, 필요할 때 불러오는 건가요?
  2. Gihoon Pomme Ryu
    완료. 고맙습니다.
  3. 김민영
    완료
  4. yuchacha
    fun
  5. 질문있습니다. 이거 html 이나 웹홈페이지 만들때 사용하시는 프로그램이 뭔지 알 수 있을까요?
  6. 리젤린
    덕분에 이제 이미지 다운로드하는법을 알았네요 감사합니다
  7. 양선숙
    감사합니다 잘 봤습니다.
  8. clear
  9. SlowStarter
    감사합니다!
  10. 김범진
    여러분들 1.5배속으로 들어보세요. 목소리가 더 젊어지고 더 귀에 잘들어옴ㄷㄷ
  11. SlowStarter
    감사합니다!
  12. 스페이스몽키
    감사합니다. 천천히 따라가겠습니다
  13. 171231 감사합니다.

    웹개발자도구(크롬)
    1. 분석하고자하는 요소를 "마우스 우클릭 > 검사"
     - html 코드는 물론이고 각 요소의 css 정보도 확인 가능

    2. 페이지 상의 아무 여백 "마우스 우클릭 > 페이지소스보기"
     - 현재 웹페이지의 모든 html 코드 확인 가능

    3. 개발자도구 메뉴중 "Toggle device toolbar" 선택
     - 현재 화면은 물론, 다양한 디바이스에서 웹페이지가 구현되는 모습을 확인 가능

    4. 개발자도구 메뉴중 "Network" 선택
     - 웹브라우저와 웹서버가 주고 받는 데이터들을 체크 가능
  14. 푸른하늘
    7
  15. 바람과 나무
    감사합니다.
  16. 이성준
    잘봤습니다.
  17. 오빠는다르다
    감사합니다~!!!!
  18. gridshim
    170911
  19. 임지호
    어휴 도움 되셨다니 다행이네요ㅎㅎ 이고잉님의 정신으로 다같이 열심히해요ㅎㅎㅎ
    대화보기
    • 잖수
      강의 후 댓글을 보면 저도 모르게 정리가 되네요 감사해요 ㅎㅎ
      대화보기
      • 14번째
        5.13.
      • php가 첫취업?
        감사합니다
      • 미니밥통
        해당 화면의 사용목적 간단하게 동영상으로 들으니 귀에 쏙쏙 들어옵니다.
        감사합니다.
      • 오원구
        고맙습니다.
      • 배워시
        ???....모르것다
      • 해커가꿈인사람
        강의수강 2016.12.20
      • 임지호
        크롬웹개발자도구
        - 분석하고자 하는 곳에 포커스를 맞추고 오른쪽 마우스 클릭해서 검사 클릭
        - 토큰 디바이스 툴바를 클릭해 PC화면말고 다른 장치에서 어떻게 보이는지 확인 가능
        - Network 탭에서 웹페이지가 어떤 자료들을 주고 받는지 무엇 때문에 정지, 혹은 지연되는지 분석
      • 윤지은
        정말 감사합니다~^^
      • matheios
        감사합니다~
      • D.JA
        DONE!
      • 갤러시
        감사합니다~
      • 심외무별법
        감사합니다. 잘보고있습니다.
      • 김종엽
        2016.08.24 완료!
      • Daehyeop Ko
        감사합니다! 잘 봤어요
      • cicada
        감사합니다!
      • JustStudy
        2016.07.20 수
        고맙습니다 1.
      • Subin Ha
        감사합니다.
      • 여유한스푼
        좋은 강의 감사드립니다 :)
      • 빨강머리앤
        꼭 알고싶었던 내용인데 감사합니다.
      • 좋은 강의 잘 들었습니다.
        감사합니다.
      • 플라워샤워
        제가 모르고 있던 개발자도구 기능들을 알 수 있어서 무척 유익했어요!! 감사합니다.
      • 감사합니다
        너무 좋네요 감사해요
      • 김상진
        감사합니다.!!
      • 김연재
        감사합니다!
      • 김시은
        감사합니다.^^
      • KinB
        언제나 감사합니다, 새해 복 정말 많이 받으시길!
      • 고고
        공부해야 할게 점점 늘어나는군요 ㅋㅋㅋ
      • 바지락
        감사합니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기