구글상단


[HTML-강의] 1. HTML을 시작하면서... by 놀라운넘

1. HTML을 시작하면서 

시중에 나와있는 나모 웹에디터와 같은 툴을 이용하면 HWP 문서를 작성하는 것과 같이 쉽게 홈페이지를 꾸밀 수는 있지만 기본적인 원리와 tag를 알지 못하면 좀 더 세밀한 부분을 꾸민다거나 문제점을 발견했을 경우 쉽게 홈페이지를 고치기가 어렵죠.

강좌를 시작하기 전에 필요한 것은 다른 것은 필요가 없고, 윈도우 보조프로그램에 있는 메모장과 netscape 또는 explore만 있으면 됩니다. 

HTML 이란 WWW(World Wide Web)의 문서를 작성하는 데 사용되는 Hyper Text Markup Language의 약자입니다.

 

1) Hyper Text 란?

문자와 문자를 서로 관련지어서 찾아볼 수 있도록 만들어진 문서 파일이나 문서 형식으로,  정보를 순차적으로 검색하는 것이 아니라, 정보가 마치 거미줄 같이 얽혀있는 형태를 말합니다. 윈도우용 프로그램의 도움말 기능도 hypertext로 구성되어 있습니다.

 

2) Markup Language 란?

Markup이란 원래 출판물의 활자 지정을 위한 기호를 일컫는 용어였다고 합니다. 최근에는 전자 문서 관리 시스템이나 자동 문서 생성 시스템 등의 분야에서 문서 구조를 기술하는 용도로 쓰이는 간략한 형식의 언어를 지칭하죠.

Markup의 의미는, 본문에 무언가 특별하거나 추가적인 정보를 '표시'하는 것을 말합니다. 예를 들면, 특별한 단어에 강조라는 의미를 부여하기 위한 밑줄이나 색상/폰트의 변화 또는 문서 내의 내용의 순서를 부여하기 위한 글머리표/번호매기기 등과 같은 것을 Markup이라고 하죠. 이러한 Markup을 가능하게 하는 언어가 바로 Markup 언어입니다.

그러면 우리가 배우는 html의 의미를 어느 정도 알 수 있겠죠? "거미줄처럼 얽혀있는 정보에 어떤 표시를 한 언어!!!"

 

3) html의 역사

html의 역사를 보면 Markup language의 역사라고 봐도 무방할 겁니다.

  • SGML(Standarized Generalized Markup Language)
  • HTML(Hyper Text Markup Language)
  • XML(eXtensible Markup Language)
  • XHTML(eXtensible Hyper Text Markup Language)

의 순으로 발전을 했습니다. 이렇게 발전한 이유는 XML을 공부하시면 알 수 있을 겁니다. 지금은 XML이 떠오르고 있죠.

 

4) html의 특징

HTML은 HyperText Markup Language의 약자로써 홈페이지를 만들 때 필요한 프로그래밍 언어입니다. 하지만 어떻게 보면 프로그래밍 언어라기 보다는 문서라고도 할 수 있습니다. 하나의 문서가 World Wide Web이란 곳에 존재하며 인터넷이라는 거대한 NETWORK을 통해 누구나 접할 수 있는 문서.

그럼 일반 프로그래밍 언어와의 차이점은 뭘까요?  

  • HTML은 대소문자를 구별하지 않는다.
  • HTML은 컴파일이 필요없다.
  • HTML은 잘못된 표현이 있으면 자신들의 규약에 맞게 표현한다.
  • HTML은 몇 가지 TAG로 이루어진다.
  • HTML은 O/S(Operating System)에 구애없이 사용된다.
  • HTML은 문서의 처음부터 끝까지 순차적으로 실행됩니다.

위에서도 읽다 보면 tag라는 말이 있습니다. 그리고 HTML을 공부하다 보면 tag라는 말을 자주 접하게 됩니다. 그러면 tag란 무엇일까요?

tag란 사전적 의미로 '꼬리표', '딱지'라는 의미가 있고 '프로그래밍에서 정보의 처음과 끝을 나타내는 표시 문자'라는 의미가 있습니다. HTML에서 tag란 HTML 문서의 일부나 전체 혹은 명령어의 시작과 끝을 의미합니다.

 

5) html의 구조

HTML 문서는 "<"와 ">"로 묶인 '태그'라는 명령어로 구성됩니다. "<tag>" 와 같은 형태로 명령의 시작을 알리고, 명령이 끝나는 부분에는 "/(슬레쉬)"를 첨부한 "<tag>"의 형태로 명령을 종료합니다. 그리고 HTML tag들은 대,소문자 구별이 없이 사용됩니다.

아래의 HTML 문서의 기본 구조를 보시면 이해가 쉬울 겁니다.

<HTML>                           <!-- HTML의 시작을 알립니다. -->
<HEAD>
     <TITLE>제목</TITLE>  <!-- HTML 문서의 제목입니다. -->
</HEAD>
<BODY>
                                       <!-- HTML 문서의 내용이 들어갑니다. -->
</BODY>
</HTML>                         <!-- HTML의 끝을 나타냅니다. -->


