(생활코딩) HTML 코딩과 실습환경 준비

준비물 - 웹브라우저, 코드 작성 프로그램 에디터 ATOM(window - 메모장 / mac -textedit / linux-gedit등 외에 다른 에디터 사용 가능)  > 최신 에디터 검색 원할 시 best HTML Editor 2021 로 검색

 

ATOM 에디터 주소 : https://atom.io에서 에디터 설치 

A hackable text editor for the 21st Century

에디터가 설치 되었으면, 바탕화면에 web폴더를 새로 만들고,

ATOM 에디터로 돌아가 File탭- open folder 로 web폴더를 클릭해 열어준다.

그 뒤 왼편 Project에 보여지는 web폴더에서 오른쪽 클릭- new file로 1.html 을 생성한다.

 

ATOM 에디터 내 1.html 생성

폴더에도 1.html이 생성된 것이 확인

 

보통 웹페이지를 연다고 하면 주소창에 주소를 입력.

(내 컴퓨터가 아닌 다른 컴퓨터에 저장되어 있는 웹페이지를 입력하고 싶을 때 주소를 입력)

 

웹브라우저와 같은 컴퓨터에 있는 파일인 1.html을 읽으려면 파일 열기 기능을 사용하면 된다.

(파일 열기 단축키 윈도우-Ctrl+O / MAC - command+O)

 

물론 여기서 저장한 내용이 없으므로 해당 html 파일을 열면 빈 화면이 나온다.

 

ATOM 에디터에 "Hello web" 문구를 입력하고 저장한 후 다시 웹페이지를 새로고침하면 해당 문구가 나온다.

(파일 저장 단축키 윈도우-Ctrl+S / MAC - command+S)

 

ATOM 에디터에 Hello web 입력

1.html에 Hello web 문구가 보인다.

 

여기까지 웹 페이지를 만드는 것을 했고, 그 만들어진 웹페이지를 웹 브라우저로 실행한 것 또는 열어본 것에 성공!