생활코딩

Coding Everybody

코스 전체목록

닫기

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

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

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

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