6.14 GitHub 웹페이지 따라 만들기(Html,Css 공부)

패스트캠퍼스에서 GitHub페이지를 따라 만드는 강의가 있는데 html과 css의 부족한 부분이 많아서 무료 강의가 남아 있어서 오늘 4분의 1 정도 따라 만들었다. 늘 기본 html폼에다가 작성하고 만들었는데 확실히 강의로 가르치는 수업은 조금 남다르긴 했다. 특히 신기했던 부분은 웹페이지에서 document 옆에 img파일이 있었는데 그 부분을 어떻게 넣을까 궁금했었는데 의외로 간단했다. 

 

그 부분을

<link rel="icon" href="파일이름">을 넣으면 웹페이지 위에 내가 넣은 이미지 파일이 나왔다. 그 부분이 조금 신기했다. 또한 meta 부분을 꾸밈에 따라 카카오톡에서 누군가 내게 보낸 주소창에 대한 이미지와 명칭, title 등을 나오게 하는 부분들도 신기했다. 그 부분은 예시로 들면 

 

    

    <meta property="og:type" content="website">

    <meta property="og:site_name" content="GitHub">

    <meta property="og:title" content="Build software better, together">

    <meta property="og:description"

    content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">

    <meta property="og:image" content="img/logo__github.png">

    <meta property="og:url" content="https://github.com">

    

    

    <meta property="twitter:card" content="summary">

    <meta property="twitter:site" content="GitHub">

    <meta property="twitter:title" content="Build software better, together">

    <meta property="twitter:description"

    content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">

    <meta property="twitter:image" content="img/logo__github.png">

    <meta property="twitter:url" content="https://github.com">

 

이렇게 꾸며 넣을 수 있는데, og 같은 경우는 facebook에서 사용하는 부분들, twitter는 twitter에서 (설명을 들었지만 아직 어떤거지는 잘 모르겠다.) 쓰는 거라고 했다. 아직 더 많이 남았는데 이미 알고 있는 내용보단 더 많은 것을 배울 수 있을 것 같아서 기대가 된다.