이게 뭔가요?
Navla가 만든 범용 테마 입니다.
- 그 어떤 연작이나 카논, 요단과 관계없는 순수히 미학적인 테마입니다.
- 본인이 지금껏 만든 테마를 대체하고 필요한 테마를 쉽게 확장할 심산으로 만들었습니다.
- 개인적인 취향을 듬쁙 넣어 만들었습니다.
- 시그마 기반 테마입니다.
특징
디자인 방향성
- 정갈하고 단정하기
- 미니멀리즘
- 글래스모피즘
- 은은한 그라데이션
포함된 컴포넌트
호환되는 컴포넌트
사용법
다음 코드를 편집창에 붙여 넣어주세요.
[[include :scpko:theme:navla-style]]
사용 가능한 인수는 다음과 같습니다.
- preset=1 : 프리셋을 적용할 수 있습니다.
- flag=pride : 나블라의 프라이드 플래그를 적용할 수 있습니다. 나블라의 프라이드 로고 페이지에서 적용할 수 있는 다른 플래그를 알아보세요.
- tocbox=1 : 페이지 좌상단에 목차가 포함된 사이드 박스를 표시합니다.
- help=1 : 나블라 컴포넌트에 존재하는 클래스들을 알려주는 박스가 나타납니다.
각 인수는 "|"를 이용해 구분해 주어야 합니다.
예시) 나블라 스타일 기반 짭랙 하이라이터 테마에 트랜스 플래그를 적용하려면:
[[include :scpko:theme:navla-style preset=8|flag=trans]]
주요 변수
나블라 스타일 테마는 커스텀이 쉽게 설계되어 있습니다. 여러분은 간단한 변수 재선언을 통해 여러분의 입맞에 따라 마음껏 주무를 수 있습니다.
특히 이 중, 여러분이 손쉽게 만질 수 있는 변수는 다음과 같습니다. 이 외에도 커스텀을 도울 수 있는 정말 다양한 변수들이 있으니, 더 자세한 커스텀 방안에 대하여 이 페이지를 참고해 보세요.
변수 재선언은 다음 코드를 테마 선언 아래에 해주시면 됩니다.
[[module CSS]]
:root:lang(ko) {
--원하는-변수1: 원하는 값;
--원하는-변수2: 원하는 값;
}
[[/module]]
기본적인 변수들은 다음과 같습니다.
:root:lang(ko) { --theme-color: 120, 120, 120; /*테마의 하이라이트 색상입니다.*/ --theme-color-dark: 60, 60, 60; /*더 어두운 하이라이트 색상입니다.*/ --logo-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg'); /*로고이미지 입니다. #header-extra-div-1의 백그라운드 이미지가 됩니다.*/ --header-title: "SCP 재단"; /*헤더의 제목 텍스트입니다.*/ --header-subtitle: "확보, 격리, 보호"; /*헤더의 부제목 텍스트입니다.*/ }
프리셋 및 커스텀
변용이 쉬운 테마이니만큼, 다양한 프리셋을 미리 구비해 두었습니다. 또, 커스텀 하실 때 이것들을 참고하실 수도 있습니다.
[[include :scpko:theme:navla-style preset=n]]
여기서 n 자리에 적절한 숫자를 넣으면 해당 프리셋을 바로 적용할 수 있습니다.
어떤 프리셋이 있는지, 그리고 어떻게 커스텀을 할 수 있는지, 주의사항은 무엇인지 확인하고 싶으시다면, 아래 링크를 참조하세요.
서식 보기
이미지 블록
수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등)이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.
제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.
이것은 인용구입니다. 그리고! [[div class="blockquote"]]로 선언한 인용구와 줄의 시작에 ">"를 넣어 만드는 인용구는 여기서 다른 서식으로 작용합니다. 전자는 긴 글을 위한 인용구 서식, 후자는 강조를 위한 서식입니다. 지금 이 블록은 전자입니다.
둘의 차이점을 한번 볼까요?
긴 글을 묶기 편한 적은 집중도의 인용구입니다.
묶고자 하는 단락의 윗줄에 [[div class="blockquote"]]를,
그리고 그 아랫줄에 [[/div]]를 달아주면 긴 글 앞에 ">"를 찍는 노가다 없이도 쉽게 인용구를 만들 수 있습니다.
다중 인용구도 가능합니다!
그리고 이것이 줄의 앞에 >를 달아 만든 간편한 인용구입니다.
빠르고 편하게 짧은 단락을 강조할 때 쓰기 편합니다.역시 다중 인용구도 가능합니다!3
펄서는 J. 벨과 A. 휴이시[1]가 처음 관찰했다. 다른 참조는 [2를 참고].
| 이것은 | 표 |
|---|---|
| 만드는 법은 | 이미 아실 거라 |
| 생각합니다 | |
링크 : 링크 서식
링크링크 : 방문한 링크 서식
젤다 : 존재하지 않는 링크 서식
사이드박스 추가
바로 이것입니다!
사이드 박스가 뭐냐고요? 오른쪽에 박스에 손을 대 보세요.
워데나즈의 것과 비슷해 보이지만… 그냥 제가 새로 만들었습니다.
[[div class="limit"]] <— 앵커의 시작 한계를 설정
[[div class="anchor"]] <— 사이드박스가 고정될 위치를 설정
[[div class="sidebox"]]
사이드박스에 들어갈 내용
[[/div]]
[[/div]]
사이드박스가 스크롤해 지나갈 내용
[[/div]] <— 앵커의 종료 한계를 설정
이 코드로 사용할 수 있습니다.
나블라 컴포넌트 요소들
나블라 컴포넌트에 설정된 서식들 입니다.
지금 기본 테마 컬러가 무채도라 잘 안보이지만, 몇몇 클래스는 테마 색깔에 따라 서식이 변하게끔 했습니다.
또, 모두 배경색이 꾸안꾸, 스리슬쩍 들어가 있습니다.
범용 텍스트 박스 입니다.
[[div class="box"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]
종이질감 텍스트 박스입니다.
[[div class="box paper"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]
미니멀 텍스트 박스입니다.
[[div class="box mini"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]
이미지 텍스트 박스입니다.
[[div class="box img"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]
명언 인용문 입니다 —나블라
[[div class="box quote"]]
이 구문으로 이 서식을 불러올 수 있습니다. ,,--나블라,,
[[/div]]
디지털 스타일 박스입니다.
[[div class="box digit"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]
[[div class="pre-next"]]
이 구문으로 위 서식을 불러올 수 있습니다.
[[/div]]
익명(06542)
이거 머임?
물론, 댓글 서식 입니다.
두 개의 열 구문입니다.
어라? 두 개로 안보이신다고요? 그냥 세로로 쌓인 두 글로 보이신다고요?
모바일 환경에선 가독성 이슈로 가로가 아닌 세로로 쌓이게 됩니다. 폰을 가로로 돌리거나 다른 환경에서 접속해 보세요.
오른쪽(혹은 아래)에 이 서식을 불러올 수 있는 구문이 적혀 있습니다.
[[div class="flex-column"]]
[[div class="flex"]]
첫번째 글
[[/div]]
[[div class="flex"]]
두번째 글
[[/div]]
[[/div]]
글자 강조 구문입니다.
이렇게 블록을 강조할 수도 있습니다.
[[span class="accent"]]글자 강조[[/span]]
[[div class="accent"]]
블록 강조
[[/div]]
위 구문으로 이 서식을 불러올 수 있습니다.
혹시, 접기 구문에 기본적으로 특정한 서식이 부여되는 게 싫으신가요?
숨겨진 접기 구문을 넣고 싶은데 맘대로 그라데이션과 특수문자가 달려있는 게 싫으시다면, 다음 구문을 이용해 해결할 수 있습니다.
[[div class="no-colstyle"]]
[[collapsible show="+ 수정한 접기" hide="- 수정한 접기"]]
내용
[[/collapsible]]
[[/div]]
이렇게 no-colstyle 이라는 클래스를 가진 div 내에 접기 구문을 두면, 접기 구문에 기본적으로 깔려있던 서식이 사라집니다! 콜랍시블 구문 뿐 아니라, 이중 접기 구문도 해당됩니다!
즉…
이랬던 서식이
이렇게 바뀝니다.
소스 코드
나블라 스타일 코드 페이지 참조