Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

비전공 프론트엔드 개발자

21-12-15일 클론 코딩 이슈와 작업 현황에 관하여.. 본문

카테고리 없음

21-12-15일 클론 코딩 이슈와 작업 현황에 관하여..

JJ_hyun 2021. 12. 15. 20:31

오늘은 스프라이트 기법을 이용하여 background-image 를 화면에 출력하고, :hover 까지 써볼 예정이다. 

 

.main_second .main_second_sns .git {
    display: inline-block;
    background:url(../img/sprite_2.png) no-repeat -7px -10px;
    background-size: 200px;
    width: 30px;
    height: 30px;
}

.main_second .main_second_sns .git:hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -57px -10px;
    background-size: 200px;
}

.main_second .main_second_sns .line {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -7px -60px;
    background-size: 200px;
}

.main_second .main_second_sns .line:hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -57px -60px;
    background-size: 200px;
}
 

.main_second .main_second_sns .inst {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -108px -10px;
    background-size: 200px;
}

.main_second .main_second_sns .inst:hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -108px -60px;
    background-size: 200px;
}

.main_second .main_second_sns .twit {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -7px -110px;
    background-size: 200px;
}

.main_second .main_second_sns .twit:hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -57px -110px;
    background-size: 200px;
}

.main_second .main_second_sns .face {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -108px -111px;
    background-size: 200px;
}

.main_second .main_second_sns .face:hover {
    width: 30px;
    height: 30px;
    background: url(../img/sprite_2.png) no-repeat -158px -11px;
    background-size: 200px;
}
.main_second .main_second_souce {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 20px;
    background: url(../img/sprite_2.png)no-repeat -160px -59px;
    background-size: 200px;
}
.main_second .main_second_souce:hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 20px;
    background: url(../img/sprite_2.png)no-repeat -160px -109px;
    background-size: 200px;
}
 

사실 이 코드는 중복되는 양이 많아서 충분히 줄일 수 있을 것 같다.

그건 일단 글을 다 쓰고나서,, 

처음 스프라이트 기법을 사용하고자 코드를 입력하고 보니,,,,,

사진이 너무 컸다..내가 원하는 사이즈로 출력을 하니 사진이 짤리는 현상이 머리와 마음을 복잡하게 했다...

여러가지 방법과 시도를 해보았는데 그중에 background-size 로 해당 컨텐츠의 이미지를 줄여버렸다.

이는 곳 문제를 해결하였음을 직감하였다.

.

.

 

background-image 보단 background로 속성을 묶어서 no-repeat ( 반복하지 않음 ) 

position 으로 위치를 잡아주었다. 

그리고 문제 해결의 키워드였던 background-size로 원본크기를 200px 로 줄였다. 

vscode로 position을 변경하면서 화면을 보기엔 손이 너무 많이 가서 개발자도구를 열어서 

키보드로 손쉽게 위치를 지정 할 수 있었다. 

힌트를 주신 재현쌤 너무 감사합니다.. 2시간치 고민이 사라지는 순간이였어요...

.

.

 

이것으로 클론 코딩은 끝이 났다. 이제 스터디때 발표만 남은 상태이고,,, 14일 공부했던 내용들을 좀 더 다듬어서

스터디 친구에게 잘 설명해 주는 일만 남았다. 

내가 제대로 알고 있어야 제대로 설명 해 줄 수 있다!! 나를 위해 공부하자. 화이팅!!