KBoard 화면에서만 여백이나 정렬이 달라 보이는 문제

경북 근로 특별소송 변호사, 성공적인 선택을 위한 5가지 기준 – geunim

 

https://lawtech1.blogspot.com/2025/08/5.html

 

글쓰기 에디터: 미리보기

 

 

1. 정확한 제품 또는 플러그인 이름

kboard 게시판

 

2. 상세 내용

기본 스타일 충돌

    • KBoard는 워드프레스 테마의 CSS를 그대로 따르지 않고, 자체 스타일시트를 씁니다.

    • 그래서 같은 HTML 구조라도 KBoard 위젯 안에서는 글자 크기, 줄 간격, 마진/패딩이 달라집니다.

  1. div 래퍼(wrapper) 차이

    • Tistory나 Blogger에서는 <p><div>가 단순히 이어져 출력되지만,

    • KBoard는 <div class="kboard-..."> 같은 추가 래퍼 요소로 감싸기 때문에 불필요한 줄바꿈, margin-bottom 값이 들어갑니다.

  2. 화이트스페이스 처리

    • 특히 FAQ처럼 Q: / A: 구조를 쓰면,
      Tistory/Blogger는 텍스트 인라인 흐름으로 보이지만
      KBoard는 줄 간격이 강제로 벌어져 보여 “여백이 많아진 것처럼” 보입니다.

 

3. 확인 가능한 상세 페이지 주소

 

경북 근로 특별소송 변호사, 성공적인 선택을 위한 5가지 기준 – geunim

 

4. 수정한 코드 내역 (있다면)

KBoard 전용 CSS 수정 위치

  • 위치: /wp-content/plugins/kboard/template/.../style.css

  • 또는 /wp-content/plugins/kboard/css/kboard.css

1. CSS 오버라이드

KBoard 출력되는 부분에만 적용되도록 CSS를 추가해주면 됩니다:

.kboard .faq-block p {
  margin: 0 !important;
  line-height: 1.6;
}
.kboard .faq-block div {
  margin-bottom: 5px !important;
}
 

2. FAQ 블록에 클래스 부여

HTML에 직접 class="faq-block" 같은 래퍼를 달아주고,
KBoard CSS보다 우선 적용되도록 !important 옵션을 쓰면 깔끔하게 통일됩니다.

3. 불필요한 <p> 자동삽입 제거

KBoard는 wpautop 기능 때문에 <br> 대신 <p>를 삽입하기도 합니다.
이럴 땐 글 입력 시 “텍스트 모드”에서 <p> 대신 <br>를 직접 넣으면 여백이 줄어듭니다.

 

정리하면, KBoard만 다르게 보이는 이유는 KBoard 플러그인의 기본 CSS와 자동 <p> 삽입 때문이에요.
FAQ를 깔끔하게 맞추려면 추가 CSS 오버라이드를 쓰거나, FAQ 전용 클래스 블록을 만들어서 제어하시면 됩니다.

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요