HTML 문서에는 기본적으로 <head>와 <body>가 포함되어야 한다.
<!DOCTYPE HTML>
<head>
<!-- 어떤 내용이 들어가는지 알아보고자 한다 -->
</head>
<body>
<!--웹 브라우저에 보여질 콘텐츠 영역-->
</body><head> 안에는 눈에 보이지 않는 중요한 정보들이 들어갈 수 있다.
1. <link> - CSS 파일
<head>
<link href="css/style.css" rel="stylesheet">
</head>
상대경로 vs. 절대경로
1. css/style.css ➡︎ 상대경로
2. /css/style.css ➡︎ 절대경로
- 1번은 현재 HTML 파일과 같은 경로에 있는 css폴더 내의 style.css 파일을 의미
- 2번은 현재 사이트의 메인경로(예를들어, www.tistory.com)부터 시작해서 www.tistory.com/css/style.css 파일을 첨부하라는 뜻
- 즉, 슬래시( / )기호가 처음부터 붙어있으면 사이트 메인경로부터 시작하라는 의미
2. <style> - 스타일
일반적으로 .css파일을 통해 .html 파일과 분리하지만 그렇지 않고 html document에 같이 쓰고 싶다면 <head> 안에 <style>태그를 통해서 직접 스타일을 작성할 수 있다. <body>안에 작성해도 동작하지만 html document는 위에서 부터 한줄씩 읽기 때문에 해당 스타일을 주고자 하는 코드가 스타일 코드 밑에 존재한다면 로딩시 스타일이 잠깐 깨질 수 있다.
<head>
<style>
.button {
color : red;
}
</style>
</head>
3. <title> - 사이트 제목
<head>
<title>Jinny weblog</title>
</head>- 사이트에 제목을 넣는다.
- 브라우저 탭에 뜨는 이름이다.
4. <meta> - 메타
<head>
<meta charset="UTF-8">
<meta name="description" content="내가공부한거 정리하는 블로그">
<meta name="keywords" content="웹개발공부,프론트앤드개발,웹개발,front-end">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>- 인코딩형식 지정 : charset="UTF-8"
- 사이트검색 결과화면에 뜨는 글귀 수정하고 싶을 때:
- name = "description" content="이 글귀가 사이트 검색하면 보여지길 원함"
- description => 구글링하면 파란제목으로 뜨는 글귀
- keywords => 검색에 도움을 주는 키워드(SEO, Search Engine Optimisation, 검색엔진 최적화할 때 유용)
- 사이트 줌 레벨이나 폭 지정하고 싶을 때
- name = "viewport" 넣으면 된다
- width = device-width => 모바일 기기 실제 폭으로 렌더링
- initial-scale = 1 => 화면 접속 시 화면 줌레벨 설정, 1이면 100%로 보임
- 반응형 만들 때 뷰포트 꼭 넣어야 함
5. open gragh
<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>- 웹사이트 제목 옆에 뜨는 아이콘
- 브라우저 탭에 보인다
- ico파일 대신 png로 넣어도 되지만 ico가 호환성이 가장 좋다
- 요즘은 32x32사이즈로 제작한다
- 웹사이트 바탕화면 바로가기 추가할 경우 뜨는 아이콘도 커스토마이징 가능함
예) rel="hj-touch-icon-precomposed" 뭐 이런식으로 rel속성을 조정하면 되는데,
OS마다 요구하는 속성이 다르므로 별도로 만들어줘야 함
'Frontend 👩🏻💻 > HTML&CSS' 카테고리의 다른 글
| [HTML] IE 호환성 크로스 브라우징 (Cross-browsing) (0) | 2021.10.22 |
|---|---|
| [HTML] 반응형 웹 (Responsive) 처리 (0) | 2021.10.22 |
| [CSS] #1-2 박스모델과 box-sizing (0) | 2021.10.13 |
| [CSS] #1 The box model (0) | 2021.10.09 |
| [HTML] #1 Hypertext Markup Language (0) | 2021.10.08 |
