태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

HTML 강좌 첫 시간입니다. 오늘은 HTML과 HTML을 이루는 태그(Tag)에 대해서 간략히 알아보도록 하겠습니다. 홈페이지를 제작 하거나 블로그 스킨등을 만들다 보면 늘 등장하는 것이 HTML, 태그, CSS, Java이런 단어들이 나옵니다. 하지만 정작 이것들이 무슨 말인지 도통 알 수가 없지요. 그냥 쓰니까 그런가보다 하고 넘어 가게 마련입니다. 그래서 오늘은 태그가 무엇인지 기본 개요부터 설명을 한 후에 다음 글부터 태그에 대해서 살펴 보겠습니다.

 

● 태그란 무엇인가요?

태그(Tag)란 HTML문서를 구성하는 명령어입니다.(키워드로 말하는 그 태그가 아닙니다.)

쉽게 설명 하자면, 한글을 만드는 가장 기초가 무엇일까요? 자음과 모음입니다. 자음과 모음이 모여서 한 단어를 만들고 문장을 만듭니다. 태그는 그 자음과 모음에 해당되는 것이라고 설명하면 이해가 쉬울듯 합니다. 영어는 알파벳에 해당 하겠네요.

태그와html의 정의

태그란?

 

● HTML이란 무엇인가요?

HTML이란 "Hyper Text Markup Language"의 약자로, 하이퍼텍스트란 언어입니다. 인터넷에서 웹을 통해 보여지는 모든 문서와 사이트를 이루는 기본적인 언어라고 설명 하겠습니다. 각 나라마다 고유의 언어가 있듯이, 컴퓨터에도 각각의 언어 들이 있습니다. 그 언어중에 웹(WWW)에 해당되는 언어 중에 가장 기본이 되는것이 HTML입니다. 이외에 C나, Java등도 있지만, 그것보다는 쉽고 이해가 빠르며, 가장 널리 쓰이고 있습니다.

우리가 사용하는 각종 사이트에는 이 HTML로 이루어져 있습니다. 홈페이지, 블로그, 쇼핑몰, 포털사이트, 각종 웹문서등 인터넷 안에서 보여지는 모든 것들이 이 HTML로 이루어져 있습니다. 브러우저안에서 이 언어를 해석하여 우리에게 화면으로 보여 주는 것이지요.

태그와html의 정의

html이란?

 

● 어떻게 웹상에서 보여 주는 것인가요?

위에서 HTML은 언어라고 설명은 했습니다. 태그는 쉽세 그 HTML문서를 구성하는 알파벳이라고 했습니다.

하면 이것들을 어떻게 화면에서 보여주게 되는지 궁금 하시죠? 예를 들어 "엄마"란 단어를 우리가 보게 하려면 우리는 자음과 모음을 익혀야 합니다. 또한 그것들을 우리끼리 약속을 합니다.

예를 들면, "ㄱ"기역이라고 약속을 합니다. 이렇게 약속해 놓은 자음과 모음중에 ㅇ,ㅓ, ㅁ, ㅁ, ㅏ 란 5개의 자음 모음을 조합해서 엄마라고 우리는 약속을 하는 것이지요. 그래서 이것을 우리는 엄마라고 읽고, 엄마라고 이해를 합니다.

컴퓨터도 우리처럼 이런 약속을 정해 주어야 그것을 그렇게 해석하고 보여 주게 됩니다. 그것이 HTML이라는 언어인데, 그 HTML의 자음 모음에 해당하는 태그를 사용해서 지정해 주면 브러우저는 보내온 5개의 태그를 읽고 해석하여 우리에게는 "엄마"라고 보여 주게 되는 것입니다. 즉 다시 말해 ㅇ,ㅓ, ㅁ, ㅁ,ㅏ란 태그를 보내면 컴퓨터는 엄마라고 해석 할 수있도록 약속을  한 것입니다. 이 약속을 토대로 브러우저 상에서 우리가 필요한 것들을 화면으로 출력합니다.

태그와html의 정의

태그가 웹으로 구현되는 과정

 

● HTML은 어디서 쓰이나요?

HTML은 웹상에서 보여지는 모든 문서, 사이트 전체를 모두 포괄 하는 언어입니다. 홈페이지, 웹문서등 웹상에서 보여지는 모든 문서에 쓰입니다. 아주 포괄적이고, 광범위 하지요. 때문에 태그의 기본 정도는 알고 있어야 된다고 생각합니다.

오늘은 예스비™와 태그와 HTML의 개요에 대해 짧게 알아봤습니다. 다음 글 부터는 기본적으로 알아야 할 태그에 대해 본격적으로 정리하여 드릴께요.정리하는데 있어 부족한 부분이 있을지도 모르겠습니다. 전문 강사가 아니니 부족하더라도 너그럽게 이해해 주시기 바랍니다.

요약 정리:

1. HTML이란? "Hyper Text Markup Language"의 약자로 하이퍼 기능이 있는 마크업 언어란 뜻입니다.

2. 하이퍼 기능이란? 각각의 텍스트가 거미줄처럼 서로 연결되어 텍스트사이의 이동을 자유롭게 하는 것을 말합니다. 우리가 흔히 링크라고 부르는 것이 바로 이 기능이죠.

3. 태그란? 위에서 말한 마크업 언어를 쉽게 태그(Tag)라고 부릅니다.

