HTML 기본 구조 태그에 대해 알아보기
드디어 오늘부터 시작입니다. 새롭게 배우기 시작한 웹퍼블리싱 수업을 정말 잘 들어서 마스터 할 수 있도록 노력하겠습니다. 시작이 반 이라고 하였으니 전 반은 성공한 샘이네요. ㅎㅎ HTML과 일반 텍스트 구성의 책(문서)의 차이는 바로 링크의 유무라고 배웠습니다. 듣고보니 맞는 말 이네요.
첫 시간에는 태그에 대한 내용을 배웠습니다. 태그라는 단어는 아마 많이들 들어보셨을 것 같습니다. html을 구성하는 기본 단위가 바로 태그입니다. 웹 언어라고 하는데, 태그를 사용해서 웹 페이지를 구성하게 됩니다. 태그는 무조건 들어가는 기본 단위라고 생각하시면 될 것 같습니다.
HTML 문서를 만드는 방법은 브라켓, 드림위버, 노트패드 등등의 프로그램을 사용하셔도 되지만, 윈도우 메모장으로도 충분히 작업할 수 있습니다. 다만 저장할 때 유의하셔야 하는 것이 메모장은 TXT가 기본 확장자이므로, 모두 지우고 반드시 파일명.html 로 저장하셔야 한다는 점 입니다.
메모장을 열어보세요. 그리고 HTML을 기본 구성하는 <html> 과 닫음을 뜻하는 </html> 을 작성해 봅니다. 이것이 가장 기본 구조 입니다. 항상 태그는 짝이 있습니다. 시작이 있으면 마무리가 있죠. 마무리는 슬레쉬가 늘 들어갑니다. </> 이렇게요.
<html> 태그 안쪽에는 머리를 의미하는 <head> 태그와 몸을 의미하는 <body>로 구성됩니다. 우리가 사람의 인상을 먼저 살펴보고 대충 이 사람에 대해서 파악을 하는 것 처럼, html에서도 <head> 안에 구성된 요소에 따라 그 성격이 부여된다고 보시면 됩니다. 헤드 태그 안에서 사용되어지는 대표적인 태그가 바로 <title> 태그 입니다. 바로 페이지의 제목을 정의하는 부분입니다. 바디 부분은 보통 본문을 구성하게 되는 부분으로 텍스트, 이미지, 동영상 등이 들어가는 부분입니다.
보시는 것 처럼 헤드태그 안에 <title> 태그가 들어간 모습입니다. 마찬가지로 마무리는 </title> 로 해줍니다. 또한 <head>와 </head>안에 타이틀 태그가 자리잡힌 모습을 확인할 수 있습니다. 모든 태그는 짝으로 이루어졌고 항상 어떤 태그 안쪽에서 자리를 잡아야 한다는 것을 뜻합니다.
이제 한글을 입력해 봅니다. 타이틀 태그 안쪽에 제목 이라고 글씨를 넣었고, 바디태그 안에 내용 이라고 글씨를 넣어봤습니다. 과연 html 페이지에서 어떻게 구성이 될까요?
이제 완성된 메모장 태그 구성들을 html로 저장하도록 합니다. 위에서 언급했듯, 메모장의 기본 확장자는 txt 이므로 다른이름으로 저장을 누르시고 파일 이름을 몽땅 지우세요. 저는 여기에서 basic.html 이라고 지정해서 저장을 했습니다.
저장된 페이지를 한번 더블클릭으로 열어보시면 보시는 것 처럼 제목이라는 텍스트가 웹페이지의 탭에 표시가 되어 있습니다. 그리고 본문은 내용이라고 텍스트가 출력된것을 확인하실 수 있습니다.
여기까지 HTML 기본 태그 사용법을 알아봤습니다. 점점 난이도가 올라가겠지만 열심히 배워서 모든것들을 다 작성해 보도록 하겠습니다. 복습하는 의미에서 글을 작성하니까 확실히 제 입장에서는 도움이 많이 됩니다. 훗날 까먹으면 이 글을 보고 다시 기억을 되살릴 수 있으니 참으로 좋습니다. HTML 관련해서 공부를 막 시작하신 분들에게도 도움이 되길 바라며 다음시간에 뵙도록 하겠습니다. 관련글은 아시다시피 페이지 맨 아래에 링크해 두도록 하겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
