---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

5. HTML 코딩과 실습환경 준비

LINK : https://opentutorials.org/course/3084/18448

----------------------------------------------------------

 

1. 코딩을 위해 필요한 것 :

웹브라우저 + HTML(컴퓨터, 사람도 이해할 수 있는 컴퓨터 언어. )를 작성할 프로그램. -> editor 

- 내장되어있는 에디터 : window - 메모장, mac .. 등 

- 각각 에디터들이 원래 코딩하기 위함은 아님. 

- 코딩 전문적인 도구 사용할 것 -> 여기에서는 아톰 ! 

- 아톰 이외에도 원하는 것 있으면 따로 써도 됨. (필요한 편집기 찾아낼 수 있는 능력이 중요) 

 

* 추천검색 키워드 : HTML editor / Best HTML editor 2020

 

2. ATOM 다운로드하기

1) https://atom.io/ 접속하여 다운로드

2) 패치 끝나면 실행, 창 떠있는 거 다 지우기 

* 파란색 창 : register as default atom:// URI hanlder?

큰 고민 없이 Yes 누르면 된다. 위 메시지는 atom : //으로 프로토콜을 사용할 거냐고 물어보는 건데, http://으로 안 할 거냐고 물어보는 것. atom://라는 프로토콜은 크게 겹칠 것도 없으니 그냥 yes 눌러도 무관하다. ( 이후에 설정 변경 가능하니 용기 있게 Yes 누르기.!) 

출처 : https://gocoder.tistory.com/1328

 

 

 

3. Atom에서 쓴 html 코드를 브라우저에 띄우기 

1) 바탕화면에 'web'이라는 폴더 만들기

2) Atom 상에서 file - open folder - 방금 만든 'web' 들어가서 folder select

3) folder명 위에서 우클릭 - new file - '1.html'이라고 파일명 정하고 엔터 

 

* 1. html 중에 '1'은 파일명, 'html'은 확장명이다. 

 

* 파일 탐색기로 web 폴더에서 확인하면 1.html 파일이 만들어져있음

 

4) 브라우저 상에서 내 컴퓨터에 있는 html 파일 열기 : ctrl + O

* 보통 웹페이지를 열 때, 웹주소를 입력하는데 그것은 다른 컴퓨터에 있는 파일을 열 때임. 

* 마이크로소프트 엣지에서는 위 기능 안됨. 크롬이나 익스플로러에서 하기

 

5) 방금 만든 1.html을 선택해서 연다. 

6) Atom으로 돌아와서 Hello World 입력 후 저장 (Ctrl + S)

7) 브라우저로 돌아와서 새로고침 누르면 hello world 출력 

 

 

 

 

+ Recent posts