HTML과 에디터로 웹페이지만들기

HTML을 이용해서 웹페이지를 만들어 보는 방법에 대해서 알아볼 것입니다. 그렇게 하기 위해서는 두 가지가 필요합니다. 바로 웹브라우저와 HTML이라는 컴퓨터와 사람이 이해할 수 있는 코드를 작성 할 수 있는 프로그램이 필요합니다.  윈도우는 메모장, 맥은 text 편집기, 등등이 내장되어 있어 에디터가 없어도 되지만 여기서는 아톰 에디터를 사용해서 코딩할 것입니다. 오늘 이야기하는 내용은 생활코딩이라는 것을 통해서 동영상을 보고 따라할 수 있으니 관심있으신 분은 참고하시면 좋을것 같습니다. 구글 검색엔진에 atom.io를 검색하면

그림과 같은 웹사이트가 나옵니다. 별다른 회원가입 없이 다운로드를 눌러서 프로그램을 받을 수 있습니다. 이제부터 에디터에서 HTML파일을 만들고 이것을 웹브라우저로 출력하는 작업을 할 것입니다. 우선 web이라는 폴더를 만들고 web을 우리의 프로젝트로 만들었습니다. 파일에서 오픈 폴더를 누르고 web을 선택합니다. 아톰 편집기를 보시면 왼쪽 web과 오른쪽 편집기로 나눠집니다. 왼쪽 web은 바탕화면에 생성한 폴더를 관리하는 화면입니다. web을 마우스로 오른쪽 클릭을 한 후 Nwe file을 누르시면 새로운 파일의 이름을 정할 수 있는 창이 등장합니다. 새로운 창이 등장하면 1.html이라고 입력합니다. 여기서 html같은 경우는 한글파일 hwp와 같은 확장자라고 볼 수 있습니다. 즉 웹페이지의 확장자가 html이다라고 생각하시면 됩니다.

지금까지 1이라는 이름의 웹 페이지를 만들었습니다. 이것은 브라우저에서 확인하려면 브라주저를 킨 상태에서 Ctrl + o를 누르면 파일을 선책할 수 있는 창이 뜨고 파일을 선택하면 브라우저로 확인이 가능합니다. 저는 크롬을 이용했습니다. 이제 바탕화면의 web폴더에 있는 1.html을 누르면 브라우저의 흰 바탕의 페이지가 보이게 될 것입니다. 이제 아톰 편집기에 hello web이라고 입력하고 Ctrl + s키로 저장한 후 웹페이지를 새로고침하면

위와 같이 웹페이지에 hello web이라는 문자가 출력이 됩니다. 파일에서 세팅으르 눌러서 Editor에 들어가게 되면 글자 크기나 줄 바꿈 길이 등을 설정할 수 있는 칸이 있습니다. 텍스트가 너무 길면 사용자가 프로그래밍하는 것이 불편하기 때문에 사용자 본인이 어느 정도 길이를 세팅할 수 있게 되어 있습니다. 웹이라는 것은 정보를 한데 모아둔 것과 같습니다. 블로그도 자신만의 정보나 또는 자신이 관심이 있는 정보들을 검색해서 재가공하는 것입니다. 그러한 정보를 제공하는 것이 바로 웹입니다. 오늘은 간단하게 만들어 볼 웹의 기초적인 내용과 웹을 만들 수 있는 편집기에 대해서 설명했습니다. 앞에서도 이야기해드렸지만 위에 포스트 내용은 생활코딩 동영상 강의를 기반으로 했기때문에 관심이 있으시면 유튜브나 다른 검색 엔진 서비스에  생활코딩을 치시면 더욱 자세한 내용을 찾으실 수 있습니다.