Uncode 테마 페이지 별 CSS 설정 하기

유료 워드프레스 테마는 일반적으로 테마 디자인 설정을 위한 다양한 옵션을 제공합니다. 따라서 CSS를 직접 설정해야 하는 경우는 훨씬 줄어드는 것이 사실입니다. 하지만 좀 세부적으로 꾸미다보면, 결과적으로는 CSS를 건드려야 하는 상황은 발생하기 마련입니다.

 

Uncode 테마에서 CSS를 설정하는 방법은 다음과 같은 것들이 있습니다.

1. 테마 디자인 ▷ 사용자 정의하기 ▷ 추가 CSS
2. 테마 디자인 ▷ 테마 편집기 내에서 style.css 편집
3. Theme Options ▷ CSS & JS 
4. 각 page별 CSS 설정

 

사실 1~3번의 경우는 일반적인 내용입니다. 워드프레스의 CSS 설정은 검색을 해보면 많이 나오므로 생략하도록 하고, 이 글에서는 Uncode (언코드) 테마를 사용하는 경우, 특정 페이지에 CSS 설정을 하고 싶은 경우 (4번 항목)에 대해서 다루겠습니다.

 

1. 페이지별 CSS 설정이 필요한 이유?

전체적으로 CSS를 설정해도 동작상에는 아무런 문제가 없습니다. 하지만 페이지가 점점 늘어나는데 CSS를 한곳에 계속 추가하다 보면 파일의 크기가 커질 뿐더러, 한번 꼬이기 시작하면 관리하기가 힘들어 집니다.

 

1.  이 부분이 어느 페이지에 적용할 CSS인지 점점 혼란스러워 진다. (비록 주석을 잘 달더라도 나중에는 주석조차 헛갈리는 상황이 발생)
2. 영향을 주고 싶지 않은 부분에 CSS 영향이 미쳐서 이상해진다. 예를 들어 페이지1의 버튼의 형태만 변경하고 싶은데, 다른 페이지의 버튼 모양에도 영향을 끼친다.
3. 특정 페이지에만 영향을 미치려면 id나 class를 추가 설정을 해주어야 한다. 가능은 하지만 무척이나 귀찮다.

 

위와 같은 문제로 인하여, 가능한 한 다른 페이지에 영향을 주지않고 쉽게 특정 페이지에만 적용할 CSS를 설정할 수 있다면 매우 편리할 것입니다. Uncode 테마에서는 이러한 페이지별 CSS를 쉽게 설정할 수 있습니다.

 

2. Uncode의 페이지별 CSS 설정 방법

이전에 살펴보았던 Uncode 테마 한글 폰트 설정 방법의 글에 사용된 페이지를 살펴볼까요?

 

페이지의 주소는 다음과 같습니다.

https://uncodetheme.kr/examples/font-korean/

 

 

해당 페이지에는 다음과 같은 CSS가 적용되었습니다.

1. 2개의 한글 폰트 추가 : 2개의 한글 폰트는 테스트 용으로 해당 페이지에서만 사용됨.
2. 마우스 hover에 대한 확대 애니메이션: 각 컬럼의 border 및 애니메이션은 다른 페이지에서는 적용하지 않고 여기서만 사용할 내용임. 

 

폰트 로드 & hover animation을 위한 CSS 추가

 

 

세부적인 CSS 내용이 중요한 것은 아니고, 특정 페이지에만 반영되는 CSS를 입력하는 방법을 알아보는게 목적이므로 CSS 내용에 대해서는 따로 설명하지 않습니다.

그러면, Uncode에서 페이지별 CSS를 설정하는 방법을 알아보겠습니다.

 

🅰 페이지별 CSS 입력 방법

페이지의 CSS를 설정하기 위해서는 우선 페이지 편집 화면으로 들어갑니다. Page Builder 화면에서 우측 상단의 톱니모양 (CSS라고 표시) 버튼을 클릭합니다.

 

 

 

아래 그림과 같이 Custom CSS Settings라는 부분이 나타나게 되는 데요, 여기에 페이지에 적용할 CSS를 입력하면 됩니다. 입력후에 SAVE CHANGES를 누르고 페이지를 저장하면 되겠죠?

 

 

 

여기에 입력된 내용은 설정된 페이지에서만 적용되며 다른 페이지에는 전혀 영향을 주지 않습니다.

 

🅱 적용된 모습

실제로 어떤 식으로 페이지에 적용되었는지 살펴볼까요?

해당 페이지를 Load하는 경우에 HTML 내에 <style> 태그를 이용하여 위에 입력한 내용이 나타나는 것을 알 수 있습니다. 

 

 

 

물론, 이 내용은 다른 페이지에서는 전혀 나타나지 않습니다. 즉, Uncode에서 알아서 Custom CSS가 입력된 페이지에서만 해당 내용이 나타나도록 해주기 때문에 사용자가 직접 처리해야할 사항은 없습니다.

 

맺음말

이번 글에서는 Uncode 테마의 페이지별 CSS 설정에 대해서 알아보았습니다.

만약, 반복적으로 사용되는 스타일이 아니라 특정 페이지에서만 사용되는 디자인이라면 Uncode 테마의 페이지 CSS에 입력해주는 것이 관리적인 측면에서 훨씬 도움이 될 것이라고 생각됩니다.