(html, css) 자기소개 페이지 만들기 4일차~

안녕하세요 더위를 먹었는지 감기에 걸렸는지 머리가 어질어질 해서
과제를 하기가 힘들었네요 ㅠㅠ 그래도 열심히 했습니다.
오늘은 맨 밑에 footer 를 이용해서 아이콘을 넣어 봤습니다.
어떻게 넣을까 고민을 하다가
페이스북과 연락처는 alert를 이용했구
인스타그램은 사진에 href를 이용해서 만들었습니다~

코드를 보여드리죠!

 <div class="pictures icons">
    <div id="facebook" onclick="alert('페이스북에 최예흠 치면 바로나옵니다')" class="icon"></div>
    <a href="https://www.instagram.com/ye_heumheumm/">
        <div id="insta" class="icon"></div>
    </a>
    <div id="address" onclick="alert('내용');" class="icon"></div>
 </div>

이렇게 html 코드를 짰습니다.

아래는 css 코드 입니당.

.icons {
    font-size: 0;
}

.icon {
    display: inline-block;
    background-size: cover;
    background-position: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    background-repeat: no-repeat;
}

#facebook {
    background-image: url(./facebookicon.png);
}

#insta {
    background-image: url(./instaicon.png);
}

#address {
    background-image: url(./addressicon.png);
}

자 이렇게해서 코드들을 넣었더니

그 결과!

짜잔 그리고

짜자잔 이렇게 위에 팝업창으로 잘 나오네요 ㅎㅎ

자 이제 제 페이지가 거의 완성 되었네요 1주차기 때문에
너무 앞서서 가진 않고 차근차근 하려고 합니다.
앞으로 할 것들 공부는 조금씩 먼저 하겠습니다 그럼 이만!