퐌다의 HTML 강좌
초보도 만들 수 있는 블로그 스킨 제작 가이드!! 1탄, HTML이란 무엇인가?? -웹 문서편-
퐌다
2011. 4. 4. 22:51
|
|
인터넷 웹서핑을 하다보면 각종 홈페이지 및 블로그를 볼 수 있습니다. 그중에는 누가 봐도 잘 만들었다 할 수 있는 웹 페이지들이 있는데요... 그런 것들을 보다 보면 자연스레 나도 한번 만들어 볼까?? 라는 생각을 하게 됩니다... 하지만 막상 시작하려고 하면 어디서부터 들이대야 할지 막막한게 현실이더군요... 저도 블로그를 운영하기로 결심하고 어렵게 티스토리 초대장을 받아 블로그를 개설하고 티스토리에서 제공하는 스킨으로 블로그를 꾸몄드랫죠... 그런데 작업을 하다보니 제가 생각했던 블로그 스킨이 존재하지 않는 겁니다!! 난감했죠... 나는 이렇게 만들어보고 싶은데 스킨은 없고... 내가 만들자니 아는건 하나도 없고... 웹상에 돌아다니는 공개 스킨을 쓰자니 그것도 맘에 안들고... 그래서 고심 끝에 시간이 걸리더라도 직접!! 만들어 보자는 결론을 내렸드랬죠... 초반에 시행착오를 조금 격었지만 이렇게 저렇게~ 요렇게 죠렇게~ 독학으로 공부하며 시험삼아 소스를 이리 저리 굴려보니 요게 신기하게도 되는 겁니다!! 처음에는 무슨 말인지 도무지 몰라 포기하고 싶고 그냥 티스토리에서 주는 스킨을 그대로 쓸까라는 생각도 했었습니다만!! 그래도 시작하면 끝을 보는 성격이다 보니 끝까지 물고 늘어졌죠... 그래서 탄생한게 지금의 블로그 스킨 입니다... 뭐... 아직도 허접하고 공사를 진행하는 중이지만 처음 시작할 때를 생각하면 장족의 발전이 있었죠... '인내는 쓰고 열매는 달다' 라는 말이 있듯이 처음 아무것도 모를 때는 몇일씩 머리를 싸매고 고생을 했지만 어렵사리 블로그 스킨을 만들고 보니 열매는 정말 달다는 것을 느끼고 있습니다~ 이렇게 열매의 단맛을 몸소 체험해보니 여러분들께도 이 달콤함을 전해드려야겠다 싶어서 제가 직접 몸소 체험한 HTML 문서 제작 방법을 강좌로 시작해보려고 합니다 __) 처음 아무것도 모를 때를 생각하며 아~주~~ 쉽게 풀이해서 설명해드릴테니 낙오하지 마시고!! 마지막 강좌까지 찬찬히~ 따라 오시기 바랍니다!! |
원론적인 얘기일지 모르지만 홈페이지나 블로그 스킨을 제작하기 위해서는 HTML 이란 놈이 무슨 뜻인지 짚고 넘어가야 할 필요성이 있습니다... 우선 사전적으로 말씀 드리자면...
말이 조금 어려운가요?ㅎ 좀 더 쉽게 설명 드리자면... HTML 이란 Hyper Text Markup Language 의 약자로써 Language(언어) 라는 말에서 알 수 있듯이 무엇인가를 서로 주고 받으며 대화하기 위해 사용되는 언어 입니다. 그러면~ 그 언어라는게 무엇인고 하니!! 인터넷 상... 즉, 저희가 흔히 사용하는 월드와이드웹(www) 에서 볼 수 있는 문서를 만들기 위해 사용하는 일종의 '표준언어' 인 것입니다... 로마에 가면 로마의 법칙(언어)을 따르고... 한국에 가면 한국의 법칙! 즉, 표준어로 서울말을 쓰듯이... 인터넷 상에서 좀 더 빠르고 제대로 된 의사소통을 위해 만든 언어규약이 HTML 이라는 것이죠... 전세계에 80억명 이상의 사람들이 각자 자신만의 방법으로 웹문서를 만들어 여러사람들과 소통하기를 바란다면 아마 인터넷이라는 매체는 우리 생활에 깊게 자리잡지 못했을 것 입니다. 이를 예방하기 위해 언어를 규약으로 정한 것이죠... 그리고 언어에만 그치는 것이 아니라 '그다음의' , '초월한' 의 뜻을 가진 Hyper 라는 개념이 더해져 하나의 웹문서를 다른 웹문서로 링크(연결)하여 여러가지 정보를 복합적으로 습득 할 수 있게 해놓은 것이 HTML 이라 볼 수 있습니다.
HTML 문서는 마크업(Markup) 언어로 구성되는데요... 마크업 언어는 일반적인 텍스트 형식에서 문서 중간 중간에 문자나 문장의 형태에 대한 명령 표식(Tag)을 덧붙임으로써 문서의 논리구조나 체제와 같은 문서의 서식 작성을 지정 합니다. 이로인해 우리는 좀 더 깔끔하고 정갈한 웹문서를 볼 수 있게 되는 것이죠... 그리고 이 마크업 언어는 HTML 문서 작성시 간단한 영문 태그로 첨가되어 텍스트 형식으로 저장되기 때문에 파일 용량이 매우 작아서 서버와 클라이언트(사용자) 사이에 전달되는 문서로 적당하게 구성되어 있습니다. 즉, 용량이 작아서 상당히 빠르게 전달되며 간단한 표시 형식에 비해 놀라운 기능을 가지고 있는 것이죠...
ASCII코드(아스키 코드)는 미국표준협회가 데이터 처리 및 통신시스템 상호간의 정보교환용 표준 부호로 제정한 것으로 아스키 부호라고도 합니다. 데이터 처리와 정보시스템 상호간의 정보교환용으로 정한 표준코드로서, 영어를 사용하는 대부분의 정보기기에서 사용되고 있는데요... 쉽게 말하면... 저희가 사용하는 키보드 위에 있는 대문자, 소문자의 알파벳, 숫자, 기호, 제어부호 들을 컴퓨터가 이해할 수 있는 8비트의 이진수로 코드화한 것이죠... 현재 미니 컴퓨터나 퍼스널 컴퓨터에서 이 부호체계를 채용하고 있으므로 저희가 작성하는 모든 글들이 아스키 코드라고 보시면 됩니다. 이해 가셨는지 모르겠네요 ㅠ HTML 문서작성은 HTML 문법을 알기만 하면 시중의 어느 텍스트 편집기를 이용하여도 작성할 수 있는데요... 자신에 가장 익숙한 문서 편집기를 선택하는 것이 좋으며 또한 되도록 스크린 에디터로서 한글을 사용하는 데 문제가 없는 문서편집기를 선택하면 됩니다. 요즈음은 HTML 문서를 더욱 편리하게 작성할 수 있는 HTML 전용 에디터도 많이 등장하고 있습니다. 윈도우에서 제공하는 메모장을 이용할 수도 있으며, 아래한글 워드프로세서에서는 문서를 저장할 때 아스키 파일 완성형을 선택하면 됩니다.
기존 문서들은 특정한 운영체제나 프로그램에서만 사용할 수 있도록 그 용도가 국한되어 있습니다. 예를 들어 아래한글 워드프로세서에서 작성한 문서는 아래한글에서만 불러 들일 수 있어 매우 불편합니다만... HTML로 작성된 문서는 어떤 컴퓨터 기종의 어떤 브라우저에서든지 원래 작성한 모습으로 보여줄 수 있습니다.
HTML 문서는 자신이 말하고 싶은 내용을 담은 일반적인 텍스트(문서)나 그림, 동영상과 같은 정보와 이 내용들의 위치와 표현 방법을 지정해주는 태그, 문서의 운영상에 도움을 주는 스크립트로 구성되어 있습니다. 스크립트는 간단한 명령들의 집합으로, 본격적인 프로그래밍 언어에 비하면 간단한 사용법과 쉬운 문법을 가지고 있으며, HTML4.0 에서는 스크립트를 HTML 규약의 일부로 인정하고 있습니다.
HTML 로 작성된 문서가 저희에게 보여지는 방법을 간단하게 설명 드리자면... 자신이 만든 HTML 문서가 저장되어 있는 컴퓨터에서 그것을 보고자 하는 컴퓨터에게 익스플로러와 넷스케이프와 같은 브라우저를 통해 전송되어 우리들에게 보여지는 것인데요... HTML 문서를 가지고 있는 컴퓨터를 서버 즉, '웹서버'라 하고, 웹 서버에 접속해서 HTML 문서를 보고자 하는 컴퓨터를 '클라이언트 컴퓨터'라고 합니다. 자신의 컴퓨터로 웹 서버의 주소를 브라우저에 입력한 후 필요할 때 원하는 결과를 웹 서버를 이용해 컴퓨터로 가져옵니다. 이때 브라우저의 역할은 HTML 문서를 해석해서 보여주는 것이지요... |
HTML 문서는 다음 4가지 종류의 코드들의 집합체 입니다.
요소란 태그에 포함된 가장 중요한 부분을 말하는 것으로, 태그의 의미를 결정하는 역할을 합니다. 시작태그와 종료태그를 가질 수 있으며 태그사이에 텍스트나 다른 요소를 가질 수 있습니다. 예를 들어 <TITLE>, <BODY>는 태그인 반면에 TITLE이나 BODY는 요소라고 부룹니다. <IMG>처럼 시작태그만 있는 요소도 있습니다.
태그란 "<"기호와 ">"기호로 둘러 쌓인 문서의 중간에 붙여주는 일종의 꼬리표입니다. 태그에는 시작태그와 종료태그 두 종류가 있습니다. 시작태그는 요소를 시작하며 종료태그는 요소를 끝냅니다. 물론 모든 요소들이 종료태그로 끝나는 것이 아닙니다. 예를 들어 <TITLE>로 시작한 제목요소는 </TITLE>라는 종료태그를 갖는 복합태그이지만, 앞에서 말씀드린 데로 이미지 요소인 <IMG>는 종료태그를 갖지 않는 단독태그입니다.
속성은 요소의 시작태그 내에 사용하는 것으로 명령을 구체화시키는 것입니다. 예를 들어 텍스트의 폰트 지정을 위해 사용하는 <FONT>....</FONT>요소는 SIZE, COLOR, FACE 등의 속성을 갖습니다. <FONT SIZE = 5>처럼 시작태그 내에 사용되며 속성과 변수사이에는 "="라는 부호를 사용하여 연결합니다. 속성은 보통변수를 갖지만 NOSHADE 등 일부 속성은 변수를 갖지 않습니다.
변수는 속성과 관련된 값을 말 합니다. <BR CLEAR = "left">에서 " "내에는 right나 all도 사용될 수 있는 데, 이들은 속성 CLEAR의 변수이며 속성과 변수는 등호(=)에 의해 구분됩니다. 변수 중에는 변수를 " "내에 넣는 것과 SIZE = 5처럼 넣지 않는 것이 있으므로 속성마다 사용여부를 잘 알아두어야 합니다. |
나름대로 쉽게 설명한다고 적었는데 의미가 제대로 전달 되었는지 모르겠네요... 지금은 조금 어려우실 수 있지만 계속 하다 보면 익숙해지실거라 믿습니다~ 이번 강좌에서는 HTML 문서의 대략적인 구성에 대해서 알아보았는데요... 바로 실전 예제로 설명드리면 좋겠지만 기본적인 이론은 필수적으로 알고 가야하는 사항이기에 지루함을 무릎쓰고 몇자 적어보았습니다. 다음 강좌에서는 HTML 문서의 기본 구조를 실전 예제를 통해 알려드리고자 합니다. 낙오하지 마시고 다음 강좌까지 파이팅 하시기 바랍니다!! 아자!! __) |
