생활코딩

Coding Everybody

코스 전체목록

닫기

웹개발자도구

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

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

댓글

댓글 본문
  1. 오석민
    완료
  2. 박병진
    감사합니다
  3. wndals20
    20.09.18 이번 수업도 잘 들었습니다. 감사합니다!
  4. 여니여니
    20200912 시청완료 기본 브라우저가 크롬인데 숨겨진 기능들이 많았네요^^
  5. Lee Seulgi
    감사합니다 : )
  6. switpotato
    20200817 완료: 감사합니다!!
  7. 김성곤
    20200714 감사합니다!
  8. Will Kim
    료카이
  9. 열심히사는사람
    완료
  10. 한강
    오늘도 감사합니다~!!!
    200522
  11. Mongsil
    2020.04.01 완료 감사 합니다!
  12. 김선경
    2020-03-23 완료
  13. 최강최고
    20/3/13 완료
  14. Charlie Kwon
    완료
  15. 2020.01.02
  16. 어완
    감사합니다!
  17. 코딩독학
    20190915 완료 감사합니다!
  18. FIRE
    20190809 완료
  19. 김세종
    2019-07-12 수강완료
  20. yeji
    감사합니다
  21. 김주엽
    공부완료
  22. 피터
    감사합니다!
  23. 한승민
    190124 완료
  24. 릴라야
    190120_완료
  25. 미완성
    20190107완료
  26. 서정필
    웹브라우저와 웹서버의 차이가 뭔가요?

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

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

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

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

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

    4. 개발자도구 메뉴중 "Network" 선택
     - 웹브라우저와 웹서버가 주고 받는 데이터들을 체크 가능
  39. 푸른하늘
    7
  40. 바람과 나무
    감사합니다.
  41. 이성준
    잘봤습니다.
  42. 오빠는다르다
    감사합니다~!!!!
  43. gridshim
    170911
  44. 임지호
    어휴 도움 되셨다니 다행이네요ㅎㅎ 이고잉님의 정신으로 다같이 열심히해요ㅎㅎㅎ
    대화보기
    • 잖수
      강의 후 댓글을 보면 저도 모르게 정리가 되네요 감사해요 ㅎㅎ
      대화보기
      • 14번째
        5.13.
      • php가 첫취업?
        감사합니다
      • 미니밥통
        해당 화면의 사용목적 간단하게 동영상으로 들으니 귀에 쏙쏙 들어옵니다.
        감사합니다.
      • 오원구
        고맙습니다.
      • 배워시
        ???....모르것다
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기