내부의 | 에 padding 적용.
- padding-top, padding-bottom: 각각 10.5px씩 적용하여 총 21px 여백 확보.
*/
.kboard-list tr td {
padding-top: 20px !important;
padding-bottom: 21px !important;
}
/*──────────────────────────────────────────────────────
15. 공지사항 텍스트 스타일 조정
──────────────────────────────────────────────────────*/
.kboard-default-cut-strings {
font-size: 16px !important;
font-weight: 600 !important; /* medium */
line-height: 1.4 !important;
}
/*──────────────────────────────────────────────────────
16. 알림 뱃지 위치 및 크기 조정
- position:relative로 위치 조정 가능
- top:-2px로 위쪽으로 살짝 이동
- transform:scale(1.05)로 105% 확대
- transform-origin:center로 중앙 기준 확대
──────────────────────────────────────────────────────*/
.kboard-default-new-notify {
position: relative !important;
top: 0px !important;
transform: scale(1.05) !important;
transform-origin: center center !important;
}
/* 알림 뱃지 패딩 조정
- 위/아래 패딩을 4px, 좌/우 패딩을 6px로 설정하여
정사각형에 가깝게 만듭니다 */
.kboard-default-new-notify {
padding: 4px 4px !important;
margin-right: 2px !important;
}
/* 17. 알림 뱃지 글자 크기 */
.kboard-default-new-notify {
font-size: 14px !important;
font-weight: 600 !important; /* 글자 두께를 medium 이상으로 설정 */
}
/* 활성 페이지 번호 배경을 검정색으로 변경 */
.kboard-pagination .kboard-pagination-pages li.active a {
background-color: #000 !important;
color: #fff !important; /* 필요 시 글자색도 흰색으로 변경 */
}
/* 검색 폼 안의 버튼만 검정 배경으로 강제 */
.kboard-list-header .kboard-search button.kboard-default-button-small {
background-color: #000 !important;
color: #fff !important;
}
/* 전체 건수 텍스트에 Medium(500) 폰트 굵기 적용 */
.kboard-total-count {
font-weight: 600 !important;
}
@media only screen and (max-width: 768px) {
/* 모바일에서만 전체 카운트와 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
}
/* ===========================================================
1) 리스트 상단 여백 늘리기 (Desktop & Mobile)
=========================================================== */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 2rem !important; /* 데스크탑에서도 충분한 여백 */
}
/* ===========================================================
2) 모바일 전용 조정 (≤768px)
=========================================================== */
@media only screen and (max-width: 768px) {
/* 2-1) 전체 카운트 & 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
/* 2-2) 테이블 분리 모드 & 첫 행 상단 1px 테두리 */
#kboard-default-list .kboard-list table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
#kboard-default-list .kboard-list table tbody tr:first-child td {
border-top: 2px solid #000000 !important;
}
/* 2-3) 헤더에 패딩 배치하여 검색창과 리스트 겹침 방지 */
#kboard-default-list .kboard-list-header {
display: block !important;
position: relative !important;
text-align: center !important;
padding-bottom: 4rem !important; /* 검색창 높이 + 여유 공간 */
}
/* 2-4) 검색창 중앙 정렬 & 폭 조정 */
#kboard-default-list .kboard-list-header .kboard-search {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: inline-block !important;
float: none !important;
width: calc(100% - 32px) !important; /* 좌우 16px 여유 */
max-width: 500px !important; /* 최대 폭 제한 */
margin: 0 !important;
}
/* 2-5) 모바일에서만 리스트 상단 여백은 헤더 패딩으로 대체 */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 0 !important;
}
}
.kboard-default-poweredby {
display: none;
}
/* 0) 리스트/헤더 최대폭 1200px로 확대 */
.kboard-list-header,
.kboard-list table {
max-width: 1200px !important;
}
/* 1) 데스크탑: 컬럼 폭 재배치 + 작성자 줄바꿈 방지 */
@media (min-width: 769px) {
.kboard-list table {
table-layout: auto !important; /* 컬럼 폭 계산 여유 */
}
/* 작성자 */
.kboard-list th.kboard-list-user,
.kboard-list td.kboard-list-user {
white-space: nowrap !important;
width: 150px !important; /* 필요시 160~200px로 조절 */
}
/* 번호 */
.kboard-list th.kboard-list-uid,
.kboard-list td.kboard-list-uid {
width: 72px !important;
}
/* 작성일 */
.kboard-list th.kboard-list-date,
.kboard-list td.kboard-list-date {
width: 75px !important;
}
/* 조회수 */
.kboard-list th.kboard-list-view,
.kboard-list td.kboard-list-view {
width: 55px !important;
}
/* 제목은 나머지 가용폭을 차지 */
.kboard-list th.kboard-list-title,
.kboard-list td.kboard-list-title {
width: auto !important;
}
}
/* 2) 모바일: 다시 감싸지도록 복원 */
@media (max-width: 768px) {
.kboard-list th.kboard-list-user,
.kboard-list td.kboard-list-user {
white-space: normal !important;
width: auto !important;
}
}
/* ===========================================================
2) 모바일 전용 조정 (≤768px)
=========================================================== */
@media only screen and (max-width: 768px) {
/* 2-1) 전체 카운트 & 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
/* 2-2) 테이블 분리 모드 & 첫 행 상단 1px 테두리 */
#kboard-default-list .kboard-list table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
#kboard-default-list .kboard-list table tbody tr:first-child td {
border-top: 2px solid #000000 !important;
}
/* 2-3) 헤더에 패딩 배치하여 검색창과 리스트 겹침 방지 */
#kboard-default-list .kboard-list-header {
display: block !important;
position: relative !important;
text-align: center !important;
padding-bottom: 3rem !important; /* 검색창 높이 + 여유 공간 */
}
/* 2-4) 검색창 중앙 정렬 & 폭 조정 - 좌우 꽉 채우기 */
#kboard-default-list .kboard-list-header .kboard-search {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: inline-block !important;
float: none !important;
width: calc(100% - 8px) !important; /* 좌우 4px 여유만 남기기 */
max-width: none !important; /* 최대 폭 제한 해제 */
margin: 0 !important;
}
/* 2-4-1) 검색 폼 자체도 전체 폭 사용 */
#kboard-default-list .kboard-list-header .kboard-search form {
width: 100% !important;
display: flex !important;
gap: 8px !important;
}
/* 2-4-2) 검색 폼 내부 요소들 크기 조정 */
#kboard-default-list .kboard-list-header .kboard-search select {
flex: 0 0 auto !important;
min-width: 70px !important;
max-width: 80px !important;
}
#kboard-default-list .kboard-list-header .kboard-search input[type="text"] {
flex: 1 !important;
margin-right: 0 !important;
min-width: 0 !important; /* flex item이 너무 작아지지 않도록 */
}
#kboard-default-list .kboard-list-header .kboard-search button {
flex: 0 0 auto !important;
margin-left: 0 !important;
min-width: 50px !important;
}
/* 2-5) 모바일에서 리스트와 헤더 간 여백 조정 */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 1rem !important;
}
}
.kboard-default-poweredby {
display: none;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f06ef23 *//*──────────────────────────────────────────────────────
1. 컨테이너 폭 및 중앙 정렬
──────────────────────────────────────────────────────*/
.kboard-list-header,
.kboard-list table {
max-width: 1140px; /* 테이블과 헤더가 동일한 폭 */
width: 100%;
margin: 0 auto !important; /* 좌우 중앙 정렬 */
box-sizing: border-box;
}
/*──────────────────────────────────────────────────────
2. 공지사항 체크박스 포함 라벨 숨기기
──────────────────────────────────────────────────────*/
/*──────────────────────────────────────────────────────
3. 타이틀 입력 필드 스타일
──────────────────────────────────────────────────────*/
.attr-value input#title {
width: 1200px !important;
box-sizing: border-box !important;
}
/*──────────────────────────────────────────────────────
4. 리스트 헤더 Flex 레이아웃 (양끝 정렬)
──────────────────────────────────────────────────────*/
.kboard-list-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important; /* 왼쪽·오른쪽 양끝 배치 */
margin-bottom: 4px !important;
box-sizing: border-box;
}
/*──────────────────────────────────────────────────────
5. 전체 건수 텍스트 왼쪽 정렬
──────────────────────────────────────────────────────*/
.kboard-total-count {
text-align: left !important;
flex-shrink: 0 !important;
}
/*──────────────────────────────────────────────────────
6. 정렬 옵션(select) 숨기기
──────────────────────────────────────────────────────*/
select[name="kboard_list_sort"] {
display: none !important;
}
/*──────────────────────────────────────────────────────
7. 추천·투표 관련 셀 숨기기
──────────────────────────────────────────────────────*/
td.kboard-list-vote {
display: none !important;
}
/*──────────────────────────────────────────────────────
8. 게시글 정보 컬러 통일
──────────────────────────────────────────────────────*/
td.kboard-list-uid,
td.kboard-list-user,
td.kboard-list-date,
td.kboard-list-view {
color: #555555 !important;
}
/*──────────────────────────────────────────────────────
9. 새 글 알림 배지 색상
──────────────────────────────────────────────────────*/
span.kboard-default-new-notify {
background-color: #0057A7 !important;
}
/*──────────────────────────────────────────────────────
10. 테이블 헤더 상단 테두리
──────────────────────────────────────────────────────*/
.kboard-list table thead {
border-top: 2px solid #dbdbdb !important;
}
/*──────────────────────────────────────────────────────
11. 페이지네이션 여백
──────────────────────────────────────────────────────*/
.kboard-pagination {
margin-top: 45px !important;
}
/*──────────────────────────────────────────────────────
12. 버튼·링크 공통 스타일
──────────────────────────────────────────────────────*/
button.kboard-default-button-small,
a.kboard-default-button-small {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
box-sizing: border-box !important;
font-family: sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 1 !important;
color: #333333 !important;
text-decoration: none !important;
background-color: #f0f0f0 !important;
padding: 2px 10px !important;
}
/*──────────────────────────────────────────────────────
13. 검색 폼 우측 끝 배치
──────────────────────────────────────────────────────*/
.kboard-list-header .kboard-search {
margin: 0 !important;
margin-left: auto !important; /* flex에서 오른쪽으로 밀기 */
flex-shrink: 0 !important;
text-align: right !important;
}
.kboard-list-header .kboard-search form {
display: inline-flex !important;
align-items: center !important;
}
.kboard-list-header .kboard-search select,
.kboard-list-header .kboard-search input[type="text"] {
height: 30px !important;
margin-right: 8px !important;
box-sizing: border-box !important;
}
/*──────────────────────────────────────────────────────
14. 모바일(≤768px) 중앙 정렬
──────────────────────────────────────────────────────*/
@media screen and (max-width: 768px) {
.kboard-list-header .kboard-search {
margin: 0 auto !important;
text-align: center !important;
}
}
/* (A) 상대 위치 조정 — left 값으로 밀기 */
.kboard-list-header .kboard-search {
position: relative !important;
left: -36px !important; /* 왼쪽으로 20px 이동, + 값이면 오른쪽으로 이동 */
}
/* 제목: UID, 작성자, 날짜, 조회수 텍스트 컬러 변경 */
td.kboard-list-uid,
td.kboard-list-user,
td.kboard-list-date,
td.kboard-list-view {
color: #555555 !important;
}
/* 제목: 새로운 글 알림 배경 컬러 지정 */
span.kboard-default-new-notify {
background-color: #000000 !important;
}
/* 제목: 테이블 헤더 상단 라인 컬러 및 두께 지정 */
.kboard-list table thead {
border-top: 2px solid #000000 !important;
}
/* 제목: 게시판 리스트 행(td)에 상하 여백 적용 */
/*
각주:
- .kboard-list tr td: 각 |
내부의 | 에 padding 적용.
- padding-top, padding-bottom: 각각 10.5px씩 적용하여 총 21px 여백 확보.
*/
.kboard-list tr td {
padding-top: 20px !important;
padding-bottom: 21px !important;
}
/*──────────────────────────────────────────────────────
15. 공지사항 텍스트 스타일 조정
──────────────────────────────────────────────────────*/
.kboard-default-cut-strings {
font-size: 16px !important;
font-weight: 600 !important; /* medium */
line-height: 1.4 !important;
}
/*──────────────────────────────────────────────────────
16. 알림 뱃지 위치 및 크기 조정
- position:relative로 위치 조정 가능
- top:-2px로 위쪽으로 살짝 이동
- transform:scale(1.05)로 105% 확대
- transform-origin:center로 중앙 기준 확대
──────────────────────────────────────────────────────*/
.kboard-default-new-notify {
position: relative !important;
top: 0px !important;
transform: scale(1.05) !important;
transform-origin: center center !important;
}
/* 알림 뱃지 패딩 조정
- 위/아래 패딩을 4px, 좌/우 패딩을 6px로 설정하여
정사각형에 가깝게 만듭니다 */
.kboard-default-new-notify {
padding: 4px 4px !important;
margin-right: 2px !important;
}
/* 17. 알림 뱃지 글자 크기 */
.kboard-default-new-notify {
font-size: 14px !important;
font-weight: 600 !important; /* 글자 두께를 medium 이상으로 설정 */
}
/* 활성 페이지 번호 배경을 검정색으로 변경 */
.kboard-pagination .kboard-pagination-pages li.active a {
background-color: #000 !important;
color: #fff !important; /* 필요 시 글자색도 흰색으로 변경 */
}
/* 검색 폼 안의 버튼만 검정 배경으로 강제 */
.kboard-list-header .kboard-search button.kboard-default-button-small {
background-color: #000 !important;
color: #fff !important;
}
/* 전체 건수 텍스트에 Medium(500) 폰트 굵기 적용 */
.kboard-total-count {
font-weight: 600 !important;
}
@media only screen and (max-width: 768px) {
/* 모바일에서만 전체 카운트와 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
}
/* ===========================================================
1) 리스트 상단 여백 늘리기 (Desktop & Mobile)
=========================================================== */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 2rem !important; /* 데스크탑에서도 충분한 여백 */
}
/* ===========================================================
2) 모바일 전용 조정 (≤768px)
=========================================================== */
@media only screen and (max-width: 768px) {
/* 2-1) 전체 카운트 & 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
/* 2-2) 테이블 분리 모드 & 첫 행 상단 1px 테두리 */
#kboard-default-list .kboard-list table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
#kboard-default-list .kboard-list table tbody tr:first-child td {
border-top: 2px solid #000000 !important;
}
/* 2-3) 헤더에 패딩 배치하여 검색창과 리스트 겹침 방지 */
#kboard-default-list .kboard-list-header {
display: block !important;
position: relative !important;
text-align: center !important;
padding-bottom: 4rem !important; /* 검색창 높이 + 여유 공간 */
}
/* 2-4) 검색창 중앙 정렬 & 폭 조정 */
#kboard-default-list .kboard-list-header .kboard-search {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: inline-block !important;
float: none !important;
width: calc(100% - 32px) !important; /* 좌우 16px 여유 */
max-width: 500px !important; /* 최대 폭 제한 */
margin: 0 !important;
}
/* 2-5) 모바일에서만 리스트 상단 여백은 헤더 패딩으로 대체 */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 0 !important;
}
}
.kboard-default-poweredby {
display: none;
}
/* 0) 리스트/헤더 최대폭 1200px로 확대 */
.kboard-list-header,
.kboard-list table {
max-width: 1200px !important;
}
/* 1) 데스크탑: 컬럼 폭 재배치 + 작성자 줄바꿈 방지 */
@media (min-width: 769px) {
.kboard-list table {
table-layout: auto !important; /* 컬럼 폭 계산 여유 */
}
/* 작성자 */
.kboard-list th.kboard-list-user,
.kboard-list td.kboard-list-user {
white-space: nowrap !important;
width: 150px !important; /* 필요시 160~200px로 조절 */
}
/* 번호 */
.kboard-list th.kboard-list-uid,
.kboard-list td.kboard-list-uid {
width: 72px !important;
}
/* 작성일 */
.kboard-list th.kboard-list-date,
.kboard-list td.kboard-list-date {
width: 75px !important;
}
/* 조회수 */
.kboard-list th.kboard-list-view,
.kboard-list td.kboard-list-view {
width: 55px !important;
}
/* 제목은 나머지 가용폭을 차지 */
.kboard-list th.kboard-list-title,
.kboard-list td.kboard-list-title {
width: auto !important;
}
}
/* 2) 모바일: 다시 감싸지도록 복원 */
@media (max-width: 768px) {
.kboard-list th.kboard-list-user,
.kboard-list td.kboard-list-user {
white-space: normal !important;
width: auto !important;
}
}
/* ===========================================================
2) 모바일 전용 조정 (≤768px)
=========================================================== */
@media only screen and (max-width: 768px) {
/* 2-1) 전체 카운트 & 정렬 박스 숨기기 */
#kboard-default-list .kboard-total-count,
#kboard-default-list .kboard-sort {
display: none !important;
}
/* 2-2) 테이블 분리 모드 & 첫 행 상단 1px 테두리 */
#kboard-default-list .kboard-list table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
#kboard-default-list .kboard-list table tbody tr:first-child td {
border-top: 2px solid #000000 !important;
}
/* 2-3) 헤더에 패딩 배치하여 검색창과 리스트 겹침 방지 */
#kboard-default-list .kboard-list-header {
display: block !important;
position: relative !important;
text-align: center !important;
padding-bottom: 3rem !important; /* 검색창 높이 + 여유 공간 */
}
/* 2-4) 검색창 중앙 정렬 & 폭 조정 - 좌우 꽉 채우기 */
#kboard-default-list .kboard-list-header .kboard-search {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: inline-block !important;
float: none !important;
width: calc(100% - 8px) !important; /* 좌우 4px 여유만 남기기 */
max-width: none !important; /* 최대 폭 제한 해제 */
margin: 0 !important;
}
/* 2-4-1) 검색 폼 자체도 전체 폭 사용 */
#kboard-default-list .kboard-list-header .kboard-search form {
width: 100% !important;
display: flex !important;
gap: 8px !important;
}
/* 2-4-2) 검색 폼 내부 요소들 크기 조정 */
#kboard-default-list .kboard-list-header .kboard-search select {
flex: 0 0 auto !important;
min-width: 70px !important;
max-width: 80px !important;
}
#kboard-default-list .kboard-list-header .kboard-search input[type="text"] {
flex: 1 !important;
margin-right: 0 !important;
min-width: 0 !important; /* flex item이 너무 작아지지 않도록 */
}
#kboard-default-list .kboard-list-header .kboard-search button {
flex: 0 0 auto !important;
margin-left: 0 !important;
min-width: 50px !important;
}
/* 2-5) 모바일에서 리스트와 헤더 간 여백 조정 */
#kboard-default-list .kboard-list-header + .kboard-list {
margin-top: 1rem !important;
}
}
.kboard-default-poweredby {
display: none;
}/* End custom CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */ |