반응형
Related Articles
- 구형 非반응형 스킨 손보기 -
- 이 글은 일종의 개인 작업의 로그이며 "How To"입니다. -
옛날.. 아주 아주 옛날 스킨을 조금씩 손보고 있습니다.
그 중 요즘 스킨에서 쓸만하다고 생각되는 모듈을 조금씩 이식하고 있습니다.
그 중에 관련글 추가(Related Articles)의 방법입니다.
참고한 스킨은 Poster 입니다.
썸네일 사이즈를 조정하면 이미지를 못가져오는 것 같은데 이부분은 잘 모르겠습니다.
skin.html 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="related-articles"> <h2><strong>'IT Tech/Web'</strong> Related Articles</h2> <ul> <li style="list-style:none"> <a href=""> <span class="thum"> </span> <span class="title"></span> </a> </li> </ul></div> |
style.css 파일 수정
1 2 3 4 5 6 7 8 9 10 11 12 | .related-articles { overflow: hidden; width: 100%; margin: 80px 0 60px; }.related-articles h2 { margin-bottom: 28px; font-weight: 400; font-size: 0.8 rem; }.related-articles h2 rem { border-bottom: 1px solid #000; font-style: normal; }.related-articles ul { padding : 0; }.related-articles ul li { float: left; width: 24.0625%; margin: 0 0 12px; padding-left: 1.25%; }.related-articles ul li:first-child { padding-left: 0;}.related-articles ul li a { display: block; text-decoration: none; }.related-articles ul li .thum { display: block; position: relative; overflow: hidden; height: 0; margin-bottom: 19px; padding-bottom: 75.757575757575758%; background-color: #ebebeb;}.related-articles ul li .thum:before { content: "NO IMAGE"; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: 18px; margin: -9px 0 0 0; text-align: center; font-family: 'Arial'; font-weight: bold; font-size: 0.875em; color: #cbcbcb; }.related-articles ul li .thum img { position: absolute; top:0; left:0; z-index:10; width:100%; height:100%; }.related-articles ul li .category { display: inline-block; margin-bottom: 16px; border-bottom: 1px solid #a3a3a3; font-family: gulim, serif; font-size: 0.875em; color: #808080;}.related-articles ul li .date { display: block; font-size: 0.8125em; color: #999; } |
적용 예시
https://mindeater.tistory.com/1920
반응형
'IT Tech > Web' 카테고리의 다른 글
| [WEB] 티스토리 블로그 로딩 속도 관련 튜닝 요소...(Continued...) (1) | 2019.01.26 |
|---|
