선생님을 위한 프로그래밍 수업

실습방법과 개발도구

토픽 선생님을 위한 프로그래밍 수업 > 웹 애플리케이션 만들기 > CSS

개발도구란?

개발도구란? 개발을 하는데 필요한 도구와 개발된 결과를 실행할 환경을 의미한다. HTML 수업에서 개발도구란 웹페이지의 소스를 만드는 에디터와 웹페이지를 실행할 웹브라우저와 같은 일련의 도구를 의미한다.

개발도구

웹브라우저

인스팩터 (inspector)

에디터 (editor)

예제 사용법

본 수업은 두가지 형태의 예제를 제공한다. 아래와 같다.

JSFIDDLE

라이브로 예제를 실행해 볼 수 있는 서비스다. 직접 코드를 변경 하면서 결과를 실시간으로 확인해볼 수 있다. 특별한 개발도구가 필요 없다는 것이 장점이다. 자세한 사용법은 생활코딩 수업을 참고하자.

github.com

소스코드를 저장할 수 있는 서비스로 본 수업의 모든 예제 파일이 저장되어 있다. html 수업의 저장소 페이지로 이동한 후에 ZIP 파일을 다운로드하면 전체 코드를 다운받을 수 있다. (저장소로 바로가기)

github.com에 대해서 더 자세히 알고 싶다면 아래의 수업들을 참고한다.

댓글

댓글 본문
  1. 승민쓰
    정말 감사합니다!
  2. 김종엽
    2016.08.24 완료!
  3. 풀스택 개발자를 꿈꾸는 비전공자입니다.

    항상 좋은 강의 감사드립니다!
  4. Ian Si Mong Seong
    수강완료
    2016.08.01
  5. 올어라운더
    좋은 수업 감사드립니다
  6. 초보코딩스
    CSS수업도 기대되요!
    감사히 잘보겠습니다 !!^^
  7. kimdaehong
    항상 감사드립니다
  8. Park Agi
    너무 너무 감사합니다
  9. Sung Il Kang
    정말 감사합니다. ^^
    덕분에 막혔던 것들이 조금씩 풀리는 느낌입니다.
  10. JustStudy
    고맙습니다
  11. 빨강머리앤
    매우 유용한 정보 입니다.
    감사합니다.
  12. WayneKing
    간다.
  13. 한호석
    위에 나열된 도구들의 실습환경은 맥에서도 윈도우처럼 문제없이 실행 가능한가요?
  14. 김민규
    감사합니다. 정말 잘 배우고 있습니다^^
  15. 크레용샘
    감사합니다. 막막했는데, 너무 유익하게 잘 배우고 있습니다.
  16. 흔호
    잘들었습니다~
  17. 천골마디
    감사하므니다.
    또 감사하므니다.~
  18. pqpqaa
    정말 하나하나 정성껏 만드신거같아요.
    늘감사합니다!!
  19. 늘생릭코네
    고맙습니다.
  20. YellowBall
    잘 들었습니다.
  21. proSiGi
    감사합니다 ^^
  22. 지애
    왜 화면은 안나오고 목소리만 나올까요?ㅜ
  23. 액션킹
    생활코딩 우연히 검색에 나와서 들어왔는데 설명이 참 찰지네요^^ 감사합니다. 자주 배우러 오겠습니다~
  24. 별모모
    다시 CSS를 보고 있습니다. 역시, 처음 볼 때보다 더 많은 것을 이해할 수 있습니다.
  25. egoing
    아래 링크를 참고해주세요 :)

    https://developer.apple.com......ls/
    대화보기
    • 빈누
      감사합니다. :) 그런데 구글 크롬이 무거워서 맥에서는 사파리를 쓰고 있는데 사파리에도 개발자용 elements가 있는지 궁금하네요. '개발자용'이라는 메뉴는 있는데.. 흠.
    • hojun
      저장소에 있는 짚 파일 내려받아서 열어봤는데 책(p.87~90) 에 있는 전체 소스코드를 찾을 수가 없습니다. ㅠㅠ
    • mimiandchopa
      저장소에서 다운받는 파일명이 codingeverybody_javascript-master 맞나요??
    • hazz
      아.. 잘알겟습니다 기회가 되면 다른 에디터들도 써보도록 하겠습니다^^
      대화보기
      • egoing
        드림위버 정도 수준의 에디터들간에는 좋고 나쁘고 보다는 본인의 취향에 맞고 안맞고가 더 큰 것 같습니다.재미로 다른 에디터도 한번 사용해보실 것을 권유드리지만 좋고 나쁘고의 문제는 아닌 것 같습니다.
        2013/4/14 Disqus <notifications@disqus.net></notifications@disqus.net>
        대화보기
        • hazz
          질문드릴게요~ 개발 도구 에디터중에 adobe사의 드림위버는 별로인가봐요?Aptana를 사용하시는 걸보니... 전 웹디자인쪽이라서 드림위버를 자주 사용해서문의 드려봅니다.
        • redyong
          정말 좋은 자료 감사합니다 ^^