라공에디션

썰타래 게시판 마개조 기록(3) : css 조정

<span class="sv_member">니루</span>
니루 @tabom0w0
2026-05-17 16:00

1. 게시글 목록에서 css 정리

image

style.css 수정

(1) .log20_item_title

- 제목 폰트 사이즈 정리

- 제목 길어질 시 말줄임표와 함께 생략됨

- 제목란 높이 조정

(2) .log20_item_subtitle

- 부제목 폰트 사이즈 정리

- 부제목 텍스트 줄바꿈 설정 변경

(3) .log20_item_image + .log20_item_image img

- 표지 이미지 위치 조정

.log20_item_title {
    width: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    background: var(--white);
    border-bottom: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.log20_item_subtitle {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 4;
    pointer-events: none;
    text-align: center;
    width: 70%;
    max-width: 70%;
    word-wrap: break-word;
    word-break: keep-all;
    text-wrap-style: balance;
    line-height: 1.4;
}

.log20_item_image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    overflow: hidden;
    position: relative;
    border-top: none;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.log20_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* 표지 이미지 위치 조정 */
    display: block;
    position: relative;
    z-index: 1;
}


2. 타래 개수 표시 css 조정

image

list.skin.php

<span class="log20_order_badge">
    <i class="fa-solid fa-comment" style="margin-right: 1px;"></i><?php echo isset($list[$i]['total_comment_count']) ? (int)$list[$i]['total_comment_count'] : ''; ?> 
</span>


style.css 수정

.log20_order_badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    height: 15px;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 2px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding-bottom: 2px;
    text-shadow: -1.5px 0 #fff, 0 1.5px #fff, 1.5px 0 #fff, 0 -1.5px #fff;
}


3. 제목 배경색 디폴트값을 검정에서 하양으로 변경

write.skin.php

<div class="log20_field_block">
    <label for="wr_2">제목 배경 색</label>
    <div class="log20_field_inline">
        <input type="color" name="wr_2" value="<?php echo isset($write['wr_2']) && $write['wr_2'] ? $write['wr_2'] : '#000000' ?>" id="wr_2" class="frm_input">
        <input type="text" name="wr_2_text" value="<?php echo isset($write['wr_2']) ? $write['wr_2'] : '' ?>" id="wr_2_text" class="frm_input" placeholder="#000000 형식" maxlength="7">
    </div>
</div>

제목 배경 색 입력 부분을 찾아서

<input type="color" name="wr_2" value="<?php echo isset($write['wr_2']) && $write['wr_2'] ? $write['wr_2'] : '#ffffff' ?>" id="wr_2" class="frm_input">

이 부분 중간의 컬러코드를 바꾸면 디폴트값을 취향대로 설정해둘 수 있음

댓글목록

니루

댓글

니루 @tabom0w0
아 맞다 그냥사람님이 올려주신 260501 최신버전의 임베딩 관련 js 파일들만 슬쩍 적용해뒀음. 이제 트위터도 임베딩 되는 것이다
니루

댓글

니루 @tabom0w0
제목 배경색 디폴트값을 검정에서 하양으로 변경해두기 맨날 까먹다가 드디어 함