레이아웃 클론코딩 도전기_[header]-1

오대성·2022년 12월 22일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 도전 메가바이트스쿨 클론코딩 패스트캠퍼스

레이아웃-클론코딩-도전기

목록 보기

2/5

여기에서는 실제 사이트를 확인해보고 header를 구현해보는 과정을 남겨보려고 합니다.

분석

head

favicon.ico

kakao_favicon

kakao_favicion_href

브라우저 탭에서 확인시 보여지는 저 작은 아이콘을 favicon이라고 부른다고 합니다.
favicon을 직접 제작하는 것도 가능하지만, 공식 사이트에서 제공하는 favicon의 이미지 주소에서 다운로드 받아 사용하도록 하겠습니다.

metaTag

kakao_opengraph

요즘 웹사이트 주소를 붙여넣으면 사이트에 대한 정보를 표시해주는 데, 페이스북의 opengraph나 트위터의 twitter card를 활용하는 것 같습니다. 카카오도 해당 기술을 사용하는지 확인해보니... 사용하네요 (너무 당연한 얘기인것 같지만...) 위 이미지에서는 검색 봇이 오픈그래프 속성을 확인해서 분석한 내용을 기반으로 표시된 것 같네요

metaTag Test

reference
https://dev-hyun.tistory.com/186
배포할 때 까지 기다려서 opengraph를 확인하는 것은 시간이 걸릴거 같고, 현재의 로컬 환경에서 어떻게 오픈그래프가 표시되는지 확인하고 싶어졌습니다. 검색해서 작업해 본 결과, localhost open graph checker 라는 크롬 확장 프로그램을 사용하여 테스트할 수 있었습니다.

test_copy_url

이 주소를 복사해서 붙여넣기 해보니

test_opengraph

wow ! 점점 흥미가 생겨지는 것 같습니다. 사이트 주소는 해당 크롬 확장 프로그램이 firebase에 임시배포를 해서 생기는 것이라고 추측되며, 정확한 테스트는 나중에 배포한 뒤의 주소로 확인이 가능할 것 같습니다.

url은 나중에 배포되면, 배포사이트의 주소로 대체할 예정이지만, (head까지 작성한) 현재 html은 아래와 같습니다.

<!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" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="kakaocorp.com" />
    <meta property="og:url" content="https://www.kakaocorp.com/page/" />
    <meta property="og:title" content="Kakao" />
    <meta
      property="og:image"
      content="https://t1.kakaocdn.net/kakaocorp/corp_thumbnail/Kakao.png"
    />
    <meta
      property="og:description"
      content="기술과 사람으로 더 나은 세상을 만듭니다"
    />
    <meta
      name="description"
      content="기술과 사람으로 더 나은 세상을 만듭니다"
    />
    <title>카카오</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="./styles/main.scss" />
  </head>