위의 내용이 기본적인 HTML의 골격입니다.

위에 보면 <!-- 내용 -->이라는 부분이 있습니다. 이것은 html 문서를 작성할 때 사용할 수 있는 주석문으로 웹 상에 올렸을 경우 화면에 나타나지 않고 실행되지도 않습니다. 작성된 html 문서 내에서 화면에 나타내지 않을 곳을 '<!--'과 '-->'로 막으면 브라우저로 보았을 때 화면에 나타나지 않습니다.

<BODY> tag와 </BODY> tag 안에 글자를 넣으면 그 내용이 웹 상에서 문서로 나타납니다. 위에서 <TITLE> tag와 </TITLE> tag 사이에 글자를 넣으면 브라우저(netscape, explore)의 타이틀 바 부분에 제목이 나타납니다.

① <HTML>...</HTML>
HTML 문서는 항상 <HTML>이라는 tag로 시작해서 </HTML>이라는 tag로 끝나게 됩니다. HTML 문서의 시작과 끝을 나타내는 거죠.

② <HEAD>...</HEAD>
HTML 문서의 머리말을 의미하며 <TITLE>...</TITLE> tag가 포함됩니다.

③ <TITLE>...</TITLE>
WEB 브라우저의 제목 표시줄에 title tag로 둘러쌓인 부분이 나타나는데, 문서의 특징을 가장 적절히 표현할 수 있는 말이 좋습니다.

④ <BODY>...</BODY>
HTML 문서의 내용을 나타냅니다. 홈페이지에 나타내려는 내용을 <BODY> tag와 </BODY> tag사이에 넣어줍니다. 여기서 홈페이지의 내용과 배경색이나 이미지, 링크 및 관련된 속성을 삽입할 수 있습니다.

HTML 문서를 만든 후 저장할 때는 확장자가 .HTM이나 .HTML이어야 합니다.
예) INDEX.HTM, INDEX.HTML

참고로 HTML tag나 문서, 그림 파일을 저장하고 사용하는데 있어서 자신만의 규칙이 있으면 좋습니다.
가령 tag는 대문자로 사용하고, 파일이름은 소문자로 사용한다 던지, 들여쓰기는 어떻게 한다...

이렇게 작성한 HTML 파일을 웹 상에 나타내기 위해서는 웹서버에 문서를 위치시켜야 합니다. 자세한 내용은 차차 알아보기로 할께요~! 웹서버는 NT나 UNIX로 대부분 이루어져 있습니다. NT와 같은 경우는 파일의 대소문자를 구별하지 않지만, UNIX 같은 경우는 대소문자를 구별하게 됩니다. 그래서 위와 같은 자신의 규칙이 있으면 유용하다는 거죠.

html에서는 대소문자를 구별하지 않지만, xml의 경우는 대소문자를 구별합니다. 차라리 모두 소문자로 사용하는 것도 좋겠네요.

출처 : Tong - 놀라운넘님의 HTML, JavaScript통


이글루스 가든 - 홈페이지를 만들자!

 블로그코리아에 블UP하기

덧글

  • knowmoney 2010/02/19 15:18 # 삭제 답글

    무료로 html 자료 올리시는 건가요? 저도 이 참에 html 좀 배우고 싶네요
  • 놀라운넘 2010/02/22 07:23 #

    네.. 안녕하세요.

    예전에 네이트에서 블로그를 운영할때 불러깅했던 자료를 백업중입니다.
    나중에 간단한 html쪽도 포스트를 작성할 예정이니 자주 놀러오세요.

    감사합니다.
  • 레메디 2010/02/19 15:29 # 삭제 답글

    지금보니, 전에 어떻게 저걸로 홈페이지를 만들어나 싶을 정도로 낯설군요...ㅎㅎㅎ -_-;;;
  • 놀라운넘 2010/02/22 07:26 #

    안녕하세요.

    지금은 다시 봐서 낯설지만 앞으로 꾸준히 보면 다시 익숙해질 것입니다.
    밑바탕에 깔린 실력이 있잖습니까~~
    하하하하~~

    감사합니다.
  • 복돌이^^ 2010/02/19 15:52 # 삭제 답글

    계속 올리실거죠...자주 찾아 뵐께요^^

    행복한 하루 되세요
  • 놀라운넘 2010/02/22 07:28 #

    네~~ 관련자료들 자주 올릴 생각입니다.

    자주 뵙고 좋은 교류를 하는 이웃블로거가 되었으면 합니다.
    감사합니다.

    행복하고 즐거운 하루되세요.
  • 오지코리아 2010/02/19 17:13 # 삭제 답글

    명절 잘 보내셨죠?
    잘 보고 갑니다^^
  • 놀라운넘 2010/02/22 07:29 #

    안녕하세요.

    덕분에 명절 잘 보냈습니다.
    자주 놀러오셔서 감사합니다.

    오늘도 행복하고 즐거운 하루되세요.
댓글 입력 영역


[BEST] Funny baby videos

통계 위젯 (화이트)

926
94
1029317

코튜버

[TOP] KoTuber Funny videos

구글 애드센스