패스트캠퍼스 환급챌린지 20일차 미션 (2월 20일) : 프론트엔드개발 강의 후기

오늘은 화요일

게으름을 피우다 늦게 강의를 듣기 시작했다.

집에서 들어보는 오늘의 강의

후하

 

오늘부터는 본격적으로 

Ch 10. 스타벅스 예제 로 들어간다!

드디어 예제를 시작하는구나아아!!!

가보쟈고오!

 

스타벅스 예제를 듣는 나의 강의 시작과 끝 뚜둥

예제를 통해 만드는 다양한 헬로 월드

 

역시 예제의 시작은 HELLO WORLD 인가

ㅋㅋㅋㅋㅋ

 

돌아와서 오픈 그래프를 통해서 스타버스의 기본적인 코드를 가져와야한다.

원래 있는 사이트이기 때문에 아마 이 기능이 가능한 것이겠지?

 

근데 그럼 오픈 소스코드는 알겠는데 오픈 그래프는 뭐지?

그리고 그거랑 같이 나오는 <meta>태그는 뭘까?

인터넷으로 좀 찾아봤다. (근데 사실 강의들을 때도 설명을 해주넿ㅎ 난 맘이 급해서 멈춰두고 먼저 검색부터 해봤넿ㅎㅎ 내 급한 성격..)

 

오픈 그래프 프로토콜은 페이스북에서 만든 것인데

웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 고안된 것이라고 한다.

공유하는 웹 페이지를 직접 클릭해서 들어가 보기 전에 웹 사이트 정보를 미리보기로 구성해서 보여주는거다.

미리보기 화면을 어떻게 구성할지 <meta> 태그 안에서 오픈 그래프를 사용해 설정해야함!

 

(옹.. 미리보기 화면으로 보이는 거..! 기억기억)

 

HTML의 <meta> 태그는 웹 페이지에 대한 메타 정보를 담아두는 태그이다. 검색 봇에서 해당 웹 페이지를 검색할 때 참고할 수 있는 정보죠. 오픈 그래프 프로토콜을 적용하기 위해서도, <meta> 태그를 사용해서 공유할 제목과 이미지, 요약 정보 등을 구성한다.

 

기본적인 오픈 그래프 작성 방식

<meta property="속성 이름" content="속성 값">

 

오픈 그래프의 기본 속성 4가지

1. og:title - 웹 페이지 제목
2. og:type - 웹 페이지 유형 (ex, article, movie 등) / 각 유형에 따라 추가적인 정보가 추가될 수 있음
3. got:image - 대표 이미지
4. og:url - 링크할 주소

기본 속성 외 필요에 따라 추가할 수 있는 여러 가지 옵션

• og:audio - 오디오 파일
• og:description - 웹 페이지 내용 요약
• og:locale - 웹 페이지 언어. 기본은 en-US. 한글로 바꾸려면 ko_KR
• og:site_name : 사이트 이름. og:title은 현재 페이지의 제목이고, og:site_name은 전체 사이트 이름
• og:video - 비디오 파일

앞에서 설명한 속성들 중 일부 속성은 추가적인 정보를 가질 수 있다.

예를 들어, 페이지를 공유할 때 대표 이미지를 사용한다면 그 이미지의 너비나 높이, alt 텍스트 등을 지정 가능함

• og:image:url - og:image와 같음
• og:image:secure_url - https로 접속할 경우 표시할 이미지 주소
• og:image:type - 이미지 유형
• og:image:width - 너비
• og:image:height - 높이
• og:image:alt - 대체 텍스트

비디오

• og:video:url - og:image와 같음
• og:video:secure_url - https로 접속할 경우 표시할 이미지 주소
• og:video:type - 이미지 유형
• og:video:width - 너비
• og:video:height - 높이

오디오

• og:audio:url - og:image와 같음
• og:audio:secure_url - https로 접속할 경우 표시할 이미지 주소
• og:audio:type - 이미지 유형

 

오 뜬금 없지만 글 쓰다보니까 미리보기가 나오는데 요런 아이들도 오픈그래프인가ㅎㅎㅎ

 

간단하게 오픈그래프 소스를 만들어 주는 사이트

https://metatags.io/

Meta Tags — Preview, Edit and Generate

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]