<!DOCTYPE HTML>
<head>
어쩌구
</head>
<body>
저쩌구
</body>HTML 문서의 기본 템플릿은 꼭 head와 body 태그를 포함해야한다.
1. 각종 CSS 파일들
<head>
<link href="css/main.css" rel="stylesheet">
</head>현 HTML파일과 같은 위치에 있는 CSS폴더 안에 있는 main.css파일을 첨부하라. 라는 경로!
- css/main.css
- /css/main.css
두 개의 경로는 다른 경로이다.
1번은 현재 HTML파일과 같은 경로에 있는 css폴더 내의 main.css
2번은 현재 사이트 메인경로부터 시작해서 메인경로/css/main.css
멋진 말로 1번은 상대경로, 2번은 절대경로
2. 스타일 태그
<head>
<style>
.button {
color : red;
}
</style>
</head>CSS파일 대신 <style> 태그를 열어서 CSS를 작성하기도 한다.
3. 사이트 제목
<head>
<title>네이버입니다</title>
</head>**4. 여러가지 meta 태그** ``` ```
- 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라는 속성 적기 가능
- 사이트 검색결과 화면에 뜨는 글귀를 수정하고 싶으면 name="description" content="어쩌구" 라는 속성 추가 가능
description은 구글 검색 시 파란제목으로 뜨는 글귀, keyword는 검색에 도움을 주는 키워드 - 사이트 초기 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>카톡 혹은 메신저로 링크를 공유하면
▲ 이런식의 박스가 뜬다
사이트설명, 제목, 이미지를 커스터마이징 하고싶으면 저런 meta 태그를 따로 집어넣으면 된다!
6. Favicon
<head>
<link rel="icon" href="아이콘경로.ico" type="image/x-icon">
</head> 웹 사이트 제목 옆에 뜨는 아이콘 커스터마이징 하기
-ico대신 png 파일 넣기 가능 (ico가 호환성 제일 굿)
-요즘은 32x32 사이즈로 제작하기
-웹사이트를 바탕화면에 바로가기 추가했을 경우 뜨는 아이콘 커스터마이징하기
rel="apple-touch-icon-precomposed"
이런식으로 rel속성을 조정하면 된다! OS마다 요구하는 rel속성이 다르기 때문에
favicon generator 검색해서 써보기
💻