Web/Html

HTML 시작하기

qOOp 2014. 12. 29. 18:09
반응형

HTML 시작하기

HTML은 웹페이지를 작성하기 위해 드림위버와 같은 위지윅 툴을 사용해도 되지만, 처음 HTML을 접하는 분이라면 툴보다는 직접 코딩을 하시기를 권해드립니다. 

직접 코딩을 함으로써, 나중에 응용을 하기가 용이하기 때문입니다. 

HTML5가 대세인데, 꼭 HTML을 해야하나요?

HTML5도 HTML과 기본적인 문법은 동일하며, 최근의 모바일 관련 태그가 추가되고, 이전의 HTML에서 사용되었으나 많이 사용하지 않았던 태그들이 사라졌을뿐, 기본적인 틀은 동일 하다고 생각하시면 됩니다. 

기본 HTML을 잘 하시면, HTML5를 배우는 것은 새롭게 추가된 태그만 더 공부하시면 쉽게 가능합니다.

먼저 HTML을 코딩하기 위해서는 텍스트 에디터를 실행합니다. 혹시 텍스트 에디터가 준비되지 않은 분이라면, http://theqoop.tistory.com/258 참조하여 먼저 텍스트 에디터를 PC에 설치하시기를 바랍니다. 텍스트 에디터는 노트패드++ 이 아니더라도 자신이 좋아하는 텍스트 에디터를 사용하시면 되며, 무료로 다운로드 가능한 에디터도 많으니 무료 텍스트 에디터를 사용하시면 될것입니다.

텍스트 에디터를 실행하고, 새 파일을 선택하여 새문서를 열면, 아무거도 없는 백지 상태입니다.

여기에 아래와 같이 코딩을 합니다.

<html>

  <head>

  </head>

  <body>

  </body>

</html>

( 노트패드++ 에서 코딩한 모습 )

이제 저장을 합니다.

저장 타입은 All types(*.*)를 선택하시고, 파일명은 xxxxx.html 또는 xxxxx.htm 으로 저장을 하시면 됩니다.

여기서는 index.html 로 저장하겠습니다. 저장 후, 새롭게 생성된 파일을 더블 클릭합니다.

웹브라우저가 자동으롤 실행이 되며, 내용 없는 페이지가 나타납니다. ( 웹브라우저의 경우, 현재 자신이 사용하는 기본 브라우저로 파일이 실행이 됩니다. 익스플로러, 사파리, 크롬, 파이어폭스 어떤 브라우저 등 상관이 없습니다. )

현재 아무것도 없는 페이지를 보여 주지만, 이 페이지가 HTML의 기본이자 가장 중요한 페이지입니다. 

index.html 에서 index 는 파일 이름이며, .html은 확장자입니다. 확장자가 html 또는 htm 인 파일의 경우, 자동적으로 웹브라우저에서 파일을 실행해 줍니다. 즉, HTML 에서는 파일이름 + html or htm 으로 파일이름을 생성하면 됩니다. 

HTML의 파일 저장은 xxxxx.html , xxxxx.htm 으로 저장

xxxxx.html 파일은 실행시 자동으로 브라우저가 기동하여 페이지를 실행

왜, index.html 로 이름을 정했을까요?

html 파일은 로컬 환경(현재 자신의 PC)에서도 실행이 가능하지만 일반적으로 웹서버에서 실행되는 것이 일반적입니다. 웹서버에서는 가장 처음 페이지를 index 또는 default 등의 이름을 사용하는 경우가 많아 처음 페이지는 index.html, index.htm, default.html, default.htm 등으로 많은 분들이 사용을 합니다. 

예를 들어 http://xxxxx.com 의 경우라면, http://xxxxx.com/index.html 등으로 접속을 하는 것과 동일한 페이지를 나타내어 주기 때문에 많은 분들이 index.html, default.html 로 저장합니다. ( 모든 사이트가 그러한 것은 아니며, 일반적으로 그러하다는 것입니다. )

첫페이지의 경우, index.html 로 많이 사용하지만, 그외 파일은 자신이 좋아하는 이름으로 저장하면 됩니다.