WEB1 - HTML & Internet

HTML 코딩 실습 환경 준비

 

 

---

 

 

기획이 끝났으니 
이제는 코딩하기 위한 
준비를 해보겠습니다. 

코딩을 하기 위해서는
에디터(Editor)라는 프로그램이 필요합니다.

 

 

각자의 운영체제에는
이미 에디터가 준비 되어 있습니다.

  • 윈도 - 메모장
  • 맥 - 텍스트 편집기
  • 리눅스 - gedit, nano, vim

에디터마다 사용법이 다르기 때문에
통일하겠습니다.

 

 

이 수업에서 채택한 에디터는
github.com에서 만든
Atom(아톰)입니다.

 

 

미래에는 Atom이 없어졌을 수도 있고,
더 좋은 에디터가 나왔을 수도 있겠죠.
중요한 것은 Atom의 사용법이 아니고
자신이 필요한 에디터를 찾아내는 능력입니다.
아래와 같은 검색어를 이용해서
자기에게 맞는 도구를 찾을 수 있습니다.

 

html editor

 

아래 주소에서 프로그램을 다운로드해서 설치해주세요.
https://atom.io/

 

 

왼쪽은 프로젝트에서 파일목록입니다. 오른쪽은 선택한 파일을 편집하는 화면입니다.

 

 

저는 편하게 작업하기 위해서 왼쪽에는 웹브라우저를 오른쪽에는 Atom을 배치했습니다.

 

 

먼저 할 것은
실습 파일을 저장할 폴더를 생성하는 것입니다.
이 폴더를 프로젝트 폴더라고 하겠습니다.
윈도우 탐색기를 이용해서
바탕화면에 WEB이라는 디렉터리를 생성해주세요.
(동영상참고 : youtu.be/iRZJHhjh8DU?t=207)

 

 

이제 프로젝트 폴더가 아톰 왼쪽에 표시되게 해볼께요. 메뉴 → File → Add project folder를 선택해서 바탕화면에 생성한 WEB 폴더를 선택해주세요. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=281)

 

 

1.html 파일을 생성하겠습니다. WEB 폴더에서 오른쪽 클릭해서 New File을 선택합니다. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=348)

 

 

방금 생성한 파일이름을 보면 
확장자가 html 입니다.
MS 워드의 확장자는doc,
PDF는 pdf입니다.
웹브라우저에서 볼 수 있는 웹페이지는
확장자가 html 입니다.

 

 

그럼 1.html을 웹브라우저로 열어봅시다. 웹브라우저에서 아래와 같은 단축키를 눌러보세요.

  • 윈도우 : Ctrl + O(알파벳)
  • 맥 : Cmd + O(알파벳)

파일선택 화면이 나올꺼예요.

파일선택 화면이 나오지 않으면 브라우저를 바꿔보세요. 또는 윈도우 탐색기나 맥 파인더에서 1.html 파일을 더블클릭하면 웹브라우저가 실행되면서 웹페이지가 표시 될꺼예요.

 

 

짜잔 이렇게하면 
웹브라우저로 웹페이지를 
열 수 있습니다. 

 

 

이제 화면에 무엇인가를 표시해봅시다. 편집화면에 hello web이라고 입력하고 저장해보세요. (윈도우 : Ctrl + S, 맥 : Cmd + S) (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=553)

 


웹브라우저를 리로드 하면 아래처럼 hello web이 출력됩니다.


 

 

축하합니다.

 


지금까지 웹페이지에 대한 소비자로만 살아오셨다면
이제 생산자로서 첫발을 뗀 것입니다.
신기하고 기쁘지 않나요?
더욱 흥미로운 것들이 기다리고 있습니다.

 

 

자주 묻는 질문

atom 설치가 되지 않습니다. 

atom을 꼭 써야하는 것은 전혀 아닙니다.  더 좋은 대체재들은 얼마든지 있습니다. brackets를 추천드립니다. 

자동 줄바꿈을 하고 싶습니다.

메뉴에서 preference -> editor -> Soft Wrap 항목을 체크해주세요. 참고

댓글

