-
HTML head 태그(사이트 제목, open graph 등등)front-end/HTMI CSS 2023. 6. 25. 21:43728x90
1. head 태그에 사용되는 것들
<!DOCTYPE HTML> <head> 헤드 </head> <body> 바디 </body>- 각종 css 파일
- CSS 파일들을 첨부할 때 링크태그를 넣을 수 있습니다.
<head> <link href="css/main.css" rel="stylesheet"> </head>1. css/main.css
현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미 = 상대 경로
2. /css/main.css
현재 사이트의 메인경로부터 시작해서 메인/css/main.css 파일을 첨부하라는 의미 = 절대 경로
- 스타일 태그
- css 파일이 아닌 head 안에서도 style으로 가능합니다.
- css파일과 유사하게 작동
- <body>태그 맨 밑 같은 곳에 두면 사이트 로딩시 스타일이 깨질 수 있다.
<head> <style> .button { color : red; } </style> </head>- 사이트 제목
<head> <title>네이버입니다</title> </head>- 여러가지 meta 태그
- 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다.
- 사이트의 검색 결과 화면에 뜨는 글귀를 수정하고 싶으면 이런 속성들을 추가할 수 있습니다.
- name="description" content="어쩌구"
- description은 구글 검색시 파란 제목으로 뜨는 글귀
- keywords는 검색에 도움을 주는 키워드
- 사이트 초기 zoom 레벨이나 폭을 지정해주려면 name="viewport" 라는 속성을 부여
- width=device-width는 모바일 기기의 실제 폭으로 렌더링 해주세요 라는 뜻
- 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링하라고 명령하는 부분
- initial-scale=1 이 부분은 접속시의 화면 줌레벨 설정
- width=device-width는 모바일 기기의 실제 폭으로 렌더링 해주세요 라는 뜻
<head> <meta charset="UTF-8"> <meta name="description" content="SIMSTOO 코딩 개발자 성장기."> <meta name="keywords" content="HTML,CSS,JavaScript,자바스크립트,코딩"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>- open graph
- 메타에서 만든 og 메타 태그
<head> <meta property="og:image" content="/이미지경로.jpg"> <meta property="og:description" content="사이트설명"> <meta property="og:title" content="사이트제목"> </head>- Favicon
- 여러분의 웹사이트 제목 옆에 뜨는 아이콘을 커스터마이징하려면 이렇게 link 태그로 첨부
- ico 대신 png 파일로 넣어도 됩니다. ico가 호환성이 좋습니다.
- 32 x 32 사이즈
- 웹사이트를 바탕화면에 바로가기추가했을 경우 뜨는 아이콘도 커스터마이징 가능
- rel="apple-touch-icon-precomposed"
<head> <link rel="icon" href="아이콘경로.ico" type="image/x-icon"> </head>728x90'front-end > HTMI CSS' 카테고리의 다른 글
CSS Transition 속성 (0) 2023.06.30 반응형 웹 레이아웃 만들기 (0) 2023.06.26 CSS Flexbox (0) 2023.06.25 HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱 (0) 2023.06.25 OOCSS, BEM class 작명법 (0) 2023.06.22