본문으로 바로가기
  1. Home
  2. 워드프레스/사용 팁
  3. 워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

· 댓글 3

워드프레스 메뉴 항목에 사용자 정의 CSS 클래스를 추가하여 특정 메뉴 아이템에 대한 스타일을 지정할 수 있습니다. 워드프레스에서 메뉴 항목에 커스텀 CSS 클래스를 추가하는 방법에 대해 간단히 살펴보겠습니다.

워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

메뉴에 CSS 클래스를 입력하려면 먼저 외모 > 메뉴로 이동합니다. 상단의 "화면 옵션"을 클릭합니다.

워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

숨겨져 있던 화면 구성요소 화면이 표시됩니다. 

워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

고급 메뉴 속성 보이기 아래의 CSS 클래스를 체크합니다.

이제 메뉴 항목을 클릭하면 CSS 클래스를 추가할 수 있는 필드가 표시됩니다.

워드프레스 메뉴에 사용자 정의 CSS 클래스 지정하기

CSS 클래스 필드에 사용자 정의 CSS 클래스를 지정할 수 있습니다.

매우 간단한 과정인데요. 이 과정을 움직이는 이미지를 통해 확인할 수 있습니다. 아래 이미지는 GeneratePress 테마의 설명서에서 인용한 것입니다.

화면 옵션에서 CSS 클래스 필드 옵션 활성화.
특정 메뉴 항목에 CSS 클래스 입력하기.

마치며

이상으로 워드프레스에서 특정 메뉴 항목에 사용자 정의 CSS 클래스(CSS Class)를 지정하는 방법에 대해 살펴보았습니다.

이외에도 화면 옵션에서 메뉴와 관련하여 링크 대상, 타이틀 속성, 링크 광계(XFN), 설명 등의 필드도 표시/미표시할 수 있는 옵션이 제공됩니다.

참고

https://avada.tistory.com/2467

 

워드프레스 퀵뷰, 퀵바, 퀵메뉴 플러그인/HTML 코드

워드프레스에서 왼쪽 또는 오른쪽 사이드바에 고정된 메뉴나 퀵뷰를 표시하고 싶은 경우 플러그인을 사용하거나 간단한 HTML 코드로 구현이 가능합니다. 이 글에서는 퀵뷰/퀵메뉴를 만들 수 있

avada.tistory.com

 

💬 댓글 3
logo
송윤석

안녕하세요 혹시 http://www.avahair.co.kr/ 같은 싸이트를 워드프레스 테마로 만들고 싶은데요 어떤걸 테마를 구입해야적당할까요 ?

logo

안녕하세요? Betheme 테마는 우리나라 정서에 잘 맞는 테마 중 하나라고 하는 분이 계시는데요, 이 테마는 650개가 넘는 데모가 제공됩니다. 데모 중에서 비슷한 분위기의 데모가 있는지 살펴보시겠어요?

https://www.thewordcracker.com/go/betheme

logo

사용자 정의 CSS 클래스 추가 방법이로군요
아시려는 분 참고하시면 좋겠습니다

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

[승인대기]

💬Dd

초기화 시켜야 하는 경우 참⋯

💬空空(공공)

신뢰가 되지않는다면 세무사⋯

💬똘켓ioi

가성비가 좋은 호스팅이로군요^^

💬空空(공공)

잘 보고 갑니다 무더운 하루⋯

💬空空(공공)

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드