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. 루미큐브
    잘봤습니다
  2. 말차녹차
    2019/06/23 완료
  3. 하자하자
    19.06.24
  4. Heisenberg
    `19.06.23 완료
  5. ....
    브라우저가 오픈이 안되요...
  6. 박혜연
    5/00 감사합니다!
  7. 메론소다
    hello web 나왓어요 ㅎㅎㅎㅎ
  8. 기랑이
    hello web 축하받았다 이히히~~ :)
  9. Natalie Lee
    6월 17일 완료!!
  10. Joshua Joo Hyeon Kim
    19.6.13. 학습 / 감사합니다!!
  11. cjswofhxh
    완료
  12. 자동 줄바꿈
    File - settings - Editor - Soft wrap 체크박스
  13. Tom Peters
    감사드립니다. 정말 대단하십니다
  14. 김지뢰
    고맙습니다.
  15. 오다솜
    woooo 너무신기해요!!!!!!!!!!!!!!!!111
    코딩이 뭔지도 모르고 그냥 시작해봤는데....... 끝까지 해볼게요!!!! 친절한 설명감사합니다!!
  16. 장소영
    저 atom에서 문서를 생성해서 만들고 저장을 하려고 하는데,

    이 위치에 저장할 권한이 없습니다.
    권한을 얻으려면 관리자에게 문의하십시오. 라고 떠요.

    그전에 것들은 이 폴더에 모두 저장해 놨었는데, 갑자기 이렇게 뜨네요ㅠㅠ
    어떻게 원래 폴더에 저장을 할 수 있을까요?ㅠㅠ그리고 왜 갑자기 이런 게 뜨는걸까요
  17. 정원철
    다시 복습 5/12
  18. kimuksung
    5/13 완료
  19. 감사합니다.
    new file을 하면 1.html이 안나옵니다. 1로 표시되는 파일이 만들어 집니다.
  20. 5/13 완료
  21. hyeonji
    5/12 완료
  22. 5/11 완료
  23. axpeson
    5/8
  24. SANGSU_PARK
    5/6 ㅇㄹ
  25. 코돌이
    hello web
  26. 5.6일 말차중 완료
  27. 코딩합니다
    감사합니다
  28. 올파인
    190505 출석체크 !
  29. 허공
    190504 감사합니다.
  30. 송영동
    5/3 완료
  31. raymond
    진짜 너무 좋습니다
  32. Jongjin Park
    4/30 감사합니다
  33. 리수광
    이 웹 만드신분 진짜 리스펙!!
  34. 이고은
    완료
  35. 이주연
    완료용
  36. 190426 완료 :)
  37. 위준우
    완료
  38. tmfl1447
    우왕 너무 신기해요! :) '생산자로의 첫발을 뗀다'는 말이 가슴 벅차오르네요! 좋은 정보 공유해주셔서 정말 감사합니다.
  39. 쿠쿠
    ㅋㅋㅋ마지막에 "여러분, 축하드려요" 하시는거 넘나 귀엽고 상냥하심
  40. 이제현
    프로그램 준비과정 습득!!
  41. Mark L Hiaasen
    done.
  42. 김김
    완료

    감사합니다 :)
  43. 수오
    브라우저가 안열리는 분들은
    https://recoveryman.tistory.com/239 여기 참고해보세용!
    저도 안돼서 댓글창 찾아보다 밑에서 어느분이 여기 참고하라 하셔서
    됐습니다 :)!!!
  44. 코딩새내기
    완료~!! 아직 시작이지만 너무 재미있습니다!
  45. abigail
    ◦윈도우 : Ctrl + O(알파벳) 를 누르면 그냥 파일이 열리는데. .브라우저를 열고싶으면 어떻게 해야할까요??
  46. ㅎㅎ
    완료
  47. 허정우
    완료!
  48. 멋진치타
    완료
  49. 소리소리
    감사합니다!
  50. 두뇌풀가동효림
    완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기