댓글 본문
작성자
비밀번호
  1. phonebreaker
    꿀잼이네요!좋은 컨텐츠 감사드립니다!
  2. 심플리스트
    감사합니다~
  3. Ben
    다른 프로젝트를 만들기 위해 다른 폴더를 새로 만들어야 하는지요? 아니면 같은 WEB폴더를 열어서 사용하는 방법이 있는지 궁금합니다. 감사합니다.
  4. posyhm08@gmail.com
    저장은 하셨나요?
    대화보기
    • 김정윤
      오... html코딩에 들어갑니다!~!
    • 최하림
      항상 html이 궁금했었는데 막상 도서관을 가면 너무 두꺼워서 손을 못댔던게 10분만에 시작이 됐네요! 정말 감사합니다
    • YiWon
      감사합니다. 직접 웹페이지를 작성해보니 신기하네요 ㅎㅎ
    • 베니
      새로고침도 하신거죠??
      대화보기
      • 정정윤
        아톰으로 뭘 써도 흰 창만 뜨고 아무것도 입력이 안되어 있어요. html파일이고 다 똑같이 했는데 설정문제일까요? 이런 부분은 어떻게 하죠?
      • orcakpg
        첫 강의 들었습니다. 수학 교과서의 집합부분을 보는 듯하네요. 보고 또 보고 ㅋㅋ 이번에는 뒷장까지 가볼 생각입니다.
      • 남승우
        김수영
      • 해리
        컴퓨터가 낡아 작동이 잘 되지 않았던 찰나, 프로그래밍을 하고자 맥북을 샀습니다(앱스토어 어플을 만들고 싶은 계획도 있구요)
        생활코딩에서 HTML, JavaScript, CSS, Python, PHP 등등 여러 언어에 대해 '접'해 보게 됐으나 일을 하면서 자투리 시간으로 하는 코딩이라 시간이 많이 부족했고, 창작의 기쁨은 해야 한다는 '강박'이 돼 저를 압박했습니다.

        오랜 고민 끝에, 저는 창작의 기쁨을 우선 회복하자고 생각했고 다시 HTML으로 돌아왔습니다. 와우! 만드는 게 이렇게 쉬웠나요
      • 트랜스독일인
        감사합니다 ㅎㅎㅎ 너무 재밌고 설레네요 도움 주셔서 감사합니다
      • 푹스
        감사합니당
      • 해피
        감사합니다 선생님!!! 제가 게을러서 반년이 지난 이제서야 강의를 듣네요 ㅠㅠ 지금까지 왜 미뤘는지 모를만큼 재밌어요!! 이렇게 무언가를 배워보고 싶다는 생각이 드는게 너무 오랜만이라 설레네요 ㅠㅠ 감사합니다!! 열심히하겠습니다.
      • 콜드브루
        Hello web!!!
      • 동글몬
        고잉 성님 사랑합니다. 댓글달기도 귀찮아질정도로 수업이 재미있네요. 무료로 배움의 기회를 누리는 주제에, 댓글도 꼬박꼬박 달지 않는 저의 배은망덕함이 부끄러워 첫 댓글 남깁니다. 열심히 배우고 멋진 개발자가 되어서 은혜에 답하고싶네요 허허허허 사랑해요.
      • 융디
        2년전에 잠깐 발만 담궈보고 다시 시작합니다~~
      • egoing
        이거 끝까지 공부하시고 아래 수업을 들으시면 됩니다.
        https://opentutorials.org......276
        대화보기
        • 시내짱
          웹싸이트 도메인을 구매해야하나요?
        • 신혜성
          2018.06.20 Hello Web !
        • 잼잼
          ㅎㅎ컴퓨터랑 전혀 친하지않은 문과출신인데 새로운 공부가 되니 너무너무 재밌네요!! 헬로우웹 하나 뜬 거로 행복해요ㅋㅋㅋ
        • egoing
          alt 키를 눌러보세요~
          대화보기
          • atom을 설치했는데 메뉴 탭(File,Edit,--)가 나타나지 않아 10번도 더 재설치해도 마찬가지^^ ?????
          • 바다의왕자
            장거리 열차가 출발한 느낌입니다.
          • itshyejin
            축하드려요옹 ㅎㅎㅎㅎㅎㅎ 열심히 할게요
          • 저는 삼성 노트북으로 윈도우 10 쓰고 있는데, atom 설치해도 바탕화면이나 시작 메뉴에 설치 파일이 보이지 않아서 실행 못 시키는 분들께 도움 드립니다.
            저도 같은 증상이 생겼고, 재설치해봐도 그대로였습니다.
            이때는 C 드라이브에서 탐색기를 통해서 atom을 검색해 보면 되는 것 같습니다.
            제 경우에는 C:\Users\SAMSUNG\AppData\Local\atom 폴더에 실행 파일이 있더라구요.
            다만 AppData 폴더는 숨김 폴더로 되어 있어서, 숨김 해제를 설정해야 폴더가 보였습니다.
            그리고나서 atom 실행파일을 마우스 우클릭해서 "시작 화면에 고정"시켜서 편하게 등록 후 사용하고 있습니다.
            같은 문제 생기시는 분 계시면 참고하시면 좋을 것 같습니다~
          • 뉴크민둥
            우아 오늘부터 시작했는데 이제 쭉 한 번 해볼게요 ㅎㅎ
            무료강의 올려주셔서 감사합니다
          • ㅎㅎ 감사합니다 재밌어요
          • 이예나
            ㅎㅎㅎ축하드려요옹~ ㅎㅎㅎㅎ감사합니다 설레네요 ㅎㅎ_180518
          • 콩잇
            잼나네요 ㅋㅋㅋㅋ
          • 오창선
            50대 중반에 새롭게 도전해 봅니다만 쉽지는 않네요....ㅠㅠ
            하지만 성공은 했구요.... 젊은 친구들보다 100배이상 노력해야 될듯~~
            아무튼 정말 감사합니다~~^^
          • 공부가좋아
            감사합니다.
            짱입니다.
          • yamaDeus
            감사합니다.
          • 와우
            잼써용~ 감사합니다!
          • 햅싸
            0511 감사합니다!
          • egoing
            말씀하신 것 모드 같은 용도의 서로 간의 경쟁자입니다
            대화보기
            • 전 윈도우7 쓰는데 다운받은 후에 프로그램 검색해도 안뜨거든요. 그래서 브래킷을 다운 받으니 브래킷은 목록에 있네요. 두 프로그램은 사용하는데 차이가 없겠죠? 비주얼 스튜디오 코드도 에디터인가요? 완전 입문자라 모르는게 많아요. 언젠가 댓글달아주시는 분들처럼 많이 알게 되었으면 좋겠네요.
            • htmlhm
              안내하는데 윈 비스타 쓰는 분은 brackets 다운해야 해요
            • htmlhm
              전 비주얼 스튜디오 코드로 기본을 만들고, 아톰으로 마무리합니다~
            • 최동희
              윈도우에서는 바로가기 아이콘이 없더라도 시작메뉴에 있는 경우가 많고, 그런 경우에 윈도우키(창문 모양 키) 누르시고 거기에서 해당 프로그램 이름 적으시면 해당 이름의 프로그램이 검색되어 나옵니다.
              대화보기
              • 아톰을 다운받는데 다운받으면 에디터는 실행이 되는데,
                바탕화면에 바로가기가 생성이 안될때는 어떻게 해야 하나요?
                다음에 열려고 하면 바로가기 아이콘이 없으니 어떻게 열어야 할지 몰라
                계속 다운받기를 하고 있어요.... 어떻게 해야할까요.
              • egoing
                넵 그냥 쓰시면 됩니다
                대화보기
                • poket73
                  궁금해요 .. 어프리케이션?만드는 강좌였나요 .. 비트나미랑 아파치 설치하라고해서 설치해놨었는데 그냥 사용하면되는건가요?? ㅠㅠ
                • ctrl +o 파일 열기했는데 브라우저가 열리지 않습니다. 왜이런 건가요 ?
                • 밍구리
                  윈도우 atom에서 자동 줄바꿈을할경우에는 컨트롤+, 를누른뒤 editor 탭 클릭 Soft Wrap 목록 체크해주시면됩니다
                • 시깅
                  Hello web. 2018.04.13
                • daaawnstar
                  Hello Web ~
                • 솔백아
                  2018.04.12 Hello Web!
                • 효림
                  잘 보고있어요!
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기