2020. 8. 21. 01:13ㆍ웹개발 기초과정/HTML
지금까지는 문법을 배웠다고 생각하면 된다.
말하자면 문장을 만드는 법을 배웠다고 할 수 있습니다.
문장이 모이면 페이지가 되고 페이지가 모이면 책이 됩니다.
책에는 표지가 있고 표지에는 제목과 저자가 표기됩니다.
이처럼 정보가 많아짐에 따라 정보를 잘 정리하기 위한 체계 다시 말해 구조라는 것이
필요한데 이번에는 구조를 만드는 것을 알아보겠습니다.
지금까지는 언급을 안 했지만 빈도수가 가장 높은 임원급의 태그를 알려드리겠습니다.
그림을 보면 빈도수가 가장 높은 태그가 있는데
html , head , dody , title , mata 총 5개의 태그가 있습니다.
1. title
웹 페이지의 탭 부분을 보면 제목 또는 타이틀이 이거나 사이트의 이름이 적혀 있는 것을 볼 수 있다.
하지만 우리가 지금까지 만든 웹 페이지의 탭을 보자면 너무도 보잘것없이 적혀 있다.
그래서 우리는 지금부터 title 이란 태그를 사용해 탭의 제목을 바꾸어 보자.
웹 페이지의 탭 이름은 "태극기"라고 표시되도록 만들어 보자.
코드 : <title> 탭의 제목 </titel>
<아톰으로 코드 작성>
<새로 고침 후 화면>
코드를 작성 후 새로고침 하게 되면 탭 부분의 제목이 바뀌어 있는 것을 확인할 수 있다.
<title> 이란 태그를 사용하게 되면 사용자에서 제목을 알려줄 수 있을 뿐만 아니라 검색엔진과 같은 기계들은
책으로 치면 책 표지와 같은 정보로 사용한다.
그렇게 때문에 웹페이지를 만들 때 <title>이란 태그를 사용하지 않는 것은 굉장한 손해이다.
2. meta
HTML 문서의 <head>와 </head> 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다.
meta 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.
- name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
- http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
- charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
- itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.
네 가지 유형 중에 charset이란 특성을 지정할 건데 char은 문자 set은 규칙이란 뜻이다.
웹 문서의 경우 한글이 인식이 안되는 경우도 있는데 여기에 새로운 규칙을 정해주면 해결이 된다.
코드 : <meta charset="utf-8">
여기서 말하는 utf-8은 컴퓨터가 한글문서를 인식할 수 있게 해 준다 라고 간단하게 생각하자.
3. 본문과 본문을 설명
예를 들어 <title>이란 태그는 본문의 제목이 무엇인지 설명을 하고 있고 <meta charset="utf-8">이란 것은
본문이 utf-8이란 방식으로 저장이 되어 있습니다. 라고 말하고 있다.
html을 만든 사람들은 본문을 <body>라는 태그로 묶기로 약속 했습니다.
여러분은 그렇게 해야 합니다.
이것은 자연의 법칙이 아니라 사람과 사람 사이의 약속입니다.
그리고 본문을 설명하는 즉 <body>를 설명하는 태그는 <head> 태그로 묶기로 약속을 했다.
즉 html의 모든 태그는 <head> 태그 , <body> 태그 둘 중 하나 아래에 놓이게 됩니다.
그리고 이 두 태그보다 더 높은 가장 고위층의 태그가 있는데 바로<html>입니다.
그리고 <html> 태그 위에다가 관용적으로 <! DOCTYPE html>이라고 써주면 됩니다.
