주제 목록에 “조회” 열 추가하기
저는 개발자나 프로그래머가 아닙니다. Google Chrome의 “요소 검사” 기능을 사용하여 CSS 코드를 몇 시간 동안 직접 조정해 보았습니다. 이렇게 하면 조회 열이 올바르게 표시되며, 모든 열의 너비를 원하는 대로 조정할 수도 있습니다. 아래 CSS 코드에서 너비를 자유롭게 조정할 수 있습니다. 또한 각 열에 해당하는 코드를 쉽게 구분할 수 있도록 코드에 주석을 추가했습니다. 각 열에는 두 가지 영역(헤더와 행)이 있습니다. 이 두 영역의 너비가 일치해야 합니다.
모두에게 도움이 되기를 바랍니다: @daming @bksubhuti @eddy2
설명
1. 새 컴포넌트 생성
2. 이 CSS 복사
위에서 @jordan.vidrine이 제공한 코드 대신 아래 업데이트된 CSS를 사용하세요.
옵션 A) 데스크톱에만 조회 열 추가 (권장)
- CSS 코드를 데스크톱 탭에 추가합니다.
옵션 B) 데스크톱 및 모바일 모두에 조회 열 추가
- CSS 코드를 공용 탭에 추가합니다.
옵션 C) 모바일에만 조회 열 추가
- CSS 코드를 모바일 탭에 추가합니다.
참고: 옵션 B 또는 C를 선택한 경우…
모바일에서는 3개의 열(답변, 조회, 활동)이 너무 많은 공간을 차지하여 조여 보입니다. 모바일에서 이 기능이 필요하시다면 3개 열 중 하나를 제거하는 것을 권장합니다. 숨기고자 하는 열의 CSS 코드 내 두 영역(헤더, 행) 모두에 Display: none을 추가하여 수행할 수 있습니다.
/* [주제] */
/* 주제 헤더 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
width: 66%;
}
/* 주제 행 */
.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
width: 66%;
}
/* [답변] */
/* 답변 헤더 */
.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
width: 7%;
order: 2;
}
/* 답변 행 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
width: 7%;
order: 2;
}
/* [조회] */
/* 조회 헤더 */
.full-width .contents .topic-list .topic-list-header .topic-list-data.views {
display: block;
width: 7%;
order: 3;
}
/* 조회 행 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
width: 7%;
order: 3;
display: flex;
justify-content: center;
align-items: center;
}
/* [활동] */
/* 활동 헤더 */
.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
display: block;
width: 7%;
order: 4;
}
/* 활동 행 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
width: 7%;
order: 4;
}
@jordan.vidrine 제가 작성한 CSS에 수정 사항이 있다면 알려주세요. 제가 정확히 무엇을 하고 있는지 잘 모르지만… 작동은 합니다 ㅋㅋ.