DevelUP 퀘스트1 - 반응형 웹(icons)

https://www.youtube.com/watch?v=KYo62fhaR7M&list=LLiL8uphIhspU0n1mUzPGkFQ&index=2&t=0s

반응형 자기소개 웹사이트 따라 만들기 | 티티하우스 | 빔캠프

icons

영상에서는 이미지 스프라이트를 사용하여 픽셀별로 짤라서 사용하는 방법을 사용하고 있었다.

하지만 나는 업로드하는 이미지도 적다고 판단하여 개인적으로 icon 이미지를 찾아 업로드하였습니다.

 

다운로드 한 icon 들을 static/images 안에 넣어주고, a 태그 안에 href 실제 url 을 넣어준 뒤 

.icons a {
    /*아래와 같이 크기를 조정한다고해서 크기가 조정되지 않는다.
    왜냐하면 a 태그는 inline 태그이기 때문이다. display: inline-block; 으로 변경해주자!
    inline-block 으로 가로배치로 되게끔*/
    display: inline-block;
    width: 30px;
    height: 30px;
    /*text-indent: -9999px;*/
}

.icons a.instagram {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/static/images/instagram.png");
}
.icons a.github {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/static/images/github.png");
}
.icons a.blog {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/static/images/blog.png");
}

위와 같은 코드를 입력하였습니다. 다운로드 시 32px 로 다운로드 하였기 때문에 width와 height를 32px로 지정하였고,

a 태그의 경우 inline 태그이기 때문에 display를 inline-block 으로 변경하여 가로로 배치할 수 있도록 설정하였고,

background-image url을 지정하여 사진을 가져왔습니다.

결과물

icons는 구글링 검색을 통해 가져왔습니다.

 

59:00