갤러리 스킨에서 이미지로 된 버튼을 텍스트로 수정하기 질문드립니다.
본문
[▲ 썽피리님께서 올려주신 '갤러리스킨']
제가 위 스킨을 이용해서 모바일 갤러리를 적용하였는데,
다 좋은데 딱 하나 문제점이 있습니다..
글쓰기, 목록, 등록 등등 버튼에 관련된 부분들이 가로1800픽셀 정도되는 gif파일 하나에서
전부 추출되어(?) 적용되어지는 것 같더라구요..
덕분에, 너무 버튼들이 너무 흐리흐리 합니다..ㅠㅠ
저는 이걸 텍스트로 바꾸거나, 하다못해 하나하나 따로 이미지를 2배 크기로 제작해서 깔끔하게 넣고 싶은데
하나의 파일로 여러버튼을 저렇게 적용하는건 처음봐서 도저히 수정을 못하겠습니다.
제작자분이 바쁘셔서 요즘 피드백이 없는 것 같아서
이렇게 질문드립니다..
답변 1
http://css3buttongenerator.com/
css로 버튼을 만들어서 대체하시는게 어떨까요. :)
위 사이트에서 원하시는 색상이나 형태로 선택하신다음
해당 css를 복사해서 리스트 파일에 붙여넣고
기존 버튼 위치에 퍼온 css의 클래스를 적용하시면 될것 같습니다. ㅎ
뒷집돌쇠님 좋은 사이트 소개 감사드립니다 ^^
근데, 제가 너무 초보라 그러는데 예시하나만 가능할까요..?
현재 버튼을 만들고 하단에 나오는 녀석들을 style.css에 넣고,
내용을 보니까 .btn <-- 이렇게 시작하길래
list.skin에 해당 버튼이 있어야할 부분을 지우고,
<div=class"btn"> </div> 이런식으로 했더니 엉망이네요...ㅠㅠ
기초가 없고, 전업 개발자도 아니다 보니까
이렇게 멍청합니다 제가..
아, 방금 재시도해서 해당 위치에 삽입되는건 성공했는데,
이상하게 적용이 된건지 둥근테두리도 없고, 글씨도 없고, 그냥 배경색만 칠해져 있네요...
크기는 제가 알아서 css에서 width와 height를 추가해서
조금씩 조절해가면서 맞춰야 하나요?
자학하지 마세요 ^^
처음엔 누구다 다 실수합니다. 저는 더 했습니다. ㅎㅎ
아마 기본 클래스명인 btn은 어딘가 다른 css에서 사용되고 있을지 모릅니다.
(그러면 css에서 충돌이 발생될 수 있습니다.)
그러니 우선 클래스명을 listbtn 정도로 수정하시고
<div class="listbtn">목록</div>
이런식으로 사용하시면 됩니다.
만약 크기를 수정하고 싶으시면
.listbtn{
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 5px 5px 5px 5px;
text-decoration: none;
}
에서 font-size 대비해서 padding값을 수정하시면 됩니다.
위와 같은 padding값은 위 5픽셀 우측 5픽셀 하단 5픽셀 좌측 5픽셀의 여백을 의미합니다.
줄여서는 padding: 5px;
라고만 써도 되죠. ^^
모서리 곡선값을 조정하시려면
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
의 6의 숫자를 변경하시면 됩니다.
하하.. 이것저것 막 만져서 현재 위치에 알맞은 크기까지 버튼까지 잘 눌리는데,
버튼 생성할때 넣었던 텍스트는 뭔짓을 해도 보이질 않네요..ㅠㅠ
게다가 border 체크하지도 않았는데 버튼주위로 테두리도 생겨있네요...
마치 버튼이 3d 입체모양 처럼 되있어요..
저로써는 요런 좋은 사이트가 있어도 쉽지 않네요..^^;
현재 검색버튼을 수정하고 있는데, 원래는
<input type="image" src="<?=$board_skin_url?>/img/btn_search.gif" class="btn_search_submit" alt="검색" />
이렇게 되있던걸
<button type="submit" class="btnbtnbtn3" alt="검색" >
이렇게 되있는 상태입니다.
혹시 위에서 '목록'이라고 넣어주신게 텍스트를 그런식으로 넣어줘야 하는건가요?
텍스트 성공적으로 넣었습니다..
다만 버튼주위로 입체적인 테두리가 생기면서 3d 입체감이 나는데,
혹시 원인을 아시나요?..ㅠㅠ
원래 있었던 class="btn_search_submit" 부분이 검색으로 연결시켜주는것 같네요.
<?php if ($search_href) { ?><a class="btn_search_submit" href="<?php echo $search_href; ?>" title="검색"><div class="btnbtnbtn3">검색</div></a><?php } ?>
이렇게 한번 해보세요.
링크를 한번 줘보시겠어요? ㅎ
아, 말씀해주신 사이트에서 보더를 선택하고,
그냥 배경색이랑 같은 색으로 해버리니까 그 입체감이 사라지네요..ㄷㄷㄷ
원인은 모르겠지만, 이걸로 가능할 것 같아요..ㅎㅎ
다른 버튼들도 한번 시도해 봐야겠어요!!
너무 친절한 답변 감사드립니다 ^^
