워드프레스 특정 블록에 개별 CSS 스타일 적용 방법(CSS 클래스)

1. 워드프레스에서 개별 블록에 CSS 스타일을 적용하는 방법

워드프레스를 사용하다 보면 특정 블록에만 별도의 스타일을 적용하고 싶을 때가 있습니다. 전체 사이트에 영향을 주지 않고 개별 블록에만 스타일을 적용하려면 CSS 클래스를 활용하는 것이 가장 효과적인 방법입니다. 이번 포스팅에서는 워드프레스 블록 편집기에서 특정 블록에 개별 CSS 클래스를 추가하고 스타일을 적용하는 방법을 알아보겠습니다.

---

2. CSS 클래스란?

**CSS 클래스(Class)**는 HTML 요소에 스타일을 적용할 때 사용하는 선택자로, 여러 개의 요소에 동일한 스타일을 적용할 수 있습니다.

CSS ID와 달리 중복 사용이 가능하여 여러 블록에 같은 스타일을 적용할 수 있고, 유지보수도 편리합니다.

예시:

.my-custom-class {
  border: 2px solid #000;
  padding: 10px;
  background-color: #f5f5f5;
}

이렇게 정의한 클래스를 특정 블록에 적용하면 해당 블록만 스타일이 변경됩니다.

---

3. 특정 블록에 개별 CSS 클래스 적용하는 방법

워드프레스에서 특정 블록에 개별 CSS 스타일을 적용하는 방법은 다음과 같습니다.

3.1 블록 편집기에서 추가 CSS 클래스 적용

1. 워드프레스 블록 편집기로 이동
2. 스타일을 적용할 블록 선택 (예: 이미지 블록)
3. 우측 설정 패널의 ‘고급’ 메뉴 클릭
4. 추가 CSS 클래스 입력란에 원하는 클래스명 입력
   • 예시: custom-img-style

이렇게 하면 해당 블록에 개별 CSS 클래스를 부여할 수 있습니다.

---

3.2 사용자 정의 CSS 추가

이제 부여한 클래스에 대한 CSS 스타일을 작성해야 합니다.

1. 관리자 페이지 이동
   • 외모 → 사용자 정의하기 → 추가 CSS 클릭
2. CSS 코드 입력
   • 위에서 지정한 custom-img-style 클래스를 활용하여 스타일을 추가합니다.

.custom-img-style {
  width: 500px;
  border: none;
  box-shadow: none;
}

1. 미리보기 및 저장
   • 변경 사항을 확인한 후, 적용하려면 ‘게시’ 버튼을 클릭합니다.

---

4. 추가 CSS 클래스 활용 예시

4.1 이미지 블록 스타일 변경

아래와 같이 두 개의 이미지 블록이 있다고 가정하겠습니다.

① 추가 CSS 클래스가 적용된 블록
② 일반 블록 (변경 없음)

.custom-img-style {
  width: 500px;
  border: none;
  box-shadow: none;
}

이제 미리보기로 확인해 보면, ①번 블록의 크기는 500px로 조정되고, 불필요한 테두리나 그림자가 제거된 것을 볼 수 있습니다.

---

4.2 특정 텍스트 블록 스타일 적용

텍스트 블록에도 CSS 클래스를 적용할 수 있습니다.

예제: 제목을 강조하는 스타일

1. 블록 편집기에서 제목 블록을 선택
2. ‘고급’ 메뉴에서 추가 CSS 클래스에 highlight-title 입력
3. 사용자 정의 CSS에 아래 코드 추가

.highlight-title {
  font-size: 24px;
  font-weight: bold;
  color: #ff5733;
  text-decoration: underline;
}

이제 해당 제목 블록에 강조 효과가 적용됩니다.

---

5. Simple CSS 플러그인 활용 (추가 팁)

CSS 코드를 직접 추가하는 것이 번거롭다면, Simple CSS 같은 플러그인을 활용하면 블록 편집기에서 바로 CSS를 적용할 수 있습니다.

Simple CSS 플러그인 사용 방법

1. 플러그인 설치
   • 플러그인 → 새로 추가 → Simple CSS 검색 후 설치 & 활성화
2. 개별 블록에 직접 CSS 작성 가능
3. 적용 후 실시간 미리보기 가능

이 플러그인을 사용하면 사용자 정의 CSS를 추가하지 않고도 개별 블록에 스타일을 쉽게 적용할 수 있습니다.

---

6. 마치며

워드프레스에서 특정 블록에 개별 CSS 클래스를 적용하는 방법을 알아보았습니다.

✔ 블록 편집기의 ‘추가 CSS 클래스’ 기능을 활용하면 HTML을 수정할 필요 없이 간단하게 스타일 적용 가능
✔ CSS 클래스를 활용하면 유지보수가 쉽고, 여러 블록에 같은 스타일을 적용할 수 있어 효율적
✔ Simple CSS 플러그인 사용 시, 블록 편집기에서 바로 CSS 적용 가능

워드프레스에서 특정 블록만 스타일을 변경하고 싶다면, 위 방법을 활용해 보세요! 🚀

#워드프레스 #CSS #블록편집기 #웹디자인 #CSS클래스