썰타래 게시판 마개조 기록(3) : css 조정
1. 게시글 목록에서 css 정리

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 조정

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">이 부분 중간의 컬러코드를 바꾸면 디폴트값을 취향대로 설정해둘 수 있음
- 이전글썰타래 게시판 마개조 기록(2) : 최신순 정렬 26.04.11
- 다음글썰타래 게시판 마개조 기록(4) : 첨부 이미지 wepb 변환 로직 추가 26.05.22
댓글목록
댓글
니루 @tabom0w0댓글
니루 @tabom0w0