7월 18일, 위코드 사전스터디 첫 모임에서 피드백 받은 내용, 새로 알게 된 내용을 정리한다.

open graph 속성

페이지의 링크를 보냈을 때, 미리보기로 나타나는 제목과 사진, 설명을 설정할 수 있는 기능이다.

<!-- open-graph -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="사이트 이름">
    <meta property="og:title" content="사이트 제목">
    <meta property="og:description" content="사이트 설명">
    <meta property="og:image" content="미리보기 이미지">
    <meta property="og:url" content="사이트 url">

Favicon 설정하기

페이지 탭에 작게 뜨는 이미지를 설정할 수 있다.

<!-- favicon -->
    <link rel="icon" href="favicon.png">
    <link rel="apple-touch-icon" href="favicon.png">

배경사진 고정하기

스크롤을 할 때 배경의 사진을 고정하는 기능이다. background-attachment: fixed; 를 추가하면 된다.

예시

section {
    position: relative;
    overflow: hidden;
    background-attachment: fixed; /* 이 부분! */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 19em 0em 19em;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25),
                0 1px 25px rgba(0, 0, 0, .75);
}

사각형에 Round 값 주기

border-radius로 사각형이나 이미지에 Round 값을 줄 수 있다.

단축키

Chrome 개발자모드 단축키: fn + F12