웹(Web) 문서인 HTML의 기본 구조 태그인 <head>와 <body> 태그는 무엇을 의미하는지?
블로그 또는 홈페이지(웹페이지)에 적용된 HTML 문서의 구조를 파악하는 방법과 한발 더 나아가 온라인 무료 HTML 문서 연습장에 태그를 작성하고 웹 브라우저에서 어떻게 표현이 되는지 확인해 보겠습니다.
HTML 문서의 head와 body 태그의 구조 이해하기
HTML 문서란 무엇인가?
HTML [HyperText Markup Language]
웹 브라우저를 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류이다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"< >"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다.
HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.
- 네이버 지식백과 -
HTML 문서는 기본 골격 구조인 html, head, body 태그로 이루어져 있으며, 단어의 뜻과 같이 head(머리)를 지칭하는 문서의 전체 양식 부분과 body(몸)을 지칭하는 문서의 제목과 본문 부분으로 이루어져 있습니다.
위 그림에서 HTML 문서의 가장 상단에 위치한
<html> 태그는 HTML 문서임을 알리는 태그로 별도의 내용을 포함하지는 않습니다.
<head> 태그는 웹 페이지에 표기가 되지는 않지만 중요한 정보를 작성하는 부분으로 검색 서비스를 위한 문서의 제목과 문서를 이루는 기본적인 양식 등을 작성할 수 있습니다.
<body> 태그는 웹 페이지에 표기되는 내용으로 제목과 글, 이미지, 링크, 광고, 버튼, 글 목록 등의 서식과 내용을 작성할 수 있습니다.
HTML 문서의 구조를 파악하기 위해서는 시작을 알리는 태그와 끝을 알리는 태그를 알아야 합니다. 다행히 쉽게 확인이 가능하게 즉흥적으로 표현이 되며, 다음과 같이 <태그 명령어> 작성 내용 </태그 명령어>로 작성합니다.
“태그 명령어 시작과 끝을 알리는 예시”
<html> 시작 태그, </html> 마침 태그
<head> 시작 태그, </head> 마침 태그
<body> 시작 태그, </body> 마침 태그
HTML 무료 예제 연습장
🔗 W3Schools Online Web Tutorials
위 링크를 클릭하시면 무료 HTML 연습장 홈페이지로 이동합니다.
홈페이지로 이동 후 별도의 회원가입 없이 아래 그림과 같이 "Try it Yourself" 버튼을 클릭하시면 html 연습장으로 이동하게 됩니다.
위 그림과 같이 HTML 연습장 페이지로 연결이 되었다면 좌측의 1번 창에 html 태그와 내용을 작성하시고 상단의 "Run" 버튼을 클릭하게 되면 우측의 2번 창에 웹 브라우저에 어떻게 표현이 되는지 확인하실 수 있습니다.
혹시 1번 창의 html 태그의 작성이 오류가 있을 경우 태그의 색상이 갈색에서 빨간색으로 변화하여 오류의 위치를 알려주는 기능이 있으니 쉽게 확인하고 수정할 수 있습니다.
여기까지 HTML 문서의 구조를 이해하고 HTML 무료 연습장을 통해 어떻게 표현이 되는지까지 확인해 보았습니다.
0 comentarios:
댓글 쓰기