엘리멘터 Custom Code 완벽 활용: 특정 H2 태그 스타일 마법처럼 바꾸기 ✨

로

안녕하세요, 엘리멘터로 워드프레스 사이트를 가꾸는 재미에 푹 빠진 여러분! 엘리멘터의 편리한 위젯들로 페이지를 만들다 보면, “아, 이 제목(H2 태그) 스타일만 살짝 바꾸고 싶은데…” 하는 순간이 꼭 찾아오죠? 특히 블로그 포스트 본문 안의 소제목(H2)들에 일관된 디자인을 적용하고 싶을 때가 많아요. 그런데 문제는! Rank Math 같은 목차 플러그인이 자동으로 생성해주는 목차 안의 H2까지 스타일이 바뀌어버리면 곤란하다는 거죠. 😅

바로 이런 고민! “포스트 본문 안의 H2만 예쁘게 꾸미고, Rank Math 목차 안의 H2는 원래대로 두고 싶어!”는 어떻게 해결할까요? 오늘은 엘리멘터의 강력한 기능 중 하나인 Custom Code(사용자 정의 코드) 기능을 이용해서, 원하는 H2 태그만 콕 집어 스타일을 변경하는 CSS 마법을 함께 배워볼 거예요. 복잡해 보이지만 저만 따라오시면 정말 간단하답니다! 자, 준비되셨나요? 🚀

🎯 우리의 목표: 원하는 H2만 쏙쏙 골라 꾸미기

