HTML 정리3

7003 단어 htmlhtml

1) <meta>

:<base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.

그러나, 많은 <메타> 기능이 더 이상 사용되지 않는다.

예를 들어, 다른 검색어에 대한 해당 페이지의 관련성을 확인하기 위해 검색 엔진의 키워드를 제공하기로 되어 있는 <meta> element 키워드 (<meta name="keywords" content="fill, in, your, keywords, here">)는 검색 엔진으로부터 무시된다. 스팸 발송자가 키워드 목록을 수백 개의 키워드로 채웠기 때문이다.

- name · content

name과 content 특성을 함께 사용하면 문서의 메타데이터를 '이름-값' 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

  • name
    : 메타데이터 요소의 종류, 포함된 정보의 종류를 지정합니다.

  • content
    : 실제 메타데이터 content를 명시한다.

- charset

: charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 된다.

<meta charset="utf-8">

2) <title>

: 브라우저 탭의 이름으로 보여지는 요소로, 북마크할 때 제목으로 추천되어 채워진다. 검색엔진에서 검색결과로서 맨위에 뜬다.

<title>Home Page</title>

3) Sitelink

Google에서는 MDN 웹 문서의 관련 하위 페이지가 메인 홈페이지 링크 아래에 나열되어 있다. 이를 사이트 링크라고 하며, Google의 웹 마스터 도구에서 구성할 수 있다. 이 하위 페이지들은 Google 검색 엔진에서 사이트의 검색 결과를 더 좋게 만드는 방법입니다.

4) Adding custom icon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

title 옆에 보여지는 로고 이미지를 'favicon'이라고 한다. favicon의 표준 파일 형식은 square 모양의 .ico 파일이다. .png나 .gif도 사용할 수 있지만 호환성을 높이기 위해서는 표준을 따라야 한다.

(대부분의 브라우저는 .gif 또는 .png와 같은 일반적인 형식의 즐겨찾기를 지원하지만 ICO 형식을 사용하면 Internet Explorer 6까지 작동한다)

  1. 로고의 정사각형 이미지(최대 크기 제한은 없으나, 32x32 pixels 또는 16x16 pixels)를 만들어 .ico 파일로 변환한다. 이는 'Favicon.cc'이나 'Real Favicon Generator'와 같은 웹사이트나, 포토샵에서 할 수 있다.

  2. 다음 두 가지 방법으로 설정할 수 있다:

  • 웹사이트의 root folder/directory (index.html 옆)에 'favicon.ico'라는 이름으로 위치시킨다.

또는

  • 사이트에 있는 모든 .html 파일의 <head></head> 태그 사이에 다음과 같이 연결한다.

어떤 웹사이트에서든 favicon을 보고 싶으면 www.url.com/favicon.ico이라고 쓰면 된다.

(예를 들어, naver의 favicon은 www.naver.com/favicon.ico이라고 치면 볼 수 있다.)

그러나 파일 크기 제한이 없어 생기는 브라우저 문제도 있습니다. 매우 큰 아이콘으로 브라우저를 쉽게 손상시킬 수 있다.

5) Applying CSS and JavaScript to HTML

<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">

6) Parsing

브라우저가 HTML 파일을 읽고 DOM(Document Object Model)의 구조를 만들어서 페이지의 구조를 분석/이해하는 것을 말한다.

HTML 파일을 브라우저가 이해할 수 있게 DOM 트리 구조로 만들어서 나중에 CSS와 병합되어 브라우저 페이지 위에 표시된다.

❗ 참고자료
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w

CSS 단위 알아보기
서버 설계

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage