'생활코딩' - WEB1 1~5.

'생활코딩' - WEB1의 모든 저작권은 '생활코딩'에 있으며, 단순 공부 및 정리를 위한 수단으로 생각해주시면 되겠습니다.

---

WEB1 - 4. 코딩과 HTML(HyperText Markup Language)

우리는 컴퓨터에게 원인을 줌으로써 결과를 얻는 것으로 세상에 없던 것들을 만들어 내기 시작했습니다.

원인이란 Code, Source, Language 등을 말하고

결과란 App, Program, Webpage 등을 말합니다.

여기서 결과들은 같은 대상을 바라보는 관점에 따라 부르는 방식이 다릅니다.

 

그 중에서 웹페이지는 Html이라는 코드를 사용하고 몇 가지 특징이 있습니다.

 

1. 쉽다.

2. 중요하다. - 인류가 생산하는 거의 모든 디지털 정보가 담기는 거대한 그릇인 웹페이지를 만드는데 가장 중요하다.

3. 저작권이 없다. - Public domain이 없다.

 

---

 

WEB1 - 5. Html 코딩과 실습환경 준비

 

Html 코딩을 하기 위해서는 우리는 두 가지 준비물이 필요합니다.

 

1. 브라우저

2. 코드를 작성하는 프로그램, Editor

 

여기서 우리는 윈도우의 경우 메모장과 같은 준비도구가 이미 준비되어있지만 코드를 작성하는 용도가 아니기 때문에

코드를 작성하기 위한 전문적인 도구를 사용할 것입니다.

 

그것이 바로 'ATOM' 

+ 시간이 흘러 더 좋은 Editor 가 등장했을 수 있기 때문에 우리는 검색엔진에 'best HTML Editor 2020' 이라고 검색할 수 있겠습니다.

 

 

'ATOM'을 다운받아 설치를 한 다음 우리는 바탕화면에 하나의 디렉토리를 만들겠습니다.

바탕화면에 파일 생성

그 다음 ATOM을 실행해서 'Open Folder'를 클릭한 후

우리가 바탕화면에 만든 폴더에 들어가서 선택을 눌러줍니다.

Open Folder 클릭

 

다음과 같은 화면을 확인할 수 있겠습니다.

Project목록에 우리가 만든 디렉토리가 생성되어있는 것을 확인할 수 있다.

 

그리고 web 폴더를 우클릭한 다음 'New File' 클릭해주면(Folder를 누르면 소스코드 적는 란이 없음)

New File 선택

 

다음과 같은 화면이 등장하는데 우리는 '1.html' 이라고 적어줄 겁니다.

1.html 입니다. 1. html 아닙니다. 띄어쓰기 주의!

우리는 html 확장자로 '1'이라는 파일을 생성하는 것이고 '1.html' 이라고 띄어쓰지 않은 상태로 적어주어야 문법을 생성해주기 때문에 이점 유의하도록 하겠습니다.

 

그 다음 우리가 생성한 디렉토리안에 웹페이지를 만든 것을 확인하기 위해 브라우저를 열고

'Ctrl + O' 를 눌러 우리가 생성한 웹페이지를 확인하면 되겠습니다. (초기 화면엔 아무것도 적혀 있지 않겠죠.)

 

그리고 우린 웹페이지 만드는 것을 했고, 웹 페이지를 웹 브라우저로 실행한 것에 성공했습니다.