웹 스터디

실습방법과 개발도구

토픽 웹 스터디 > CSS

개발도구란?

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

개발도구

웹브라우저

인스팩터 (inspector)

네트워크 감시

에디터 (editor)

예제 사용법

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

JSFIDDLE

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

github.com

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

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

댓글

댓글 본문
  1. 혜다다
    2019.08.15 완료
  2. JustStudy
    고맙습니다
  3. 울강이
    Aptana HTML 파일 생성 할 때 기본 인코딩이 기본으로 UTF-8 로 생성 하려면 어떻게 해야 하나요?
    파일 생성하면 한글이 깨지는 문제가 있습니다.
  4. 가레스 베일
    굳 강의
  5. 보현
    150828 좋은강의 감사합니다!! ^__^
  6. egoing
    Aptana를 버리시고요. Atom.io로 넘어오세요~

    https://opentutorials.org......579
    대화보기
    • ㅇㅇ
      이고잉님.. 압타나 맥프로에서 실행하면 비정상적으로 종료된다고 오류뜨면서 계속 실행이 안됩니다... 도와주세요... 압타나 강의하신부분에 오류내용 올렸는데 ㅠ_ㅠ 해결책좀 알려주세요 ㅠㅠㅠㅠㅠ
      대화보기
      • flash
        하 설치오류
        Node.JS mandatory prerequisite was not correctly installed 창 뜨는 문제 해결법 아시는분 계신가요.
        따로 Node.JS설치하려고 해도 거기도 에러가 뜨는데 원인이 뭘까요 ㅠㅠ
      • 어부바
        감사합니다.
      • kush
        아! 감사합니다 :)
        대화보기
        • egoing
          유행하는 에디터가 바뀐거죠 ^^
          대화보기
          • kush
            너무 잘보고있습니다!
            한가지 질문 여쭤도 괜찮을까요?

            작심 40시간 듣다가, (제 취향상) 현강 녹음한거에 집중을 잘 못해서, 따로 이 강의를 보고있는데요.
            sublime 을 언급하셨던 작심40시간과는 달리,
            여기선 aptana를 추천하셨는데, (에디터 프로그램 둘다 맞나요?)

            혹시 특별한 이유가 있으신건지
            아니면 쓰임새나 카테고리가 다른지 궁금합니다
          • YellowBall
            실습방법과 개발도구 잘 들었습니다 egoing님 2015/4/18
          • 야우
            진짜 잘보고 갑니다 ㅜ,ㅜ
          • 초보인지라 많이 배우고 있습니다~세부적으로 설명해주시고 감사합니다~
          • 초보림
            ㅠㅠ감사합니다!! 많은도움이 되요 ㅎㅎ!!
          • 왕초보
            고맙습니다!
          • 양미연
            잘들었습니다~~
          • sdspirit
            고맙습니다. 잘듣고 있습니다.
          • 카르테진
            강의 깔쌈하고 좋네요 ㅎㅎ
          • 하하
            감사합니다!!!
            이런 강의 너무 좋아요
          • ibmike
            에디터로 Brackets 를 쓰고 있는데 이게 상당히 괜찮은거 같습니다.
            html 로 작성한 내용이 실시간으로 나타나는게 꽤 괜찮아요
            수정하기에도 편하고 오픈소스에 무료고요...
          • Rich
            감사합니다. 질보고있습니다
            근데 전 왼쪽 메모장과 안열리구. 폴더란도 이름이 안만들어지고 그런폴더형성도 안되네요.
            그리고 <HTML>. 엔트터치고. <body>. 이것도 엔터칠때마다. 가로열고 닫고. 동영상에선. 자동으로 만들어지던데
            전 알파벳만 써지네요 ㅜ
          • 오션
            잘 수강했습니다!!^^
          • 김삼겹
            감사합니다!!
            대화보기
            • 데헷~
              <html>
              <body>
              Hello world
              </body>
              </html>

              까지 하시고~
              저장 누르시고 open with 로 다시 해주세요~
              대화보기
              • munteng
                신세계를 경험한듯 합니다~ 감사합니다. 아는게 힘!!!!
              • JSK10004
                저장 버튼 누르고 open with 하니깐 되네요

                일일이 저장버튼 누르고 해야되네요 ㅜ
              • ace001
                아래에 vickim님과 같이 코드는 써주신대로 했는데 웹브라우저에 아무것도 안뜨네요 ㅠㅠ

                윗분말대로 <title></title>도 써봤는데도 안되네요 ㅠㅠ
              • xoxo3kun
                @runavv 저장버튼 누르고 다시 oepn with 해보세요
              • runavv
                aptana로 똑같이 따라했는데 왜 Open with 하면 웹브라우저에 아무것도 표시가 안될까요...ㅠㅜ
              • 율이아빠
                인터넷기사 보다가 여기까지왔습니다..
                첫강의호기심반으로들어봤는데 공부해보고싶다는생각이 화르륵~~
                시간날때마다 공부하러올게요~~참고로 목소리완전좋으십니당~ ㅋ
              • hunsik
                vickim// <title> 태그도 입력해야 할 거에요.

                <html>
                <title> ~~~ </title>
                <body>
                Hello world
                </body>
                </html>
                이렇게요~! 설정이 달라서 그런건지 압타나 버전이 달라서 그런건지는 모르겠지만 title태그까지 입력하면 되더라고요(head태그도 필요할테지만 간략하게..)
              • vickim
                안녕하세요!
                <html>
                <body>
                Hello world
                </body>
                </html>

                abtana 예제를 따라해보다가
                위에 방법대로 창에 입력하고 open with →web browser와
                show in → windows explorer를 시도해봤는데
                창은 뜨는데 Hello world라고 쓴 글씨가 나타나질 않네요.. 왜그러는지 알려주실수있나요?

                감사합니다.
              • 박종길
                jsfiddle를 사용하려면 계정을 만들어야 하나요?
                근대요?????
                계정을 만드는 페이지에 "이 필드는 필수 입니다." 설명밑에 입력창 4개가 있고 도대체 뭘 입력하라는 소린지???
                아무 표시가 없어요?

                며칠전 부터 이 과정에 질려서 압타나로 연습하고 런을 누르거나
                또는 파이어폭스에 URL을 입력하거나 이렇게 연습 결과를 보고 있기는 한데.....
                속상해서 여쭈어 붑니다.

                내 컴에서는 jsfiddle 상위 메뉴, 화면 중간에 커피잔만 나오고 감감 무소식 입니다.
                노래를 불러야 하나? 해서 노래를 부르려고 하면 위의 설명처럼 내속을 까맣게 태운답니다.
                이고잉님은 바쁘실것 같으니 나같은 경험있으신 분들은 꼭좀 알려주세요.
                부탁합니다.
                물론 이고잉님이 이글을 보시고 알려주시면 기쁘기 그지없겠지만요....
                편안한 밤들 되세요.
              • 입문
                jsfiddle 정말 편리하군요.
                생코 알기전에는 워드패드로 하느라 많이 번거러웠는데
                aptana랑 jsfiddle 두개로 연습하면 편리하겠어요.
                생코 차분히 마스터해야겠습니다.
              • 달콤씨
                처음부터 시작한다는 생각으로 공부하고 있습니다.
                내용 너무 좋네요^^
              • 캥캥
                2013.09.30
              • 선소리꾼
                책으로만 공부하다가 친절한 설명 너무 감사합니다. ~!!
              • 비트윈
                aptana 사용하고 있는데요,
                웹서비스 만들기"편에서 virtual box에서 사용하던데로 ubutu로 사용하는 건가요?
                아님 그냥 윈도우즈에서 aptana다운 받아 바로 사용해도 되는건가요?
              • 매일 미루다 미루다 이런 좋은곳을 통해서 쉽게 배울 수 있게 됐네요~ 너무 감사해요 목소리도 너무 좋으셔서 이해가 쏙쏙됩니다!!!
              • 좀비의부활
                이해 쏙쏙!!
              • 카제
                무지 좋네요ㅎㅎ
              • Guest
                너무 좋습니다ㅋㅋ
              • Guest
                너무 좋습니다.ㅋㅋ
              • 제이슨
                고맙습니다. 크롬 사용법은 특히 유용했습니다.
              • Hyunduk Yi
                일단 Jsfiddle과 친해져야겠군요.
              • 고성빈
                좋은 강의 듣고 갑니다~~
              • 오병이어
                너무 재미있고 도움이 됩니다. ^_^
              • lee14a
                감사합니다 ^^ 어렵다고 생각했던 코딩을 너무나도 쉽게 알려주시네요 ^^이해하기 쉬운 설명 감사합니다 !! 힘내세요 ^^