이제 우리가 만든 예쁜 카드를 공유해야겠지요!
카톡에 어떤 링크를 공유했을때 저 화면을 본경험이 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘다들 있으시죠!
저 화면에서 보여지는 이미지, 제목, 설명들을 우리의 html코드에서 직접 수정이 가능하답니다!
<meta property="og:image" content="이미지 경로">
<meta property="og:title" content="제목">
<meta property="og:description" content="설명">
위코드를 넣어 이미지 경로에는 본인이 원하는 이미지를 넣어주고 제목, 설명을 넣어주면 되겠죠?
favicon넣기
→favicon이 뭐죠?!?
인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다!
지금 우리는 밋밋한 지구본 모양이니까 바꾸는게 좋겠네요!
검색창에 "christmas favicon"을 치고 맘에드는 이미지의 주소를 복사한 후에
<link rel="shortcut icon" href="이미지 경로">
위 코드 "이미지 경로" 부분에 붙여넣어 주시면 favicon이 간단하게 적용되는것을 확인 할 수 있습니다!
저는 이렇게 트리모양으로 해보았어요! 귀엽네용😉
배포는 스파르타코딩클럽측이 준비해주신 배포페이지에 제가 제작한 html파일을 업로드하였더니 주변에 공유할수있도록 링크를 주시더라구요! 덕분에 정말 편리하고 빠르게 배포할 수 있었답니다!
[결과]
강의대로 하면 르탄이 이미지 클릭시 스파르타코딩클럽의 마이페이지로 넘어가는건데 저는 숨겨진 메시지를 하나 더 넣고 좌측 상단에 이전으로 돌아가기 버튼을 넣어서 이전 화면으로 다시 돌아갈수 있게끔 추가적으로 제작해보았어요!
간단하게 크리스마스 카드를 만들고 빠르게 배포까지 하여 친구들에게 공유할 수 있어서 더 재밌었던 강의였습니다!
html,css를 조금 이해하고 간단하게 js까지 다루어서 웹페이지 만들기가 처음이신 분들도 쉽고 재밌게 따라할수있는 강의인거같아요! 저처럼 강의 따라하시고 자신만의 컨텐츠도 조금 포함해서 친구들과 공유하는것도 좋을거같아요!😘
