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 전용 클래스 블록을 만들어서 제어하시면 됩니다.

 

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • AI에 의해 자동 생성된 답변이에요 😀

    KBoard 화면에서 여백이나 정렬이 달라 보이는 이유는 다음과 같습니다:

    * **KBoard 자체 스타일시트:** KBoard는 워드프레스 테마의 CSS를 그대로 따르지 않고 자체 스타일시트를 사용합니다. 따라서 동일한 HTML 구조라도 KBoard 위젯 내에서는 글자 크기, 줄 간격, 마진/패딩이 달라질 수 있습니다.

    * **div 래퍼(wrapper) 차이:** Tistory나 Blogger에서는 `

    `, `

    `가 단순히 이어져 출력되지만, KBoard는 `
    `와 같은 추가 래퍼 요소로 감싸기 때문에 불필요한 줄바꿈이나 margin-bottom 값이 추가될 수 있습니다.

    * **화이트스페이스 처리:** 특히 FAQ처럼 Q: / A: 구조를 사용할 때, Tistory/Blogger에서는 텍스트가 인라인 흐름으로 보이지만 KBoard에서는 줄 간격이 강제로 벌어져 보여 "여백이 많아진 것처럼" 보일 수 있습니다.

    * **자동 `

    ` 삽입:** KBoard는 `wpautop` 기능 때문에 `
    ` 대신 `

    `를 삽입하기도 합니다.

    **해결 방법:**

    1. **CSS 오버라이드:** KBoard 출력 부분에만 적용되도록 CSS를 추가합니다. 예를 들어:

    ```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. **불필요한 `

    ` 자동 삽입 제거:** 글 입력 시 "텍스트 모드"에서 `

    ` 대신 `
    `을 직접 입력하여 여백을 줄입니다.

    ↓ 아래 버튼을 눌러서 피드백해주세요.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요