워드프레스 Enfold 테마: 소제목에서 앰퍼샌드 기호 스타일 초기화하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2020. 2. 24. 00:29 • 댓글:

워드프레스 인기 테마 중 하나인 Enfold (엔폴드)는 깔끔하면서 속도가 괜찮은 편이라서 개인적으로 선호하는 테마 중 하나입니다. 엔폴드 테마는 우리나라에서도 많이 사용되는 워드프레스 테마 중 하나입니다.

 

워드프레스 Enfold 테마

워드프레스 인기 테마 중 하나인 Enfold는 우리나라에서도 많이 사용되고 잘 알려진 테마...

cafe.naver.com

엔폴드 테마에서는 현재 약 38개의 데모를 제공하고 있습니다.

Demo Import 메뉴에서 데모를 로드하여 사용할 수 있다.

소제목에서 앰퍼샌드 (&) 기호 스타일을 초기화하는 방법

Enfold 테마의 일부 데모에서는 앰퍼샌드 (&) 기호에 특수한 스타일이 적용될 수 있습니다. 예를 들어, Construction Demo를 설치하면 제목 부분의 앰퍼샌드 기호가 다음 그림과 같은 스타일로 표시됩니다.

개인적으로 이 스타일이 마음에 드네요. 앤퍼샌드(앤드 기호)의 색상과 스타일을 다른 소제목(헤딩) 문구와 동일한 스타일을 적용하고 싶은 경우가 있을 수 있습니다.

이 부분의 요소를 검사해보면 그림과 같이 앰퍼샌드 기호에 special_amp 클래스가 적용되고 있습니다.

이 경우 폰트 종류와 크기 등을 부모 요소의 스타일을 계승하도록 CSS inherit 키워드를 사용할 수 있습니다.

 

CSS inherit keyword

CSS inherit Keyword Example Set the text-color for elements to blue, except those inside elements with class="extra": span {     color: blue; } .extra span {     color: inherit; } Try it Yourself » Definition and Usage The inherit keyword specifies

www.w3schools.com

The inherit keyword specifies that a property should inherit its value from its parent element.
The inherit keyword can be used for any CSS property, and on any HTML element.

inherit 키워드는 모든 CSS 속성과 모든 HTML 요소에 사용할 수 있다고 w3schools 문서에서는 설명하고 있습니다.

다음과 같은 CSS 코드를 사용하여 special_amp 클래스의 스타일을 초기화할 수 있습니다.

/* Enfold 테마의 Ampersand 스타일 초기화 */
/* Disable Ampersand style in WoPress Enfold Theme */
.special_amp {
    font-family: inherit;
    font-size: inherit!important;
    font-style: inherit;
    font-weight: inherit;
    color: inherit!important;
}

엔폴드 테마에서 사용자 지정 CSS 코드 추가하기

엔폴드 테마에서는 워드프레스 알림판 > Enfold > General Styling으로 이동한 후에 Quick CSS 박스에 위의 코드를 넣으면 됩니다.

Enfold 테마에서는 Quick CSS 섹션에 커스텀 CSS 코드를 넣을 수 있다.

또는, 차일드 테마 내의 스타일시트 파일이나 테마 디자인 > 사용자 정의하기에 사용자 지정 CSS 코드를 추가해도 됩니다.

 

워드프레스에서 CSS 추가하기 - 워드프레스 기본

목차사용자 정의하기 내의 추가 CSS 사용하기알림판에서 직접 CSS 편집하기테마 내의 CSS 편집 기능젯팩(JetPack)에서 제공하는 "CSS 편집"플러그인 사용FTP를 사용하여 CSS 파일 편집파일질라 사용법: 파일질라를 사용하여 워드프레스 스타일시트 파일 편집하기마치며참고: 워드프레스 커스터마이징에서 가장 중요한 부분 중 하나가 CSS입니다. CSS를 통해 레이아웃을 완전히 다르게 바꿀 수 있습니다. 하지만 "이 CSS 코드를 워드프레스 시타일시트에

www.thewordcracker.com

참고:

 

워드프레스 뉴스페이퍼, 아바다, 엔폴드 테마에 배경 이미지 설정하기

워드프레스 테마에서 페이지 빌더를 사용하는 경우 페이지 빌더 내에서 컬럼, 열 등에 배경 이미지를 설정하는 옵션을 제공합니다. 아바다 테마: 베스트셀링 테마인 아바다(Avada) 테마의 경우 Container와 Column..

avada.tistory.com