퐌다의 HTML 강좌
초보도 만들 수 있는 블로그 스킨 제작 가이드!! 2탄, HTML 문서 만들기 - HTML 구조 분석 및 실전 예제 -
퐌다
2011. 4. 7. 01:17
|
|
안녕하세요~ 여러분들이 기다리시던 HTML 문서 만들기 두번째 시간이 찾아왔습니다~ 짝짝짝~
저 혼자만 기쁜건 아니겠죠? ㅎ...
지난 시간에는 1회차 강좌로 HTML 이 무엇인지에 대해 간략하게 알아보았습니다.
못보신 분들을 위해 링크 걸어드릴테니 궁금하신 분들은 한번 둘러보고 오시기 바랍니다~
초보도 만들 수 있는 블로그 스킨 제작 가이드!! 1탄, HTML이란 무엇인가?? -웹 문서편-
옛말에 시작이 반이라고 했습니다...
고로~! 지금 제 글을 읽고 계시는 여러분들은 이미 반 이상을 하신 것이죠~
어때요? 막 힘이 나시죠?ㅎ
앞으로 제 강좌가 얼마나 길어질지는 모르겠지만 이미 반이나 하신 여러분들은 성공하신 겁니다.
그리고 저를 통해 나머지 반도 알아가신다면 더할나위 없이 좋은 일 아니겠습니까?
저만의 생각인가요?ㅎ
아무튼, 너무 욕심 & 조급해하지 마시고 천천히 릴렉스한 마음으로
이번 강좌를 따라오시면 되겠습니다.
HTML 문서의 기본구조 알기HTML 문서의 기본 구조는 머리글(Heading)과 본문(Body)으로 나누어 집니다.
머리글은 문서의 제목(Title)을 적고 본문은 문장의 실제 내용들이 들어가게 됩니다.
아래에 그 기본형태를 한번 나타내봤습니다.
<HTML> : HTML 문서 지정
작성된 문서가 HTML로 작성되었다는 의미를 가지고 있으며,
앞으로 사용할 모든 태그는 <HTML>과 </HTML>사이에 들어가야 합니다.
<HEAD> : 문서의 머리글
보여주는 문서의 제목을 작성하는 부분으로 <TITLE>...</TITLE>태그와 함께 사용합니다.
이곳에는 문서의 내용을 가장 잘 나타낼 수 있는 짧고 명료한 단어나 문장을 입력합니다.
여기서 입력한 제목이 웹 브라우저의 화면 상단의 [제목표시줄]에 표시가 되기 때문이지요...
여러분이 지금 보고 계시는 인터넷 화면의 맨 위쪽 파란색 테두리 안을 보시면
한글로 제 블로그 제목과 이 글에 대한 제목을 확인 하실 수 있을 것입니다.
이것이 바로 <HEAD> 안에 삽입된 문구가 나타나는 것이지요...
<BODY> : 문서의 본문
표현하고자 하는 모든 문서들이 나열되는 곳으로 홈페이지의 내용을 전부 포함한다고 할 수 있습니다!
어때요? 참 쉽죠~~? 어려운 부분이 있으면 댓글 남겨주세요~
HTML 문서 작성해 보기 지난 강좌에서도 말씀 드렸듯이 HTML 문서를 작성하기 위해서는
편집기(Editor)가 필요한 데, HTML 문서는 ASCII모드를 지원하는 텍스트로 된 문서이기 때문에
흔히 우리가 사용하는 워드프로세서나 메모장을 이용할 수가 있습니다.
혹시, ASCII (아스키)가 무엇인지 모르는 분들은 지난 강좌에 제가 설명해놓은 글을
보고 오시면 되겠습니다 __) 다시 쓰기 귀차니즘으로 인해...ㅠ
그럼 저는 HTML 문서를 작성하기 위해 윈도우에서 기본적으로 내장하고 있는
가장 간단한 문서편집기인 메모장을 이용하여 문서를 작성해 보도록 하겠습니다~
그러면, 메모장을 클릭하세요. 메모장이 어디있는지 모른다고요?
메모장은 윈도우의 [시작]단추를 클릭해서 [프로그램]-[보조프로그램]-[메모장]메뉴를 선택하시면 됩니다.
자! 이제 [메모장]에서 아래와 같이 HTML문서를 작성해 볼까요?
참고로 HTML 문서작성시 알파벳 대소문자 구분은 없습니다.
그리고 위에 있는 (< >, </>)를 태그(tag)라고 하며 태그에는 기본적으로 시작과 끝이 있습니다.
종료태그에는 기본적으로 "/"기호를 붙여 줍니다. 단독으로 쓰여지는 태그도 물론 있습니다만
그것은 나중에 공부하며 익혀 가도록 하겠습니다...
위의 내용을 전부 입력하셨다면 메모장에 작성된 내용을 저장해 보도록 하겠습니다.
바탕화면에 바로 저장해도 되지만 여러분이 공부하기 편하게 HTML 이라는 폴더를 만드시고
그 안에 "index.html" 이라는 파일명으로 저장하시기 바랍니다.
여기서 가장 중요한 부분은 저장시 파일명 뒤에 확장자를 꼭 html 이나 htm 으로 하셔야 된다는 것입니다.
많은 분들이 여기서 실수를 하시는데 확장자를 제가 말씀드린데로 하지 않으면...
웹 브라우저에서는 절대 제대로 된 문서를 읽어오지 못한다는 것이지요...
그리고 또 하나 유의해야 할 사항은 [메모장]에서 문서를 작성하고 저장하기를 누르면
[파일형식]이 [텍스트 문서]로 되어 있기 때문에 확장자가 txt 로 나타납니다.
그래서 저장시 [파일형식]을 [모든파일]로 바꾸어야 확장자를 "html" 또는 "htm" 로 바꾸어 저장 할 수
있습니다. 이부분은 기초적이면서도 잘 놓치는 부분이니 꼭 유념하시기 바랍니다.
웹 브라우저로 문서 불러오기저장된 문서를 인터넷으로 확인하기 위해 바탕화면에 있는 "Internet Explorer" 실행하시기 바랍니다.
실행 후 [파일]-[열기]-[찾아보기] 에서 여러분이 저장해놓은 파일 경로를 찾아 "index.html" 을 불러오면
아래와 같이 "HTML 문서의 기본 구조 익히기" 라는 문구가 웹상에 나타날 것입니다.
글을 마치며...지금까지 HTML 문서의 기본구조를 나타내주는 기본태그에 대해 알아봤습니다.
어떻게 쉽게 설명드렸는지 모르겠네요...
워낙 글 재주가 없다보니...ㅠ
아무튼, 오늘 강좌는 여기까지 입니다...
다음 강좌에는 좀 더 심도 깊은 글꼴 태그에 대해 공부해 보도록 하겠습니다.
백문이불여일견 이라는 말이 있듯이 제가 알려드린 내용을 눈으로만 보지 마시고
직접 손으로 입력해보시고 실행해보시기 바랍니다~
그래야 실력이 느는 것을 몸소 체험하실 수 있을 것입니다.
그럼 다음 시간에 뵙도록 하겠습니다...