생초보 관점으로 HTML의 기본 구조인 문서의 기본 구조인 <head>와 <body> 태그는 무엇인지 그리고 어떻게 쓰이는지에 대하여 알아보고 온라인 HTML 무료 연습장에 작성하여 웹 문서인 HTML 문서에 어떻게 표현이 되는지 확인해 보았습니다.
HTML[Hypertext Markup Language]이란?
월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류이다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지가 HTML을 통해 작성된다.
HTML은 문서의 글자크기, 글자색, 글자 모양, 그래픽, 문서 이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠 괄호"<>"를 사용하여 나타낸다.
일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작 태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다.
이와 같이 HTML로 작성된 문서를 HTML 문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다.
HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.
[네이버 지식백과] HTML [Hypertext Markup Language] (두산백과)
HTML 코딩의 기초
<head>와 <body> 태그의 의미는?
초보이긴 하지만 블로그를 운영하려 보니 HTML을 모르고는 안 되겠다 싶은 생각이 들어서 조금씩 검색하면서 블로그의 스킨 편집과 글쓰기를 통해 예제 연습을 하고 있습니다.
블로그 스킨은 기본적으로 전문가 분들의 커스텀 스킨과 티스토리 기본 스킨이 잘 되어 있어 딱히 문제 될 것은 없는데, 글쓰기에서는 HTML을 사용하여 글을 작성하는 것과 기본 글쓰기를 하는 것에 대한 가독성 차이와 검색 서비스에서 정보 수집에 따른 노출 여부가 결정될 수 있을 것 같아 기초적인 것만이라도 익혀두면 잘 써먹을 수 있습니다.
또한 기본 틀에서 벗어나서 나만의 블로그를 운영하고 싶다면 HTML은 물론 더 나아가서 CSS의 기초까지는 익혀두는 것이 좋습니다.
HTML 기본 구조
HTML 문서의 기본 구조는 <html>, <head>, <body> 태그로 단어와 같이 머리와 몸으로 이루어져 있습니다.
| <html>, </html> | HTML 문서임을 알리는 태그 |
| <head>, </haed> | 웹 페이지에 표기가 되지는 않지만 중요한 정보 (검색 서비스를 위한 문서의 제목과 문서를 이루는 기본적인 양식 등) |
| <body>, </body> | 웹 페이지에 표기되는 내용 (글과 이미지, 링크, 광고 등) |
HTML 문서는 반드시 시작을 알리는 태그와 내용의 끝을 알리는 태그를 작성하셔야 하며, 작성방법은 "내용"을 기준으로 안쪽부터 시작된 태그를 끝 마치면서 HTML 문서를 작성하셔야 합니다.
티스토리 블로그의 HTML 글 작성 시 에디터 자체로 오류 코드를 빨간색으로 표기를 해주고 있으니 쉽게 오류를 확인하실 수 있습니다.
단, 주황색으로 표기된 일반 코드와 색상 차이가 크지 않다는 게 함정이긴 합니다.
1번 태그 시작 → 2번 태그 시작 → "내용" → 2번 태그 끝 → 1번 태그 끝
HTML 예제 연습장
“아래 링크에 연결하시면 무료로 HTML을 연습하실 수 있습니다.”
HTML 온라인 무료 연습장 링크 : https://www.w3schools.com
W3Schools Online Web Tutorials
HTML Example:
www.w3schools.com
사이트에 연결하시면 아래 그림과 같이 별도의 회원가입 없이 "Try it Yourself" 버튼을 클릭하여 연습장으로 이동하여 사용이 가능합니다.
좌측 입력창에 HTML 태그를 코딩하여 작성하신 후 상단의 "Run" 버튼을 클릭하시면 우측 창에 반영 내용이 활성화됩니다. 그리고 HTML 태그를 코딩할 때 오류가 발생할 경우 태그 색상이 갈색에서 빨간색으로 변하여 오류의 위치를 확인할 수 있으니 참고하시기 바랍니다.
'블로그 이야기 > 알아두면 쓸만한 HTML Coding' 카테고리의 다른 글
| 애드센스 반응형 사각 광고 2개 배치 html 코드, CPM 수익 극대화 (2) | 2024.07.06 |
|---|---|
| 마우스 드래그 차단 우클릭 금지 html 코드, 블로그 포스팅 불펌 방지 (0) | 2024.07.01 |
| 움직이는 로딩 이미지 반영을 위한 html 코드 (0) | 2024.06.08 |
| HTML 코딩 기초 <div> <p> <span> 태그의 차이점은? (0) | 2024.06.06 |