본문 바로가기
블로그 운영

[블로그 팁] FastBoot 리스트 목록 썸네일(대표 이미지) 크기 변경

by 라이킴 2018. 2. 22. 댓글 개
반응형



이번에는 스킨 FastBoot의 리스트 목록 크기 변경에 대해 알아보도록 합시다 






(↑ 위에처럼 썸네일 크기와 그에 맞춰 경계선(칸)변경을 해줄 예정입니다 )








1.  스킨 편집에서 html 편집에 들어가 줍니다.








2.  CSS 편집에 들어가 컨트롤+F를 누르고


/* Search Result(Category) */ 를 검색해줍니다.









3. 그럼 사진처럼 이동이 됩니다.


이 부분 수정을 할 것입니다











4. 먼저 #search_list li .thumb img (썸네일 크기) 부터 변경을 해줍니다.


width(너비)와 height(높이) 각자 원하는 크기로 변경을 해주시면 되겠습니다.







참고로 저는

 




width(너비) 150px와  height(높이) 120px로 설정 했습니다.





이렇게 설정을 하시고 


그냥 저장을 하시면 





썸네일 크기는 커졌지만 


사진처럼 따닥따닥 붙고 각 경계선 위치도 이상해집니다.






5. 그래서 이번에는 바로 위에있는


#search_title ol li 부분을 수정해줍니다.





#search_title ol li 코드를 보시면 아시겠지만 똑같은 코드가 2개 있습니다 



2개를 모두 똑같이


margin-left 와(숫자가 커질수록 오른쪽으로 이동)

 line-height (라인 높이) , padding을 변경해 주시면 됩니다.







참고로 저는 



앞뒤 모두  margin-left:1px; line-height:40px; padding:50px 로 설정 했습니다.

(모바일에도 영향을 주니 모바일도 확인하시며 작업하시길 바랍니다 )







그리고 블로그에 돌아가 리스트 확인을 해보시면 





good ! 멋지고 깔끔하게 변경되었습니다.









모바일 버전도 확인을 합니다.



사진처럼 모바일까지 깔끔하게 됐다면 완성입니다.



제 리스트 수정 버전이 괜찮다 싶으시면 저처럼 똑같이 숫자를 넣으시면 되겠습니다.








이상으로  FastBoot 리스트 썸네일(대표 이미지) 크기 변경에 대해서 알아보았습니다




다음에는 이 리스트 글자 색 변경에 대해서 알아볼 예정입니다.

반응형

댓글