Odyssey 스킨의 5가지 커버 스타일중 4번째 커버 스타일을 수정해 보았습니다.
#1 포스터 타입 커버
5가지 커버 스타일중 4번째. 포스터 스타일은 다음과 같이 생겼습니다.
새로타입으로 길쭉하게 되어있어, 말그대로 포스터나 책 리뷰용으로 괜찮게 생겼지만...
둘다 저랑은 인연이 없는지라, 이 커버 스타일은 사용할 일이 없을줄 알았습니다.
하지만 기왕 있는거... 그냥 제 스타일대로 뜯어고쳐서 다른데 써먹을 생각으로 열심히(?) 수정을 해 보았습니다.
#2 수정하기
박스 사이즈 변경
주말 심심풀이 삼아 아무생각없이 하다보니 기록이 누락되어 대충 코드만 남겨봅니다.
포스터 관련 CSS의 범위는 대략 다음과 같습니다. [style.css:2483~2595]
아래 내용으로 수정하였습니다.
/* article-type-poster */
.article-type-poster {
display: inline-block;
width: 32%;
margin-bottom: 30px;
vertical-align: top;
margin-right: 1%;
}
.article-type-poster .thumbnail {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
text-align: center;
}
.article-type-poster .thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
.article-type-poster .title {
width: 100%;
margin-bottom: 2px;
font-size: 14px;
font-weight: 400;
line-height: 1.43;
white-space: initial;
word-break: keep-all;
}
.article-type-poster .date:before {
position: relative;
}
.article-type-poster .box-meta,
.article-type-poster .link-category,
.article-type-poster .reply,
.article-type-poster .summary,
.box-cover-title .link-title {
display: none;
}
.wrap-right .area-cover > .article-type-poster:nth-child(3n),
.wrap-right .area-view > .article-type-poster:nth-child(3n) {
margin-right: 0;
}
/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
.article-type-poster {
max-width: 33%;
}
}
/* ----- media query - tablet ----- */
@media screen and (min-width: 761px) and (max-width: 1060px) {
.article-type-poster {
max-width: 33%;
}
.article-type-poster:nth-of-type(3n) {
margin-right: 0;
}
}
/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
.box-cover-poster {
white-space: inherit;
}
}
/* ----- media query - mobile ----- */
@media screen and (max-width: 850px) {
.box-cover-poster .article-type-poster {
width: 32%;
}
.box-cover-poster .article-type-poster .thumbnail {
width: 100%;
height: 0;
padding-top: 100%;
}
}
/* ----- media query - mobile ----- */
@media screen and (max-width: 760px) {
.box-cover-poster .article-type-poster {
width: 49%;
}
.article-type-poster:nth-of-type(2n) {
margin-right: 0;
}
.article-type-poster .title {
margin-bottom: 30px;
}
}
/* // article-type-poster */혹시 따라하시는분이 계시다면... 주의해야할게 { ... } 안의 내용만 바꿀게 아니라 순서도 바뀌어야 정상 작동 합니다.
이제 다음과 같이 썸네일 박스가 1:1 비율로 변경되었습니다.
모서리 둥글게 + 마우스 오버 효과 추가
박스를 정사각형으로 만들었으니 이제 기존의 커버 스타일들과 통일감을 주기위해 모서리를 둥글게.
그리고 마우스를 올렸을때의 효과를 줍니다.
.article-type-poster .thumbnail {
position: relative; width: 100%; height: 0;
text-align: center;
padding-top: 100%;
border-radius: 8px;
transition: 0.6s; /* 이부분을 추가 */
}
.article-type-poster:hover .thumbnail {
box-shadow: 0 0 0 6px #000 inset; /* 2줄 중 원하는 스타일 1줄만 적어준다 */
border: 6px solid black; /* 위에껀 박스의 크기 없이 안쪽으로만 선이 굵어지고 아래쪽은 박스가 살짝 커지며 선이 생긴다 */
}
.article-type-poster .thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px; /* 이 부분을 추가 */
background: rgba(0, 0, 0, 0.05);
}
[ style.css:2491] .article-type-poster .thumbnail { ... }의 안에 border-radius와 transition 를 적어주고, .article-type-poster .thumbnail:before { ... }의 안에도 border-radius를 적어줍니다.
마우스를 올렸을때 반응을 하게 하기위해 아래쪽에 새로운 속성 .article-type-poster:hover .thumbnail { ... }를 하나 만들어 주는데,
안에 들어갈 내용은 위에 적혀있는 2줄 중 마음에 드는 타입으로 1줄만 사용합니다.
이제 모서리가 둥글게 변하고 마우스스가 올라왔을때 테두리에 애니메이션 효과가 추가되었습니다.
썸네일 해상도 및 사이즈 수정
위 이지미를 보면 글자의 사이즈도 안맞고 썸네일의 이미지도 자글자글한게 매우 보기가 싫게 되어있습니다.
자바스크립트에 이미지 랜더링 사이즈가 지정되어 있기 때문인데 박스는 1:1인데 랜더링 시켜주는 이미지는 1:1 비율이 아니라 더더욱 보기 좋지 않습니다.
// smart crop thumbnail
if(!isResizeType){
var thumbType = '';
if(thumbUrl){
if($(this).hasClass('article-type-crop')){
thumbType = 'S640x460'
}
else if($(this).hasClass('article-type-thumbnail')){
thumbType = 'S320x216';
}
else if($(this).hasClass('article-type-poster')){
thumbType = 'S200x265';
}
}해당 파일을 찾아 'article-type-poster' 의 수치를 600x600 으로 변경하여 약 해상도를 3배정도 높이고 비율또한 1:1로 나오도록 바꿔주면 됩니다.
#3 수정 결과
정사각형, 해상도, 마우스 오버 효과 등 모든 수정이 끝나 다음과 같은 형태가 되었습니다.
이정도면 나름 만족스럽게 된듯한 느낌!
접은글 바깥 1
접은글 안쪽 1
안쪽 2
안쪽 3