컴퓨터공부
기본 HTML태그와 웹문서 구조 살펴보기 본문
기본 HTML태그와 웹문서 구조 살펴보기
2020. 9. 11. 12:13기본 HTML태그와 웹문서 구조 살펴보기
- 머리와 몸통
맨 아래에 두 가지 링크에 정리해 둔 글들을 먼저 본 뒤 여기까지 오셨다면 아주아주 기초적인 개념은 장착하고 공부에 임하시리라 생각된다. 오늘은 웹문서의 기본적인 구성인 어떻게 되는지 그리고 약간의 태그와 관련된 설명글이라 할 수 있다. 내가 사용할 소스들이 길던 짧던 상관없이 HTML태그를 비롯한 웹문서는 반드시 생략되는 부분없이 철저하게 입력해야한다. 일단은 웹문서는 사람의 몸위에 머리가 있듯이 <head> </head> <body> </body> 순서로 흘러간다. 여기서 헤드는 여러 브라우저들에게 이 문서에 대한 제목,정보,공유등을 해주는 역할이라고 할 수 있으며 바디의 부분은 HTML태그 헤드부분에서 표시한 내용물이 들어가는 역활이라고 볼 수 있다.
웹문서를 만들기 위해서는 다양한 tag들을 마크업 해주어야 하는데 단순히 스펠링을 적으면 되는 것이 아니라 명령어의 앞과 뒤를 "<>" 기호로 시작과 끝을 명확하게 해주어야 한다. 즉 문서를 "시작"하는 기능을 사용하기를 원하는 경우에는 <시작>이라 입력 후 여러 코딩 단어들을 질서 있게 입력한 후에 명령의 "끝"을 내는 기능을 사용할 때는 <끝>이라는 단어를 입력해 주어야 하는 것이라고 볼 수 있다. 즉 웹문서를 작성할 때 <시작>과 <끝>의 기능은 한 세트인 셈 인다. 뒤에 들어가는 명령어에는 "/" 슬러시 기호를 추가로 입력해주어야 하며 , 모든 HTML태그에 사용되는 영어는 반드시 소문자로 입력해주어야 한다.
- 시작을 알리는 doctype
웹문서를 만들기 이전에는 doctype 단어와 관련된 기능을 활용해야 한다. 이 기능은 이 파일은 웹문서라는 것을 웹 브라우저에게 알리는 기능이라고 볼 수 있다. 공문이라고 이해하면 편하다. 예전 html4를 이용할 때에는 이런 공문을 알리는 방법들이 좀 더 다채롭게 있었지만 현재 표준 html5를 이용하여 만드는 문서의 경우에는 간단하게 <! doctype>라는 기능을 가장 먼저 작성해주면 되는 것이고 이 명령어는 웹브라우저에게 네가 보여주려 하는 이 파일은 html이라는 것을 인식시켜준다. 이 명령이 끝나면 한국어로 표시되길 원하는 <html lang="ko">를 입력했다고 가정하면 브라우저는 이 문서를 보았을 때 아 이것은 html문서이며 한국어로 표시하면 되겠구나 하며 인식하게 되는 것이다. 다음으로는 영어를 기반으로 하는 웹문서이기에 문자 인코딩에 신경을 써줘야 하는데 , 가장 많이 이용되는 utf-8 기능을 doctype, ko 언어 입력 이후 head태그를 시작하면서 입력해 주면 된다.
- 나를 알리는 title
다음으로 들어가야 하는 HTML태그로는 바로 title이 아닐까 싶다. 즉 제목이라고 할 수 있다. doctype는 엄밀히 말하면 태그는 아니지만 title의 경우에는 태그 기능이기에 가장 먼저 설명한 "</>" 기능을 활용하여 반드시 시작과 끝을 알려주어야 한다. 즉 나의 블로그 제목이 컴퓨터 공부라면 <title> 컴퓨터 공부 </title>이라는 형식으로 적어주어야 한다는 것이다. 아무래도 웹사이트를 방문해주는 이들에게 이곳이 어떤 주제로 돌아가는 곳인지를 인식시켜주어야 하기에 반드시 사용되어야 하는 기능 중에 하나이며 , 이때는 최대한 함축적이면서도 보는 이로 하여금 단번에 이곳이 어떤 콘텐츠를 생성하는 곳인지 이해할 수 있는 단어를 적어준다면 좋을 것이다. 즉 이번 글에 적었던 내용들을 잘 정리해보자면 먼저 이 문서는 웹문서임을 선언해주며 한국어로 표시 및 인코딩할 것을 뜻한다. 다음은 이곳은 특정 어떠한 "주제"를 가지고 운영되는 곳을 방문자에게 알리겠다는 준비가 끝났셈이라고 할 수 있을 것이다.
'HTML,IT' 카테고리의 다른 글
| 파일질라 설치 밋 서버 설정하는 순서정리 (0) | 2020.09.14 |
|---|---|
| 비주얼 스튜디오 코드 설치순서와 PC운영체제 확인방법 (0) | 2020.09.13 |
| 닷홈 무료 도메인 호스팅 사용하는 방법과 순서 (0) | 2020.09.12 |
| 웹브라우저 종류와 웹편집기에 대한 개념이해 (0) | 2020.09.10 |
| HTML기초와 필요성에 대하여 (0) | 2020.09.09 |