오늘 해결 할 문제를 간단히 적어보겠습니다. 아래 조건에 맞는 H2 태그에만 스타일을 적용하고자 합니다.

  • 🎯 적용 대상: 포스트 본문 안에 있는 H2 태그
  • 🎯 제외 대상: Rank Math 플러그인이 생성하는 목차 H2 태그
  • 🎨 적용할 스타일
    • 배경색 : 은은한 회색 (예: #f5f5f5)
    • 안쪽 패딩 : 위아래 0.5rem, 좌우 1.0rem (0.5rem 1.0rem)
    • 아래쪽 테두리 : 1픽셀 두께, 실선, 회색 (1px solid #e0e0e0)

목표를 적어보니 어려운 일은 아닐것 같네요. 😉 그럼 CSS를 어떻게 만들어야 하는지 알아볼까요?

🪄 CSS 코드

아래가 바로 우리가 원하는대로 H2태그를 바꿔줄 CSS코드 입니다. 복잡하지 않으니, 각 줄이 어떤 의미인지 설명해 드릴게요.

/* 포스트 본문 안의 H2 태그에만 스타일 적용 */
.type-post h2 {
  background-color: #f5f5f5; /* 배경색: 은은한 회색 */
  padding: 0.5rem 1.0rem; /* 안쪽 여백: 위아래 0.5, 좌우 1.0 */
  border-bottom: 1px solid #e0e0e0; /* 아래 테두리: 1px 실선 연회색 */
}

/* Rank Math 목차 안의 H2는 원래 스타일로 되돌리기 (영향 없도록 초기화) */
.rank-math-toc-content h2 {
  background-color: transparent; /* 배경색 없음 (투명) */
  padding: 0; /* 안쪽 여백 없음 */
  border: none; /* 모든 테두리 없음 */
}

코드 해설 타임! 🔍

  • .type-post h2 { ... }
    • 이 부분은 “.type-post 라는 클래스(이름표)를 가진 영역” 안에 있는 “모든 H2 태그”에 중괄호 { } 안의 스타일(배경색, 패딩, 테두리)을 적용합니다.
    • 여기서 .type-post는 포스트 본문 전체를 감싸는 영역을 가리키는 이름표라고 생각하시면 됩니다.
    • ⚠️ 여기서 당황하지 않는게 중요합니다. ㅎㅎ 이 클래스 이름은 여러분이 사용하고 있는 테마에 따라 다를 수 있기 때문인데요. 곧 확인 방법을 알려드릴게요.
  • .rank-math-toc-content h2 { ... }
    • 이 부분은 Rank Math 목차가 만들어질 때 사용되는 기본 이름표(.rank-math-toc-content) 안의 H2 태그를 선택합니다.
    • 그리고 그 H2 태그에 적용되었을지도 모르는, 앞 부분 스타일 코드를(배경색, 패딩, 테두리)을 원래대로 되돌리는(초기화하는) 부분입니다.
    • 배경색은 투명하게(transparent), 패딩과 테두리는 제거(0, none)합나다.
    • 결국 Rank Math에서 생성하는 목차의 H2태그는 앞의 CSS코드 영향을 받지 않습니다. 😉

⚠️ 잠시만요! : 내 사이트의 ‘본문 클래스’ 이름 확인 방법

위 CSS 코드에서 .type-post 이름을 어떻게 알았을지 궁금하셨을텐데요. 이 클래스 이름은 여러분의 워드프레스 테마에서 실제 포스트 본문 영역을 감싸는 태그가 가지고 있는 클래스 입니다. 이 이름은 테마마다 조금씩 다를 수 있어서, 위의 코드를 적용하기 전에 내 테마에서는 어떤 클래스 이름을 쓰는지 먼저 확인해보셔야 합니다. 만약 여러분의 테마에서 사용하는 이름표가 다른데 위 코드를 그대로 쓰면? 아무런 효과도 없기 때문이죠. 😉 그래서 내 사이트의 정확한 본문 클래스 이름을 확인하는 것이 정말 중요합니다.

어떻게 확인하냐구요? 크롬 브라우저의 ‘개발자 도구(검사)’ 기능을 이용하면 아주 쉽게 찾을 수 있어요!

  1. 스타일을 바꾸고 싶은 포스트 페이지를 여세요.
  2. H2 태그(소제목) 근처에서 마우스 오른쪽 버튼을 클릭하고, 나오는 메뉴에서 [검사] 또는 [Inspect]를 선택하세요.
  3. 화면 아래나, 우측에(팝업으로 나올 수 도 있습니다) 코드 창(개발자 도구)이 나올겁니다. 여기까지 했으면 거의 다 왔습니다. 😊
  4. 방금 클릭했던 H2 태그 부분이 파랗게 강조되어 있을 텐데요, 그 H2 태그를 감싸고 있는 상위 요소(보통 <div> 태그)들을 따라가며 차례 차례 태그 내부를 살펴보세요.
  5. 태그 내부에 있는 여러 속성들 중, class="여기에-이름이-적혀있어요" 부분에서 본문 전체를 감싸는 것으로 보이는 클래스 이름을 찾으세요.
  6. 클래스 이름은 테마마다 차이가 있지만, 일반적으로 여기가 포스트 본문 영역이구나!하고 충분히 알아볼 수 있는 이름을 사용합니다. 예를 들면 entry-content, elementor-post-content, single-content, td-post-content 같은 이름들이죠.

찾으셨나요? 만약 여러분의 본문 클래스 이름이 entry-content 라면, 위 CSS 코드의 첫 번째 줄을 이렇게 바꿔주셔야 합니다.

/* 포스트 본문 안의 H2 태그에만 스타일 적용 */
.entry-content h2 {
  background-color: #f5f5f5; /* 배경색: 은은한 회색 */
  padding: 0.5rem 1.0rem; /* 안쪽 여백: 위아래 0.5, 좌우 1.0 */
  border-bottom: 1px solid #e0e0e0; /* 아래 테두리: 1px 실선 연회색 */
}

이렇게, 여러분의 사이트에 딱 맞는 CSS 코드를 만들었습니다. 👍

❓ 근데, CSS 코드 어디에 붙여넣어야 할까요? (엘리멘터 Custom Code 활용)

자, 이제 완성된 CSS 코드를 우리 워드프레스 사이트에 적용할 차례입니다. 엘리멘터(또는 엘리멘터 PRO)를 사용하고 계시다면, ‘Custom Code‘ 기능을 이용하는 것이 가장 깔끔하고 편리합니다. (참고로, Custom Code 기능은 Elementor Pro 버전에서만 지원하는 기능일 수 있습니다.)

  1. 워드프레스 관리자 페이지(알림판)으로 이동하세요.
  2. 왼쪽 메뉴에서 [Elementor] → [Custom Code] 로 이동하세요.
  3. [Add New] 버튼을 클릭해서 새로운 사용자 정의 코드를 만듭니다.
  4. 제목(Title)을 입력하세요 (예: “포스트 본문 H2 스타일”). 나중에 알아보기 쉽게 적으세요.
  5. 위치(Location)를 선택해야 하는데요, CSS 코드는 일반적으로 HTML ‘head‘ 영역에 넣습니다. 드롭다운 메뉴에서 head를 선택해주세요.
  6. 아래 나오는 편집창에서, 위에서 완성한 CSS 코드를 그대로 복사+붙여넣기 하시면 됩니다. CSS 시작과 끝을 <style> 태그로 감싼 형태로 입력하는것 잊지마세요.
  7. [Publish] (발행) 버튼을 클릭하세요.
  8. 표시 조건(Display Conditions)을 설정하라는 창이 뜰 거예요.
    • 이 스타일을 사이트 전체(Entire Site)에 적용할지, 아니면 특정 페이지(예: 모든 포스트)에만 적용할지 선택할 수 있습니다.
    • 다른 페이지나 메뉴는 제외하고, 게시물에만 적용하려면 조건을 [Singular] → [글]로 선택하면 됩니다.
  9. [Save & Close] 버튼을 눌러 저장하면 끝! 🎉
<style>
    /* 포스트 본문 안의 H2 태그에만 스타일 적용 */
    .your-content-class h2 {  /* <-- 여러분이 찾은 클래스 이름으로 변경! */
      background-color: #f5f5f5;
      padding: 0.5rem 1.0rem;
      border-bottom: 1px solid #e0e0e0;
    }

    /* Rank Math 목차 안의 H2는 원래 스타일로 되돌리기 */
    .rank-math-toc-content h2 {
      background-color: transparent;
      padding: 0;
      border: none;
    }
    </style>

🤔 Elementor Pro가 없거나 다른 방법을 쓰고 싶다면?

엘리멘터를 사용하지 않는 경우에도 걱정 마세요. 워드프레스의 기본 기능인 ‘테마 커스터마이저’를 이용할 수도 있습니다. 관리자 페이지에서 [외모] → [사용자 정의하기]로 이동한 다음, [추가 CSS] 메뉴를 클릭하세요. 그리고 나오는 입력창에 위의 CSS 코드를(style 태그 빼고!!) 넣어주면 됩니다.

✅ 결과 확인: 헤딩에 스타일이 적용되었나요?

이제 여러분의 워드프레스 사이트로 돌아가서, 블로그 포스트 페이지를 새로고침해서 열어보세요. 게시물 본문 안에 있는 H2 소제목들에 배경색과 패딩, 하단 테두리가 적용되었을 거예요. 그리고 Rank Math가 생성한 목차는 원래 모습 그대로 남아있을 겁니다. 그러면 모두 성공입니다. 🙂

🌟 TIP : Rank Math 목차 스타일을 바꾸고 싶으면..?

혹시 Rank Math 목차 자체도 좀 더 예쁘게 꾸미고 싶으신가요? 예를 들어 목차 전체를 얇은 테두리 상자로 감싸거나, 목차 제목(H2)에만 다른 배경색을 주고 싶을 수도 있죠! 그것도 CSS로 충분히 가능하답니다! 혹시 필요하다면, 다음에는 Rank Math 목차를 스타일링 하는 CSS도 정리해 보겠습니다.

마무리

오늘은 엘리멘터의 Custom Code 기능과 약간의 CSS를 이용해서, 게시물 본문 내용 중 원하는 H2 태그만 콕 집어 스타일을 변경하는 방법을 알아봤습니다. 처음엔 조금 복잡해 보였을지 몰라도, 차근차근 따라 해보니 생각보다 어렵지 않으셨죠? 특히, 개발자 도구를 이용해서 본문 클래스 이름을 찾아내는 과정은 다른 CSS 커스터마이징을 할 때도 많이 사용하는 기능입니다.

오늘 배운 내용을 바탕으로, 여러분의 웹사이트를 더욱 개성 있고 아름답게 가꿔나가시길 바랍니다.

이 글이 여러분의 워드프레스, 엘리멘터 여정에 작은 도움이 되었기를 바라며, 유용하셨다면 주변 친구들에게도 공유해 주세요!

댓글 남기기