<!DOCTYPE HTML>
<head>
head 내용
</head>
<body>
body 내용
</body>HTML 문서의 기본 템플릿은 꼭 head, body 태그를 포함해야 한다.
head 태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데, head 태그 내에서 쓸 수 있는 중요한 태그들을 몇 가지 나열해 보자.
1. 각종 css 파일들
<head>
<link href="css/main.css" rel="stylesheet">
</head>css 파일들을 첨부할 때 링크 태그를 집어넣을 수 있다.
위 경로는 현 html 파일과 같은 위치에 있는 css 폴더 내의 main.css 파일을 첨부하라는 뜻이다.
(1) css/main.css
(2) /css/main.css
(1)은 상대경로로 현재 html 파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미,
(2)는 절대경로로 현재 사이트의 메인 경로(abcd.com)부터 시작해서 abcd.com/css/main.css 파일을 첨부하라는 의미이다.
슬래쉬(/) 기호가 처음부터 붙어 있으면 사이트 메인 경로부터 시작해라는 의미이다.
2. 스타일 태그
<head>
<style>
.button {
color : red;
}
</style>
</head>css 파일을 만드는 대신 <style> 태그를 열어서 css를 작성하기도 한다.
css 파일과 유사하게 동작한다.
<body> 태그 안에 넣어도 동작하는데 html 파일 안의 코드는 위에 있을수록 먼저 읽기 때문에 <body> 태그의 가장 하단에 두면 사이트 로딩시 스타일이 잠깐 깨질 수 있다. 그래서 넣을 거면 <head> 태그 안에 넣는 경우가 많다.
3. 사이트 제목
<head>
<title>네이버입니다</title>
</head>사이트 제목을 넣을 수 있다. (브라우저 탭에 뜨는 이름임)
4. 여러가지 meta 태그
<head>
<meta charset="UTF-8">
<meta name="description" content="히컵 개발 블로그입니다.">
<meta name="keywords" content="HTML,CSS,JavaScript,자바스크립트,리액트">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>(1) 사이트의 인코딩 형식을 지정할 때 charset="UTF-8"이라고 속성을 적을 수 있다.
(2) 사이트의 검색 결과 화면에 뜨는 텍스트들을 수정하고 싶으면 이런 속성들을 추가할 수 있다.
name="description" content="내용어쩌구"
description : 구글 검색시 파란 제목으로 뜨는 텍스트, keywords : 검색에 도움을 주는 키워드 등
(3) 사이트 초기 zoom 레벨이나 폭을 지정해 주려면 name="viewport"라는 속성을 부여하면 된다.
width=device-width는 모바일 기기의 실제 폭으로 렌더링하라는 뜻이다.
initial-scale=1은 접속시의 화면 줌 레벨 설정이다.
그래서 반응형 웹을 만들 때 이 meta 태그를 넣고 시작하면 된다.
5. open graph
<head>
<meta property="og:image" content="/이미지경로.jpg">
<meta property="og:description" content="사이트설명">
<meta property="og:title" content="사이트제목">
</head>facebook이 만든 og라는 메타태그가 있다.
카카오톡 이런 곳에 링크를 공유하면 아래처럼 이런 식으로 박스가 뜨고 사이트 설명, 제목, 이미지가 뜬다.
이걸 커스텀마이징하고 싶으면 이 meta 태그를 따로 집어넣으면 된다.
6. Favicon
<head>
<link rel="icon" href="아이콘경로.ico" type="image/x-icon">
</head>웹 사이트 제목 옆에 뜨는 아이콘을 커스텀마이징하려면 이렇게 link 태그로 첨부하면 된다.
그러면 이렇게 아이콘이 생긴다.
- ico 대신 png 파일을 넣어도 된다. ico가 호환성은 가장 좋다.
- 요즈음에는 32x32 사이즈로 제작하면 된다.
그리고 웹 사이트를 바탕화면에 바로가기 추가했을 경우 뜨는 아이콘도 커스텀마이징 가능하다.
rel="apple-touch-icon-precomposed" 이런 식으로 rel 속성을 조정하면 되는데 os마다 요구하는 rel 속성이 달라서 필요할 때 찾아 적용하거나 favicon generator를 검색해서 사용해 보면 os별로 알아서 만들어 준다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