4. 마크업이란? 원래 문서를편집하고 구성하기 위해 원고에 특정한 표식을 하는 것을 가리키는 말입니다. 즉, 원고의 교정 기호와 같은 것들을 말하죠. 그리고 마크업 언어란 이런 기호들을 체계적으로 통일 시킨 것을 말합니다.

- "HTML+CSS+ 자바스크립트 무작정 따라하기"에서 발췌

리뉴얼 관계로 부득이 HTML/CSS 튜토리얼글을 일부 수정하여 재 발행 하고 있습니다. 이미 이 글을 읽으 신분들은 복습 하신다고 생각하시고 읽어 주시기 바랍니다. 불편을 드린 점 양해 바랍니다. 또한 이 글부터 알라딘 창착블로그에 연재합니다. 웹디자인튜토리얼과 블로그에 관한 유용한 정보를 담을 예정입니다.제 강좌가 맘에 드셨나요? 맘에 드셨다면 강의료라 생각하시고 추천과 믹시 듬뿍 주시면 감사 하겠습니다.

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://boskim.tistory.com BlogIcon 털보아찌 2009.05.26 10:34 수 정 댓 글

      예스비 선상님!
      수업 잘받고 갑니다요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.26 10:50 수 정

        선상님까지는 아닌듯 한데요;;
        도움이 되셨다니 감사합니다.

    2. Favicon of http://youarethat.tistory.com BlogIcon 이리니 2009.05.26 19:48 수 정 댓 글

      왜 내 눈엔 제목이 '태클이란 무엇인가?'로 보였을까요? --;

      좋은 정보 잘 보고 갑니다. 좋은 저녁 맞으시길... :)

    3. Favicon of http://ludens.co.cc BlogIcon Ludens_ 2009.05.26 20:11 수 정 댓 글

      아... 글에 다는 태그가 아니였군요ㅎ

    4. Favicon of http://dreamnet21.tistory.com BlogIcon 김명곤 2009.05.26 20:42 수 정 댓 글

      태그, 스킨 수정....아이구 저한텐 어려워요. 혹시라도 실수해서 그나마 있던 것 다 날라갈까 겁도 나고...상중이라 검은 띠 두르고 상중 표시도 하고 싶은 데...아직 경황이 없고...언제 찬찬히 익힐께요. 좋은 정보 감사해요.^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.14 12:23 수 정

        어려워도 하나씩 따라 해보세요.
        모르는 부분은 제 메일로 따로 연락 주시면 답해 드릴께요.

    5. Favicon of http://lalawin.tistory.com BlogIcon 라라 윈 2009.05.27 00:45 수 정 댓 글

      수업료 추천 얼른 눌렀습니다~ ^^

    6. Favicon of http://kousa.tistory.com BlogIcon 미국얄개 2009.05.27 00:53 수 정 댓 글

      트랙백 걸어 놓고 갑니다.
      활기찬 한 주일 되세요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.14 12:13 수 정

        감사합니다.
        댓글이 늦어 짧게 답인사만 할꼐요.

    7. Favicon of http://2proo.net BlogIcon 2Proo 2009.05.30 14:15 수 정 댓 글

      살아왔습니다 ^^;
      강좌중이셧군요.. 흑...

    8. Favicon of http://0168265.tistory.com BlogIcon 미자라지 2009.06.11 03:59 수 정 댓 글

      전 태그를 잘 몰라요...ㅋ
      제길...공부는 이제 지겨운데...ㅋ
      인생이 공부 그 자체네요..^^ㅋ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.14 12:15 수 정

        공부 하다보면 잼있어요.
        그래서 뒤늦게 후회하니 학창시절에 열심히 하라고 하나봐요.
        내년에는 방통대를 다녀 볼까 생각 중이예요^^&

    9. yeoddi 2009.08.04 10:21 수 정 댓 글

      너무 좋네요,,,이런 곳이 있었다니,,감사합니다.

    10. Favicon of http://thinknow.tistory.com BlogIcon Channy™ 2009.11.17 08:17 수 정 댓 글

      와우~ 시간내서 예스비님의 다른 강좌글들도 다 읽어봐야겠다는 생각이 듭니다!
      좋은 정보 감사해요!

    11. Favicon of http://windlov2.tistory.com BlogIcon 돌이아빠 2009.11.17 09:54 수 정 댓 글

      저는 처음보는데요!
      예스비님의 연재글만 보면 저도 스킨 뚝딱! 만들어내는거죠?

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.18 10:56 신고 수 정

        이 전글이라 못 보셨을 수도
        돌이는 멀리서 잘 지켜보고 있습니다ㅋㅋ

    12. Favicon of http://loved.pe.kr/ BlogIcon 윤초딩 2009.11.17 10:13 수 정 댓 글

      좋은 강좌를 시작하시는군효~ 이제 머리가 굳어가서 다 까먹고 있는데 다시 한번 스~윽 봐줘야 겠어요~ 앞으로 강좌 기대하겠음 ^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.18 10:57 신고 수 정

        강좌는 이미 하고 있었지요^^&
        이전 글 재 발행 한것입니다.
        2차 주소때문에 데이터가 자꾸 누락되서요^^

    13. Favicon of http://realog.net BlogIcon 악랄가츠 2009.11.17 21:09 수 정 댓 글

      이제 강의 스타트인가요? ㄷㄷㄷ
      무척 기다렸답니다 >.<

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.18 10:57 신고 수 정

        강의는 벌써 하고 있었자나요!ㅋ
        데이터도 모두 복구 되었으니 이제...
        메타 서비스 글만 정리하면~~ 모든 리뉴얼이 완성 되지 않나 싶네요;

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool