[깃허브 예제] footer / svg로 로고 넣기 /배치를 바꾸지 않으면서 svg로 이미지 가운데로 배치하기

---

개발자 도구로 보면

<!-- footer -->
    <footer class="section">
        <div class="inner">
            <ul class="site-links">
                <li><a href="#">Contact GitHub</a></li>
                <li><a href="#">API</a></li>
                <li><a href="#">Training</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
            </ul>
            <ul class="site-links">
                <li>© 2016 GitHub, Inc.</li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Security</a></li>
                <li><a href="#">Status</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </footer>

/* footer */
footer{
    
}
footer .inner{
    padding: 50px 0;
    border-top: 1px solid #eee;
}
footer .site-links{
    display: flex;

}
footer .site-links li{
    font-size: 12px;
    margin-right: 10px;
    color: #767676;
}

footer .site-links li a{
    color: #4078c0;
}
footer .site-links li a:hover{
    text-decoration: underline;
}

가운데 로고를 넣어야하는데

로고를 넣으면 배치가 달라진다

그러면 어떻게 하느냐

svg 코드로 넣어야한다

<a href="#" class="logo">
                <svg version="1.1"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="24"
                    height="24"
                    viewBox="0 0 16 16"
                    fill="#ccc">
                    <path fill-rule="evenodd"
                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                </svg>
            </a>

로고를 가운데에 배치해야한다

footer .logo{
    position: absolute;
    /* 조상인 inner는 relative다 */
    /* 가운데 배치하는 코드 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* svg코드에 가로 세로 */
    width: 24px;
    height: 24px;
}

로고가 hover되면 색상이 바뀌는데 svg로 조정한다

footer .logo:hover svg{
    fill:#4078c0;
}