[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 |
[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 |