HTML 의 머리에는 어떤 태그들이 들어가는지 알아보자.
<title> Tag
<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.
-
무조건 문자열만 작성 가능하다.
-
<head>내에 딱 하나만 있어야 한다.
위처럼 브라우저에서의 탭 제목을 지정한다.
검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이다.
검색 결과에서 잠재적 독자의 주목을 끌 수 있는 가장 큰 요소가 바로 제목인 것.
물론 어그로성 제목은 잘못된 것이지만.. 그만큼 제목을 잘 작성하는 것이 중요하다.
-
단어로만 제목을 구성하는 것은 피하자.
-
"키워드 뭉치" 스타일의 제목은 피하자.
-
본문의 전체적인 내용을 담는 간략한 설명으로 작성하자.
위는 SEO(검색 엔진 최적화) 의 기본 내용이다.
출처 : https://ko.wikipedia.org/wiki/검색_엔진_최적화
<meta> Tag
<meta>: 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
-
빈 요소이다.
--> 속성으로 구성된다! -
이름을 담당하는
name과 값을 담당하는content속성으로 구성된다. -
여러 개일 경우
<meta>태그를 여러 개 사용한다.
속성들
-
application-name: 웹 페이지에서 구동 중인 애플리케이션의 이름. -
description: 검색 시 나오는 페이지 설명 부분.
Firefox, Opera 등에서는 즐겨찾기의 기본 설정 값 -
keywords: 해시태그같은 키워드 목록. -
name="viewport": 뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용한다.
웹 사이트 렌더링에 사용된다. (크기 조절)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
<link> Tag
<link>: 현재 문서와 외부 리소스의 관계를 명시한다.
-
스타일 시트를 연결할 때 제일 많이 사용한다.
-
사이트 아이콘("파비콘") 연결 등 여러가지로 쓰일 수 있다.
Example
<link href="style/main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
type
- 이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용된다.
특성의 값은 text/html, text/css와 같은 MIME 타입이여야한다.
이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며,
text/css 값이 가장 흔하다.
🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/link
<style> Tag
<style>: 문서나 문서 일부에 대한 스타일 정보를 포함한다.
-
<style>요소는 문서의<head>안에 위치해야 한다.
But, 일반적으로 스타일은 외부 스타일 시트에 작성하고,<link>요소로 연결하는 방법을 권장한다. -
같은 명시도를 가진 경우, 뒤쪽
<style>이 앞쪽을 덮어쓴다. -
<link>태그로도 CSS 를 적용할 수 있지만, 우선순위가 다르다.
추후 CSS 공부를 해보면 알겠지만, 결론만 얘기하자면<style>태그가 더 우선권을 갖는다.
Example
<style>
p {
color: #26b72b;
}
</style>🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/style
<script> Tag
<script>: 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 쓴다.
WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있다.
-
외부의 JavaScript 를 불러올 수도 있고, html 파일 내부에 직접 스크립트를 작성할 수도 있다.
-
<head>,<body>내에 모두 위치 가능하다. -
<script>를 만나는 순간 스크립트를 먼저 해석한 후 문서의 나머지를 로딩한다.
⭐️ html의 로딩이 끝난 후 해석할 수 있도록 body 의 마지막에 작성하는 것을 권장한다.
--> 더 궁금하다면async,defer속성에 대해 알아보자.
(어차피 개발하다보면 자연스럽게 알게 될 것이다!)
Example
<script src="javascript.js"></script>
<script>
alert("Hello World!");
</script>🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
