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

티스토리툴바