티스토리 오디세이 스킨 썸네일 왼쪽으로 옮기기 (글목록)

글목록에서 보이는 썸네일의 위치를 왼쪽으로 옮겨 썸네일-제목-내용 순으로 보이게 바꿔보겠습니다.

 

티스토리 오디세이 스킨 썸네일 왼쪽으로 옮기기 (글목록)

 

안녕하세요 사람사물상황입니다.

본론으로 들어가서 바로 바꿔보고 보여드리겠습니다.

썸네일 좌로

css 2401행
.article-type-, .article-type-thumbnail {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 28px;

.article-type-, .article-type-thumbnail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 28px;
    
    로 바꿉니다.


썸네일 공백정리

css 2408행
.article-type- .thumbnail, .article-type-thumbnail .thumbnail {
    width: 160px;
    height: 108px;
    margin-left: 40px;

.article-type- .thumbnail, .article-type-thumbnail .thumbnail {
    width: 160px;
    height: 108px;
    /* margin-left: 40px; */
    margin-right: 30px; 
    
    로 바꿉니다.
    
    
모바일 공백

2458 
@media screen and (max-width: 1060px)
.article-type- .thumbnail, .article-type-thumbnail .thumbnail {
    width: 80px;
    height: 80px;
    margin-left: 18px;


@media screen and (max-width: 1060px)
.article-type- .thumbnail, .article-type-thumbnail .thumbnail {
    width: 80px;
    height: 80px;
   /* margin-left: 18px; */
    margin-right: 18px;


모바일 본문 공백을 본문넓혀서 조절

2431
.article-type- .summary, .article-type-thumbnail .summary {
    max-width: 620px;
    max-height: 40px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.53;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-word;

    max-width: 760px;  요것만 바꿉니다.

flex-direction: row; 라는게 아이템의 정렬 축을 설정하는 거라고 하네요. row는 세로, column은 가로. 

주석 처리된 부분은 그냥 지워도 되는데, 혹시 나중에 다시 바꿀 수도 있어서 남겨놓았습니다. 그리고 코드는 파일로 담아놨습니다. 다운받아 쓰세요. 간단히 바꾸니 필요 없긴 하지만. 사실 이 글 쓰면서 이 파일만 4번 다시 올렸습니다. 계속 뭐가 추가돼서요. 알아내는대도 3일 걸렸습니다. 저도 초보자라서... 이 파일의 정성을 봐서 받아주세요 ㅠㅠㅠㅠ

새 텍스트 문서 (2).txt

0.00MB

 

 

농담이구요. 이게 바뀌기 전 모습이구요.

 

 

바뀌고 난 후 모습입니다. 혹시 본문 넓이를 넓히고 싶으시면

간단하게 본문 사이즈 조절
css 1412
.area-main {
    width: 100%;
    max-width: 640px;

    max-width: 730px;  까지 조절

 

그럼 이렇게 됩니다. 여기까지가 썸네일 좌로 옮기기이구요.

 

그런데 혹시 제 블로그에서 글 썼던 대로 사이드바가 좌측에 있다면 사이드바와 글목록 사이가 멀어 보일 수 있어요. 

 

 

 

좌 사이드바 적용한 모습인데요. 이때는 사이드바 표시되는 부분이 300px입니다.

저 사이를 줄이려면 , 위에 우 사이드바처럼 본문 영역만 설정해도 되긴 합니다. 본문 영역만 늘리면 사이드바가 조절이 되니까요.

간단하게 본문 사이즈 조절
css 1412
.area-main {
    width: 100%;
    max-width: 640px;

    max-width: 730px;  까지 조절

 

괜찮아 보이죠? 이때 사이드바 안에 자동 조절되어 표시되는 사이즈가 213입니다. 사이드바 자체는 계속 300이에요. 안에 내용물들이 변할 뿐. 그렇게 가능한 게 본문이 730까지구요.

 

근데 여기서 또 디자인상 사이드바, 본문 그리고 그 사이 여백을 더 조절하고 싶다면, 우선 사이드바에 여백을 아예 날리고 사이드바와 본문 영역의 크기를 재조정해요.

여백과 본문, 사이드바 조절시
1 사이드바 우 마진을 없애고

html 마지막
@media screen and (min-width: 1061px)
.wrap-right .area-aside {
    margin: 32px 80px 0 0;
}
    margin: 32px 0px 0 0;


2 사이드바 크기를 줄이고

1465
.area-aside {
    width: 300px;

    width: 213px;


3 본문 넓이를 넓힌다

1448
.area-main {
    width: 100%;
    max-width: 730px;

    max-width: 760px;

그럼 이런 느낌이 납니다. 각각의 넓이나 위치는 원하는 방향에 따라 다르니깐, 몇 가지 만지작해봤고요. 복잡하면 본문 영역만 만져보시길 바래요,저도 글목록 방식을 몇 가지 고민하면서 있기에 이리저리 설정을 해보면서 글을 써봤습니다. 마지막 화면이 제가 원하던 비율이긴 합니다. 

 

원래는 제가 한~두 달 가까이 만져봤던 스킨이 있었는데, 그 스킨이 마지막에 알고 보니 레이아웃을 수정할 수 없는 스킨이었어서, 지금 이 글처럼 조절하려 했을 때, 굉장히 아쉽게 포기했던 기억이 있습니다. 그래서 이 글에서는 수정하는걸 자세히 적어보고 싶었습니다. 여기까지 쓸게요. 이 글은 아무도 안 다루는 내용이니까. 혹시나 찾으셨던 분들 유용했으면 좋겠습니다.

 

티스토리 오디세이 스킨 썸네일 왼쪽으로 옮기기 (글목록)

끝.