HEROPY Tech 블로그 참고.
<head>
문서의 정보를 입력하는 공간이다.
<meta>
Content
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</bead>http-equiv속성이나 name속성의 값을 작성할때 사용 되는 속성이다.
http-equiv
서버나 사용자의 환경에 작동방식을 변경해주는 지시사항을 작성한다.
인터넷 익스플로러 브라우저의 어떤 버전에서 최적화가 되는지 명시를 해줄 수 있다.
name
정보의 종류를 정의 할 수있고 그 정의된 정보에 대한 내용을 content로 작성 해줄 수 있다.
많은 종류의 속성을 가지고 있기 때문에 몇가지만 작성하자면
| 이름 | 내용 |
| author | 문서 저작자(개발자) |
| description | 페이지에 대한 짧고 정확한 요약(Fierfox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용한다. |
| generator | 페이지를 생성한 소프트웨어의 식별자. |
| keywords | 페이지의 키워드이며 쉼표로 키워드 목록을 작성할수 있다 content="sky, hello, happy" |
그 외의 정보는meta name mdn을 검색하면 더 살펴볼 수 있다.
<link>
<head>
<link rel="stylesheet "href="./style.css"/>
</head>외부의 요소를 HTML현재 문서로 가지고 와서 연결할 때 사용되는 태그이다.
주로 스타일 시트(css파일)을 연결할 때 가장 많이 사용 하지만 파비콘을
가지고 올 때도 사용된다.
href
가지고 올 외부 요소의 URL을 나타내며 URL은 절대적이거나 상대적이다.
rel
가지고 오는 외부의 요소와 현재 문서와의 관계를 작성해야 한다.
| 이름 | 내용 |
| stylesheet | css 파일을 가지고 올거다 라는 명시 |
| icon | 아이콘을 나타낸다. |
stylesheet, icon 두 가지 외에도 여러가지가 있지만 중요하지 않다고 생각하여 따로 작성하지는 않았다.
그래도 내용이 더 궁금하거나 필요하다면.. (링크)
<style>
<head>
<style>
div {
color: red;
background: blue;
}
</style>
</head><style> 태그는 css 내용을 작성하는 태그이다.
html5 이전 버전에서는 <style type="text/css"> 처럼 안에 type 속성을 적어 줬어야 하지만
이제는 안적어줘도 된다.
또 <style> 태그는 기본적으로 정보를 지칭하는 태그임으로 <head>에 적어주는게 맞지만
<body>에 작성해도 작동은 하게 된다. 하지만 html이 브라우저에서 읽히는 프로세서에
효율적이지 못하기 때문에 <head>에 작성을 하는게 맞고 생각하는게 좋다.
또 일반적으로 스타일은 외부 스타일 시트에 작성하고,요소로 연결하는 편이 좋다.
<base>
base 태그는 상대경로를 입력할때 매번 특정한 경로를 작성할 필요 없이
태그에 작성해둔 경로를 생략하고 경로를 작성할 수 있게 해준다.
base태그는 기준이기 때문에 하나의 html문서에 한번씩만 입력이 가능하다.
base 태그로 절대 경로를 추가 해주기 전
<head>
<link rel="stylesheet" href="./css/style.css" />
</head>base 태그로 절대 경로를 추가 해주었을때.
<head>
<base href="./css/" />
<link rel="stylesheet" href="style.css" />
</head>
댓글