html (2) 썸네일형 리스트형 <meta> 태그와 오픈 그래프(Open Graph) 오픈 그래프 프로토콜이란 SNS에서 특정 웹 페이지를 공유하면 짤막한 미리보기 화면이 나타나면서 마치 그 SNS의 게시물인 것처럼 자연스럽게 삽입됩니다. 어떻게 그럴 수 있을까요? 이것은 바로 오픈 그래프(Open Graph) 프로토콜 때문입니다. 오픈 그래프 프로토콜은 페이스북에서 만든 것인데요, 웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 고안된 것이죠. 공유하는 웹 페이지를 직접 클릭해서 들어가 보기 전에 웹 사이트 정보를 미리보기로 구성해서 보여줍니다. 미리보기 화면을 어떻게 구성할지 태그 안에서 오픈 그래프를 사용해 설정합니다. 오픈 그래프 맛보기 포털 사이트에서 아무 뉴스나 선택해서 열어놓고, 웹 개발자 도구 창의 [요소] 창도 함께 열어보세요. 그리고 사이에 붙여넣.. 파비콘(favicon) 사용하기 "파비콘(favicon)"에 대해 들어보셨나요? favicon란 favorite + icon의 줄임말입니다. 우리가 특정 사이트를 즐겨찾기에 추가했을 때 함께 표시되는 아이콘이기 때문에 줄여서 파비콘이라고 부르죠. 사이트를 방문했을 때 사이트 제목에도 함께 나타납니다. 내가 만드는 사이트에도 파비콘을 추가할 수 있을까요? 물론입니다. 파비콘으로 사용할 아이콘 준비하기 파비콘으로 사용할 아이콘은 직접 아이콘을 만들어서 사용할 수도 있고, 가지고 있는 이미지를 아이콘 형태로 변환할 수도 있습니다. 이것도 힘들다면 기존의 파비콘 중에서 검색해서 사용할 수도 있죠. (물론 개인적인 용도일 경우입니다) 파비콘 파일 크기 파비콘을 직접 만들어 사용할 경우 그 키는 16*16이나 32*32로 만듭니다. 아이콘이기 때.. 이전 1 다음
