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. 김형호
    항상 감사합니다 !
  3. 커피조아
    오 신기하네요.
    감사합니다.
  4. 김현
    오늘부터 시작합니다. 열심히할게요^_^
  5. 배우고 싶다
    목소리가 성우 뺨치시네요
  6. 서화원
    목소리 어쩔겨(크윽-심장이ㅜㅜ)

    아, 물론 강의는 다 듣고 죽을겁니다.걱정마세요.ㅎㅎ.
  7. 백렘
    10분 4초에 "여러분, 축하드려요~!" 하는거 너무 스윗해요... 이고잉님 목소리 넘나 좋은 것...
  8. 강대성
    hellow world는 언제나 가슴을 뛰게 만듭니다.ㅎㅎ
  9. 할배
    성공....
  10. Jeonghee Gwon
    마지막에 추카드려용~ㅋㅋㅋ고맙습니다.ㅋㅋ
  11. Yunsu Park
    오 신기해요!
  12. 이피
    Hello web
    Hello World
  13. 반자동
    다음!
  14. jjcho23
    강의력이 정말 훌륭하세요!!!
  15. 홍계선
    너무 잘 가르치시는건지?
    제가 잘 따라가는건지?(아직까지 어렵지는 않지요! ㅎㅎ)
  16. Jihyun Lee
    잘봤습니다.
  17. 감사합니다.
  18. 팽석
    감사합니다!! 처음 접하는데 너무 재밌네요!!
  19. 달빈나
    강의 감사합니다!
  20. 하아..너무좋아여ㅠㅠㅠㅠ 감사합니다!!!!!!!!!!!!!!!!!!!!!!
  21. 염정민
    잘봤습니다
  22. 초딩맘
    신기합니다.
  23. G로저스
    잘 봤습니다
  24. Kwangsoo Koh
    잘 따라가고 있습니다 ^^
  25. 코딩학습생
    잘 봤습니다~
  26. Kyungbok Shin
    와~잘 봤습니다.!!!
  27. 도정
    봤어요를 이제 봤어요. ㅎㅎ
  28. 이영숙
    와~~~~~~~~ 신기해요
  29. 위버
    너무너무 재밌어요
  30. 늘작
    호우!!! 흥분되요!! 생산자가 되다니 너무 기쁨니다
  31. 우와 완전 재밌어요
  32. 김기령
    늦게 시작했는데, 재밌게 설명해주셔서 잘 따라가고 있어요. 감사합니다!!
  33. 김재학
    늦었지만 다시 도전해 봅니다
  34. Hongjae Jung
    sublime text 라는 에디터도 아주 좋네요. 프로그램도 잘 깔리고
  35. 저는 브라우저를 바꿔도 아톰 좌측에 흰창이 안 뜨는데 어떻게 해야 하죠...
  36. Hwang Sung Kim
    간단간단해서 좋습니다.
  37. 이수현
    감사합니다.~^^
  38. 조성수
    감사합니다.
  39. 이은정
    지루하지 않아서 좋아요. 자바를 공부하는데 좀 지쳐서 살짝 들어와 봤슴다.
  40. 차녕
    brakets...차암..좋군요..
  41. 잘풀리는인생
    여기까지 완료입니다...
  42. 이수민
    아직까지는 정말 재미있어요!! ㅎㅎ 어려워지면 어떡하지, 하고 걱정도 되지만 열심히 해보겠습니다!
  43. 서경숙
    수강완료
  44. 뉴트스캐맨더
    수강했습니다
  45. 신동우
    와우!! 너무 좋습니닷@@ 크크
  46. 나영주
    아톰 생소하지만 기대하고 설치했습니다
  47. 이유리
    감사합니다
  48. pilia42@naver.com
    윈도우즈 1.23.2버전에서는 자동 줄바꿈이 file -> setting -> editor 경로에 있습니다.
  49. egoing
    물론이죠 ㅎㅎ
    대화보기
    • 컵케익
      재밌게 잘 하고 있습니다. 감사합니다! ^^
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기