워드프레스/Uncode 테마 (16)
Paper Block - 이야기가 있는 공간
Uncode 테마 사이트 (연습용) 오픈!
제목은 거창하게 지었지만, 사실은 단순한 "Uncode 테마 개인 연습용 사이트"를 오픈합니다. 뭔가 보여주려는 의도가 있다기보다는, Uncode 테마 사용 방법을 고개를 돌리면 잊어버리는 사태로 인하여 블로그에 정리도 할 겸 하나 개설하였습니다. 속도 최적화도 하지 않고SEO 작업을 하지도 않았으며서치 콘솔에 등록도 하지 않았고검색엔진이 긁어가도록 설정하지도 않았습니다. https://uncodetheme.kr 사실 말이 연습 사이트이고...실상은 기본 데모가 설치된 Uncode 테마에 약간의 내용을 추가하고 조금씩 수정한 사이트입니다. 홈페이지 간단한 소개1. 랜딩 (Landing) 페이지 추가랜딩 페이지가 없으면 정말로 Uncode 데모 사이트처럼 보일까 봐 대충 추가하였습니다. ^^; 사실 별 ..
Uncode 테마 페이지 별 CSS 설정 하기
유료 워드프레스 테마는 일반적으로 테마 디자인 설정을 위한 다양한 옵션을 제공합니다. 따라서 CSS를 직접 설정해야 하는 경우는 훨씬 줄어드는 것이 사실입니다. 하지만 좀 세부적으로 꾸미다보면, 결과적으로는 CSS를 건드려야 하는 상황은 발생하기 마련입니다. Uncode 테마에서 CSS를 설정하는 방법은 다음과 같은 것들이 있습니다.테마 디자인 ▷ 사용자 정의하기 ▷ 추가 CSS테마 디자인 ▷ 테마 편집기 내에서 style.css 편집Theme Options ▷ CSS & JS 각 page별 CSS 설정 사실 1~3번의 경우는 일반적인 내용입니다. 워드프레스의 CSS 설정은 검색을 해보면 많이 나오므로 생략하도록 하고, 이 글에서는 Uncode (언코드) 테마를 사용하는 경우, 특정 페이지에 CSS 설정..
언코드(Uncode) 테마 데모의 이해
워드프레스는 취미로 하는 수준이어서 제작 경험이 많지 않다 보니, 개인적으로는 Uncode 테마 외에 여느 다른 테마를 사용해 본 적이 없습니다. 그럼에도 불구하고 눈대중으로 살펴본 결과 데모 테마의 설치에 있어서 다른 테마와 약간 차이점이 있는 듯하여 이번 글에서 정리해보고자 합니다. One-Click Import...?일반적으로 워드프레스 테마 (Multi-purpose)의 데모를 불러온다고 하면 주제에 맞게 세팅된 하나의 데모 사이트가 설치 됩니다. 예를 들어 학원 데모를 불러온다면 학원 데모에 맞춰서 완성된 하나의 사이트가 생성되고, 레스토랑 데모를 불러온다면 레스토랑에 맞게 미리 구성된 사이트를 불러오는 방식으로 진행되겠죠? 그런데, Uncode 테마에서는 기본적으로 모든 데모 콘텐츠를 한..
[Uncode 테마] Content Block으로 Header 섹션 만들기
워드프레스로 페이지를 구성하는 데 있어서 서로 다른 페이지이지만 동일한 내용의 섹션 (또는 요소)을 사용하고 싶은 경우가 있습니다. 이 경우, 굳이 매번 새롭게 페이지를 꾸미기보다는 한번 생성한 내용을 가져다가 여기저기 붙이는 방법이 편리하겠죠? Uncode (언코드) 테마에서는 이를 위해서 Content Block이라는 것을 지원합니다. 공통으로 사용될법한 엘리먼트 들을 콘텐트 블록으로 설정하면 페이지 별로 따로 따로 설정할 필요 없이 반복해서 사용하면 되겠죠? 수정도 훨씬 간편해지고요. 이번 글에서는 Uncode 테마의 Content Block을 이용하여 공통의 헤더 섹션을 구성하는 예제에 대해서 살펴보겠습니다. 1. Header 섹션을 왜 공통으로 사용해? 웹사이트를 방문할 때 우선적으로 확~ 눈에..
[Uncode 테마] Light Skin , Dark Skin
홈페이지를 만들 때 배경 이미지 혹은 배경 색상을 넣고 그 위에 텍스트를 씌우는 경우는 매우 흔합니다. 이 경우, 배경 색상에 따라 텍스트의 색상을 조절해 주어야 합니다. 배경 이미지가 밝은 색: 텍스트는 어두운 색 배경 이미지가 어두운 색: 텍스트는 밝은 색 전체적으로 페이지의 톤이 통일되어 있다면 별 문제는 없겠죠? 하지만, 경우에 따라서 어떤 경우는 밝은 배경, 어떤 경우는 어두운 배경을 사용하고 싶은 경우도 있을 것입니다. 이 경우 배경 색상의 톤에 따라서 텍스트 색상과 관련된 설정들을 변경해주어야 하는데요... 하나 둘 하다 보면 은근히 번거로운 작업일 수 있습니다. 이러한 작업을 도와주기 위해서 Uncode에서는 '스킨'이라는 개념을 도입했습니다. 이번 글에서는 Uncode의 스킨에 대해서 알..
[Uncode 테마] 한글 폰트 설정 방법
워드프레스의 여느 테마에서도 마찬가지 겠지만 Uncode(언코드) 테마를 국내용으로 사용하면, 가장 먼저 고민하게 되는 것은 당연히 한글 폰트입니다. Uncode 테마는 폰트 설정을 위한 몇가지 옵션을 제공하고 있습니다. 이번 글에서는 Uncode 테마에서 한글 폰트를 설정하는 방법에 대해서 알아보도록 하겠습니다. 1. 구글 폰트 적용 Uncode 테마에서는 폰트를 설정할 수 있는 부분이 따로 포함되어 있습니다. 테마 메뉴중에 Font Stack에 들어가 보면 Font imports와 Font Libraries로 나뉘어 보이게 되는데요, 여기서 Google Fonts (Font Imports 메뉴), Adobe Fonts, Fontdeck, or Font Squirrel (Font Libraries 메뉴..
Uncode 테마 중요 업데이트 - V2.2 : Frontend Editor
Uncode 테마가 V2.2 (2019. 10)에서부터 드디어 프론트엔드 에디터 기능을 지원하기 시작했습니다. 유독 2019년에 들어서 뭔가 큼직큼직한 업데이트를 많이 했던 것 같습니다. 상위권 대부분의 테마와 따로 판매중인 디비(DIVI) 테마 역시 front-end 에디터를 지원하는데 비해서 다소 늦었다고 볼 수도 있을 것 같습니다. # 간단한 후기. 기능에 대한 세부 설명은 추후에 다뤄보도록 하구요... 간략하게 사용해 본 바에 의하면 음... 나름 괜찮습니다.! 기존의 Backend 에디터로도 크게 불편한 점은 없었습니다만, 가끔 color나 이미지를 교체 후 화면을 다시 preview 하는 점등에서 약간 귀찮은 점이 있었습니다. 새로 도입된 Frontend 에디터는 이 점에 있어서 좀 더 편리하..
Uncode 테마 중요 업데이트 - V2.1 : WireFrame
이번 글에서는 Uncode 테마의 기능 중 비교적 최근에 추가된 기능인 와이어프레임(WireFrame) 플러그인에 대해서 살펴보도록 하겠습니다. 이 기능은 V2.1 (2019.06.12)에 추가된 것으로 빠르고 고품질의 웹사이트 제작을 가능하게 하기 위해서 전문적으로 디자인된 섹션 템플릿을 제공합니다. 1. 와이어프레임 플러그인 Uncode 버전 2.1에서는 새로운 기능으로 Wireframes 플러그인이 번들로 제공됩니다. 홈페이지에서는 다음과 같이 소개하고 있습니다. Uncode 버전 2.1에서 번들로 제공되는 Wireframes 플러그인을 사용하면 완벽한 웹 사이트 또는 독립적인 랜딩 페이지를 만들기 위해 쉽게 결합할 수 있는 400 개가 넘는 신중하게 디자인된 섹션 템플릿을 쉽게 가져올 수 있습니다..