head 태그 안에 들어가는 요소를 공부하겠습니다.
|
<head>
<meta charset="UTF-8">
<meta name="description" content="오늘의 경제 신문입니다.">
<meta name="keywords" content="주식, 암호화폐, 경제, 투자">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
|
1. 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다.
2. 사이트의 구글 및 다른 검색엔진의 검색 결과 화면에 뜨는 글을 수정하고 싶으면
속성들을 추가할 수 있습니다.
description은 구글 검색시 파란 제목으로 뜨는 글
keywords는 검색에 도움을 주는 키워드
(검색엔진 최적화에 필요한 요소입니다.)
3. 사이트 초기 zoom 레벨이나 폭을 지정해주려면
name="viewport" 라는 속성을 부여하시면 됩니다.
width=device-width는 모바일 기기의 실제 폭으로 렌더링 하라는 뜻입니다.
요즘 스마트폰 가로 해상도가 높은 기기들이 많이 있습니다.
그래서 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링하라고
명령하는 부분입니다.
initial-scale=1 이 부분은 접속시의 화면 줌레벨 설정입니다.
그래서 반응형 웹을 만들 때 저 meta 태그를 복붙하시고 시작하시면 되겠습니다.
|
<head>
<meta property="og:image" content="/이미지경로.jpg">
<meta property="og:description" content="사이트설명">
<meta property="og:title" content="사이트제목">
</head>
|
acebook이 만든 og 라는 메타태그가 있습니다.
여러분이 가끔 카톡 페북 이런 곳에 링크를 공유시 보입니다.
sns에 공유하거나, 카톡에 링크를 공유하면
사진과 제목과 설명이 보이게 됩니다.
|
<head>
<link rel="icon" href="아이콘경로.ico" type="image/x-icon">
</head>
|
여러분의 웹사이트 제목 옆에 뜨는 아이콘을 커스터마이징하려면
이렇게 link 태그로 첨부하면 됩니다.
그럼 이렇게 아이콘이 생깁니다.
- ico 대신 png 파일로 넣어도 됩니다. ico가 호환성 좋음
- 32 x 32 사이즈로 만들면 됨
- 그리고 웹사이트를 바탕화면에 바로가기추가했을 경우
favicon generator 이런거 검색해서 한번 써보시면 OS별로 해줌
'프로그래밍 스터디( 공부노트 ) > HTML, CSS' 카테고리의 다른 글
| 미디어 쿼리 추가 (0) | 2021.12.27 |
|---|---|
| css 단위 / media query / 반응형 웹 (0) | 2021.12.27 |
| css 가로 정렬 쉽게하기, Flexbox (0) | 2021.12.27 |
| css 를 이용하여 웹페이지에 폰트 적용하기 (0) | 2021.12.27 |
| css 작성방법 / OOCSS(Object Oriented CSS) , BEM (0) | 2021.12.27 |