친절한효자손 취미생활

친효스킨의 메인화면은 인덱스 페이지로 구성되어 있습니다. 글 목록이 최신 순으로 정리되어 출력됩니다. 맨 위의 글이 가장 최신 글 입니다. 그리고 목록 내용은 가장 왼쪽에 썸네일 이미지가 출력됩니다. 그리고 오른쪽으로는 제목, 본문 시작 부분의 텍스트 내용, 카테고리, 글 작성날짜와 시간이 나타나게 되어 있습니다. 여기에서 우리가 수정하고자 하는 부분은 본문의 텍스트 내용에 대한 줄 개수를 수정하는 방법 입니다.

 

친효스킨의 기준 해상도는 모바일 (스마트폰) 입니다. 즉 스마트폰으로 봤을 때 인덱스 페이지를 살펴보시면 본문에 대한 텍스트의 미리보기가 출력되지 않고 있음을 확인 할 수 있습니다. 썸네일과 제목, 카테고리, 발행일 및 날짜는 나오지만 본문 내용의 텍스트는 나오지 않습니다. 결국 이 의미는 특정 해상도 이상에서만 출력이 된다는 뜻 입니다. 현재 미디어쿼리로 세팅되어 있는데 가로 해상도 420px 이상부터 출력되도록 설계되어 있습니다. 그러면 해당 영역을 찾아봐야 합니다. 친효스킨 CSS에서 아래의 영역을 찾아주시기 바랍니다.

 

.index-list-content .index-list-content-inner .index-inner-right a.link_post p.txt_post {
    display: block;
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 2.4em;
}

아마 CSS 아래쪽에 있을 겁니다. 괄호 안에 들어가있는 매소드들의 순서는 다를 수 있습니다. 상관 없는 부분이므로 그냥 구성만 보시기 바랍니다. 여기에서 수정해야 할 부분은 바로 이곳 입니다.

 

-webkit-line-clamp: 2;
height: 2.4em;

이 두 곳의 값을 변경하시면 됩니다. 먼저 -webkit-line-clamp: 2; 의 뜻은 2줄이라는 뜻 입니다. 그래서 PC 해상도에서 텍스트가 2줄까지만 출력됩니다. 그리고 height: 2.4em; 는 해당 텍스트의 총 높이값 입니다. 그런데 왜 2.4 인지 이해가 안 되시죠?

 

매소드 중에서 Line-height: 1.2; 라고 되어 있는 부분 확인 가능하시죠? 이것은 줄 간격 입니다. 즉 한 줄 당 높이가 1.2 라는 의미 입니다. 현재 두 줄로 설정되어 있으니 2 곱하기 1.2를 하여 최총 높이인 height 값이 2.4가 되는 것 입니다. 만약 3줄로 만들고 싶다면 3 곱하기 1.2를 하여 height 값은 3.6이 되는 것 입니다. 이해가 되시나요? 만약 4줄로 만들면 height 값은 뭘까요? 그렇습니다. 4.8em이 되는 겁니다. 최종적으로 3줄짜리 텍스트로 만들고 싶다면 이렇게 설정하면 됩니다.

 

.index-list-content .index-list-content-inner .index-inner-right a.link_post p.txt_post {
    display: block;
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: 3.6em;
}

그렇습니다. 이것이 3줄짜리 글자수 설정 값 입니다.

 

3줄 이상은 추천하지 않습니다. 왜냐하면 본문이 지저분해 보입니다. 물론 개인 취향입니다만 별로인 것 같습니다. 또한 인덱스 목록의 세로 길이가 길어집니다. 물론 많이 차이는 나지 않습니다만 늘어난 길이만큼 알 수 없는 오류가 생길 수 있습니다. 그리고 어차피 텍스트를 보고 본문을 클릭하시는 분들은 거의 없습니다. 제목을 보고 클릭하는 경우가 압도적 입니다. 사실 이런 미리보기 텍스트는 그냥 좀 있어보이려고 넣어놓은 거에요. 큰 의미와 역할은 없습니다. 그럼에도 불구하고 굳이 변경하시겠다면 3줄 이상은 만드시지 않는걸 추천 합니다. 2~3줄이 가장 적당한 것 같습니다. 끝.

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band