[FE기초] Head 태그

2024. 4. 25. 01:06· FrontEnd
목차
  1. 1. Head 태그
  2. 2. Open Graph
반응형

[FE기초] Head 태그

HTML 포스팅의 마지막 Head 태그이다.

이전까지의 페이지의 Body에 해당하는 부분을 만드는 것이었다면 이번 시간에는 탭의 파비콘 등을 통해서 head를 구조화 하는 방법을 알아보겠다.

 

[FE기초] Form 태그

[FE기초] Form 태그예비군 훈련으로 며칠만에 포스팅을 하게되었다.프론트엔드 기초 강의 HTML 시리즈의 마지막이 다와간다.회원가입 또는 로그인 화면에서 아주 많이 사용된느 Form 태그에 대해

developer-dodo.tistory.com

1. Head 태그

head 태그는 문서 정보(메타데이터)를 담고 있는 태그

브라우저 화면에 직접적으로 보이지 않는다.

하지만 숨은 데이터를 정의하는 태그들이 들어가 있으며 아래 태그들이 대표적 예시이다.

◼ title

브라우저의 제목 표시줄이나 페이지탭에서 보이는 문서 제목

텍스트만 포함하면 태그를 포함해도 무시

 

◼ base

문서 안의 모든 상대 URL이 사용할 기준 URL을 지정

문서에는 문서에는 하나의 base 만 존재

 

◼ link

요소는 현재 문서와 외부 리소스의 관계를 명시

<link> 스타일 시트를 연결할 때 제일 많이 사용

사이트 아이콘 연결 등 여러가지로 사용 가능

 

◼ style

스타일 규칙을 담고 있는 태그

추후 배울 css와 연관된 부분이다.

 

◼ meta

앞서 언급한 태그에서 설명할 수 없는 나머지 정보들을 모두 표시할 수 있다.

◼ script

자바 스크립트를 내부에 포함할때 사용된다.

외부의 js 파일의 경로 를 통해서 정의

2. Open Graph

콘텐츠 요약 내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정

SNS에서 나의 웹 서비스를 게시할때 정보를 보여주기 위해서 사용하는 것이 og 메타태그이다.

아래 og 태그들이 대표적인 예시이며 각 SNS 의 속성에 따라서 사용하는 태그는 일부 상이하다.

<!-- 필수는 og 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
 
<!-- 필수는 아니지만, 추천하는 og 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
반응형

'FrontEnd' 카테고리의 다른 글

[FE기초]CSS 다루기  (0) 2024.04.25
[FE기초] CSS 기초  (0) 2024.04.25
[FE기초] Form 태그  (0) 2024.04.24
[FE기초]HTML 시맨틱 태그  (1) 2024.04.19
[FE 기초]HTML 태그  (3) 2024.04.19
  1. 1. Head 태그
  2. 2. Open Graph
'FrontEnd' 카테고리의 다른 글
  • [FE기초]CSS 다루기
  • [FE기초] CSS 기초
  • [FE기초] Form 태그
  • [FE기초]HTML 시맨틱 태그
김도도새
김도도새
1년자 주니어 개발자의 좋은 백엔드 개발자로 걸음을 기록하는 공간
반응형
김도도새
Stacking Devlop
김도도새
전체
오늘
어제
  • 분류 전체보기 (48)
    • 회고 (0)
    • Spring (13)
    • Java (3)
    • 잡동사니 (0)
    • 도서 (0)
    • 웹 Basic (5)
    • 개인프로젝트 (0)
    • 에러모음 (2)
    • 개발회고록 (0)
    • 알고리즘 (5)
    • Git (1)
    • 디자인패턴 (2)
    • FrontEnd (11)
    • JPA (3)
    • Build Tool (1)
    • DB (0)
    • 운영체제 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
김도도새
[FE기초] Head 태그
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.