Chapter 7.
Chapter 7-1
OG Tag
- Open Graph Protocol
- 내가 입력하지도 않은 사이트의 정보와 이미지가 나오는 것
- 설정가능 부분(이미지, 타이틀, 설명)
OG Tag를 사용하는 방법
<head>
(상략)
<meta property="og:title" content="오지랖 파이썬 웹 프로그래밍">
<meta property="og:description" content="배프의 오지랖 파이썬 웹프로그래밍">
<meta property="og:image" content="./thumbnail.png">
(하략)
</head><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멋쟁이사자처럼</title>
<meta property="og:title" content="멋쟁이사자처럼_2023">
<meta property="og:description" content="한남대 멋사 백엔드 강의입니다">
<meta property="og:image" content="./thumbnail.jpg">
</head>
(하략)Chapter 7-2
Layout
- 전체적인 틀을 잡는 것
- 웹페이지에 보이는 규칙적인 구조
표준적인 방식의 레이아웃(필수적으로 따라야하는 것은 아님)
- header : 머릿말적 성격, 서비스를 대표하는 무언가
- nav : navigation
- section : 실제적인 내용이 들어가는 부분
- footer : 저작권 정보, 사이트맵, 연락처등 기타 정보
다양한 태그를 틀로서 묶어줘야 하는데 이러한 태그들이 묶어준다(그룹화의 역할)
div 처럼 묶어주기도 하지만 용도별로 태그는 영역분할 뿐만 아닐 기계의 웹페이지 해석을 도움을 주는
페이지의 layout을 선택할 때 단순히 div를 사용하는 것보다 위의 태그를 이용해서 의미를 부여하며 하는 것을 추천
Chapter 7-3
skip
XD