이게 뭔가요?
반갑습니다. 나블라 스타일 테마는 잘 사용하고 계신가요?
- 이 페이지는 그 테마의 프리셋을 모아두고, 또, 커스텀 테마 및 커스텀 방법에 대한 좀 더 상세한 내용을 담은 페이지 입니다.
- 누구나 이 페이지에 프리셋과 테마를 추가하실 수 있습니다! 형식과 순서를 맞춰주세요. 순서는 무조건 목록의 아래에 추가하셔야 합니다.
프리셋
껍질-미리-깐 커스텀 테마들 입니다.
이 페이지를 인클루드 할 때 preset인수를 추가 하여 바로 사용하실 수도 있고, 또는 본인이 직접 커스텀 테마를 만들 때 이것들을 참고할 수 있습니다.
[[include :scpko:theme:navla-style preset=n]]
여기서 n 자리에 적절한 숫자를 넣으면 해당 프리셋을 바로 적용할 수 있습니다.
또, 프리셋을 적용했을 때의 느낌을 대충 알 수 있게, 이렇게 미리보기를 마련했습니다.
실제 적용된 테마와 완전히 똑같지는 않더라도, 대충 배경 색과 텍스트 색깔, 그리고 테마 색상을 알 수 있습니다.
이것은 테마 기본값 입니다.
1. 플로럴 퍼퓸
산뜻한 보라와 핑크빛의 테마입니다. 향긋하고 포근한 라벤더 향이 느껴지는 테마 입니다.
by. Navla
preset=1
2. 하늘과 바람과 별과 테마
컬쳐럴-플렁키즘 네이밍을 따르지 않는 프리셋 테마 입니다. 보기 편하고 쓰기에도 좋은 원고지의 느낌을 살리려 했습니다.
by. Navla
preset=2
3. 스카이 블루
시원하고 청량함을 주는 파란색 계열의 라이트 테마 입니다. 저는 이것을 기본 테마로 할 지, 무채색을 기본 테마로 할 지 고민했답니다.
by. Navla
preset=3
4. 칵투스 브라운
dj서닌장의 전용테마, 격리부 테마의 색감을 슬쩍 가져왔습니다. 이렇게 떼어놓고 보니, 이 테마도 이쁘군요~
by. Navla
preset=4
5. 유니버셜 다크
범용적으로 사용할 수 있는 다크 테마입니다.잭스타일 테마가 생각나는군요.
by. Navla
preset=5
6. 시크릿 레드
심각하고 비밀스러운 무언가가 있을 법한 다크 테마 입니다. O5 양반들의 깊숙한 비밀을 들춰보기에 적합한 테마이죠.
by. Navla
preset=6
7. 짭그마
기존의 시그마-9 테마와 유사한 프리셋 입니다. 클래식함을 유지하고 싶으면서도 나블라 스타일을 챙겨가고 싶다면 이것을 사용해 보세요.
by. Navla
preset=7
8. 짭렉-하이라이터
이번엔 블랙하이라이터를 슬쩍해왔습니다! 사실 위의 것과 그렇게 크게 달라지진 않습니다만, 헤더가 블랙하이라이터의 질감으로 바뀝니다.
by. Navla
preset=8
9. 짭무암
현무암 테마를 가져왔습니다. 현무암과 나블라 스타일의 디자인 기조가 유사해서 정말 잘 어울립니다!
by. Navla
preset=9
10. 짭그림자
반그림자 테마를 가져왔습니다. 참고로, 나블라 테마의 변수화는 반그림자 테마에서 많은 모티프를 얻었습니다.
by. Navla
preset=10
11. 미니멀리스트
프리셋 등록
혹시, 본인이 깔쌈한 프리셋을 만들었고, 모두가 쉽게 사용할 수 있게 하고 싶으시다면,이곳에 프리셋을 등록시킬 수 있습니다.
다만! 다음 조건은 지켜 주세요.
- 이쁠 것.
- 제가 보고 심미적으로 너무 떨어진다 싶으면 무통보 삭제하겠습니다.
- 범용 테마일 것.
- 특정 요단이나 카논, 연작 등의 전용 테마는 프리셋으로 두지 말아주세요. 따로 페이지를 파서 투고시키는 것을 더 추천드립니다.
프리셋을 등록하려면 이 챕터 윗쪽에(안내하는 주석 구문이 보이실 겁니다.) 아래 구문을 붙여넣기 해 주세요.
++ 제목스
[[collapsible show="코드 보기" hide="숨기기"]]
[[code type="CSS"]]
{여기에 코드를 입력}
[[/code]]
[[/collapsible]]
[[div class="flex-column"]]
[[div class="flex-1"]]
[[div class="preview" style="
{여기에 4개의 변수를 아래처럼 입력, 생략 가능(생략 시 기본 테마 색상)}
--body-txt-color: 00,00,00;
--bg-color: 00,00,00;
--theme-color: 00,00,00;
--theme-color-dark: 00,00,00;
"]]
[[div class="theme"]]
[[/div]]
[[div class="theme-dark"]]
[[/div]]
[[/div]]
[[/div]]
[[div class="flex-2"]]
대충 설명
by. [[*user 닉네임]]
> preset=마지막 프리셋 번호+1
[[/div]]
[[/div]]커스텀
나블라 스타일 테마는 변수화에 힘쓴 테마입니다. 여러분은 이 변수를 건드리는 것 만으로 자신만의 테마를 쉽게 커스텀 할 수 있습니다.
변수
변수는 :root:lang(ko) 내부에 선언되어 있습니다. 그리고 간단한 재선언을 통해 손쉽게 커스텀 할 수 있습니다.
변수 재선언은 다음 코드를 테마 선언 아래에 해주시면 됩니다.
[[module CSS]]
:root:lang(ko) {
--원하는-변수1: 원하는 값;
--원하는-변수2: 원하는 값;
}
[[/module]]
아래에 제시된 변수의 정보를 보는 방법은 다음과 같습니다.
--변수-이름: 기본값; /*설명*/
:root:lang(ko) { /*====< 기본 변수 >====*/ /*기본적으로 여러분이 손쉽게 건드릴 수 있는 변수들입니다. 몇몇 변수는 자동으로 값이 결정됩니다만, 뭐든 여러분이 원하는 값을 넣을 수 있습니다.*/ --header-height: 200px; /*헤더의 높이입니다.*/ --top-bar-height: 25px; /*탑바의 높이입니다.*/ --theme-color: 120, 120, 120; /*테마의 하이라이트 색상입니다. 밝은 테마라면 약간 어둡게 설정해 주세요.*/ --theme-color-dark: 60, 60, 60; /*더 어두운 하이라이트 색상입니다.*/ --body-txt-color: 44, 44, 44; /*본문 텍스트 색상입니다.*/ --bg-color: 242, 242, 242; /*배경 색상입니다.*/ --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: "확보, 격리, 보호"; /*헤더의 부제목 텍스트입니다.*/ --title-font: 'Unbatang', sans-serif; /*헤더의 제목과 본문의 제목의 폰트입니다.*/ --header-txt-color: var(--body-txt-color); /*헤더의 텍스트 색상입니다.*/ --title-color: var(--header-txt-color); /*헤더 내 타이틀의 텍스트 색상입니다.*/ --title-outline: none; /*속성을 block으로 선언 시 헤더 내 타이틀에 윤곽선을 더합니다.*/ --title-outline-color: 0,0,0; /*헤더 내 타이틀 윤곽선의 색상입니다.*/ --title-align: center; /*헤더 내 타이틀 정렬 방향을 지정합니다. center 혹은 left로 해주세요. 이때 --left 변수를 꼭 1로 지정해 주세요.*/ --logo-size: calc(var(--header-height) - var(--top-bar-height) - 10px); /*로고의 크기입니다.*/ --logo-top: 25%; /*로고의 높이 입니다.*/ --some-border-color: var(--body-txt-color); /*몇몇 div 박스의 윤곽선 색상을 정합니다.*/ --link-color: var(--theme-color); /*방문하지 않은 링크의 색상입니다.*/ --link-color-visited: var(--theme-color-dark); /*방문한 링크의 색상입니다.*/ --h1-top: calc(var(--header-height)/1.2 - 80px); /*헤더 내 주 제목의 높이를 결정합니다.*/ --h1-size: calc(var(--header-height)/6 + 10px); /*헤더 내 주 제목의 크기를 결정합니다.*/ --h2-top: calc(var(--h1-top) + var(--h1-size)/1.3 + 11px); /*헤더 내 부제목의 높이를 결정합니다.*/ --h2-size: calc(var(--h1-size) * 0.45); /*헤더 내 부제목의 크기를 결정합니다.*/ --top-bar-position: static; /*탑바가 스크롤을 내렸을 때 상단에 붙을지를 결정합니다.*/ --tob-bar-justify: center; /*탑바의 리스트를 정렬할 방향을 지정합니다. center / left / right가 사용 가능합니다.*/ --link-bg-style: linear-gradient(transparent 60%, rgba(var(--theme-color),var(--alt-link-opa,.25)) 60%, rgba(var(--theme-color),var(--alt-link-opa,.25)) 90%, transparent 90%, transparent 100%);/*링크의 배경 스타일을 선언합니다.*/ /*====< 미정의 변수 >====*/ /*기본적으로 정의되어 있지 않은 변수입니다. 하지만 특별한 경우에 이것을 1로 지정해 주면 여러 서식이 그에 맞춰 변합니다.*/ --drk: 1; /*다크테마를 만들 때 이것을 꼭 1로 정의해 주세요. 몇몇 div의 배경색이 어둡게 변합니다.*/ --clrd: 1; /*밝은 테마이면서 강한 채도의 테마 컬러를 지정했을 때 1로 정의해 주세요. 하이라이터의 색이 밝은 배경에 강한 채도 서식에 알맞게 연하게 변합니다.*/ --left: 1; /*좌정렬 헤더를 지정했을 때 1로 정의해 주세요. 헤더 텍스트의 앞에 로고가 겹치지 않게 마진을 줍니다.(정사각형 로고 기준)*/ /*====< 취급 주의 변수 >====*/ /*여러 서식을 자동으로 적용하기 위한 임시 변수들 입니다. 이 자체로써 특정한 서식을 건드리기도 하니, 필요하다면 새로 지정해서 사용해도 좋습니다.*/ --white: 255, 255, 255; /*흰색입니다. 몇몇 div의 배경색을 결정합니다.*/ --alt-black: calc(var(--drk)*20),calc(var(--drk)*20),calc(var(--drk)*20); /*--drk가 선언되어 있다면, 검은색으로 설정합니다.*/ --alt-bg-color: var(--alt-black,var(--white)); /*몇몇 div의 배경색입니다. 본래 흰색이나, --drk가 정의되어 있다면 검은색으로 변합니다.*/ --alt-link-opa: calc(var(--clrd)*0.12); /*링크의 하이라이터 서식의 투명도를 결정합니다. --clrd가 정의되어 있다면 더 연하게 변합니다.*/ --alt-h1-hlt-opa: calc(var(--clrd)*0.15); /*본문 제목1의 하이라이터 서식의 투명도를 결정합니다. --clrd가 정의되어 있다면 더 연하게 변합니다.*/ --alt-title-padding: calc(var(--logo-size) + var(--left)*5px); /*헤더 내 타이틀의 좌측 여백을 결정합니다. --left가 정의되어 있다면 로고의 크기만큼의 좌측 여백을 설정합니다.*/ }
엑스트라 div
헤더와 탑바를 꾸미고 싶을 때 직접 #header와 #top-bar를 만지기 보다는 이것을 만져주세요. 훨씬 편할 겁니다.
- #header-extra-div-1 : 헤더와 딱 맞물려 있습니다. 이 div를 만지면 상단 헤더의 로고를 커스텀 할 수 있습니다.
- #header-extra-div-2 : 헤더의 높이만큼 좌우로 꽉 찬 div입니다. 이 div를 만지면 상단 헤더의 배경을 커스텀 할 수 있습니다.
- #header-extra-div-3 : 그 아래 탑바의 위치에서 좌우로 꽉 찬 div입니다. 이 div를 만지면 탑바를 커스텀 할 수 있습니다.
- #extra-div-4 : 전체 페이지 배경과 맞물려 있습니다. 이 div를 만지면 배경을 커스텀 할 수 있습니다. 기본적으로 상단에 은은한 그라데이션을 깔아두었습니다.
- #extra-div-5 : 당신의 디스플레이 화면과 맞물려 있습니다. 네, fixed되어 있습니다.
1번의 로고와 4번의 그라데이션 배경을 제외한 나머지 엑스트라 div들은 투명합니다. 여러분이 추가로 CSS를 덧붙임으로써 커스텀 하시면 됩니다.
주의할 점
- 변수 관련
- --top-bar-height : 탑바는 헤더의 내부에 있습니다. 탑바 높이를 올리면 위쪽으로 올라가 헤더 영역을 덮어씌웁니다.
- 색상 변수들 : 모두 "00, 00, 00" 포맷을 지켜 주세요. 각각 R, G, B값입니다.
- --theme-color-dark : —theme-color에서 명도는 내리고 채도는 조금 더 올리는 게 좋습니다.
- --drk / --clrd / --left : 중요하니까 한 번 더 말합니다! 다크 테마 / 밝은 고채도 테마 / 좌정렬 헤더를 커스텀 할 때 이것을 꼭 1로 설정해 주세요.
- 헤더 내 타이틀의 위치가 맘에 안 드시나요? --h1-top 변수를 통해 상하 위치를, --title-align: left;를 정의하고, --alt-title-padding 변수를 통해 좌우 위치를 조정할 수 있습니다.
- 각 변수들을 바꾸어 보고 그에 따라 어떻게 테마가 변화하는지 즉시 학인하고 싶으시다면, 컴퓨터에서 F12를 누르고, 요소 탭, 그 아래의 스타일 탭에서 관련 코드들을 직접 만져볼 수 있습니다.
- extra-div 관련
- 코드 작성 시 선택자의 앞에 꼭 div를 붙여주세요. #extra-div-n(x) div#extra-div-n(o)
- 1, 2, 3번은 #header-extra-div이고, 4, 5번은 그냥 #extra-div입니다. 지칭하기 편하게 이렇게 했습니다.
- 각 div들의 쌓음 맥락은 다음과 같습니다: 3/1/2/5/4
- 앞에 있는 게 더 위에 있는 겁니다.
- 1번 div는 좌우로 꽉 차 있지 않습니다. 고로 이 친구에 background 속성을 부여하는 것은 매우 비추천합니다.
- 몇몇 프리셋의 경우 1번 div에 색 반전 필터를 먹여놨습니다. 색상이 있는 로고를 이런 프리셋과 함께 사용할 때 fliter 속성을 꼭 리셋시켜주세요.
- 3번 div에 윤곽선을 더할 때는 border가 아닌 outline을 사용해 주세요. border는 두께가 높이에도 적용되어 위치가 어그러집니다.
이 바로 윗쪽 챕터에서 변수와 extra-div들을 이용한 프리셋을 준비해 뒀습니다. 커스텀 하기 전에 한번 참고해 보세요.
DIY
커스텀 테마 페이지를 만들어 투고하고 싶으시다면 iftag 구문 바깥에 아래 구문을 넣어주세요.
[[include :scpko:component:toggle-sidebar]]
[[include :scpko:component:navla dlc=0|tocbox={$tocbox}|help={$help}]]
[[module CSS]]
@import url('https://scpko.wdfiles.com/local--code/theme:navla-style/2');
[[/module]]
그리고 본인이 짠 코드를 그 아래에 임포트 하시면 됩니다!
커스텀 테마 목록
나블라 스타일 기반의 다른 커스텀 테마들 입니다.
역시, 누구든 언제든 추가 가능합니다.
분석심리학부
분석심리학부 테마 (링크)
분석심리학부 전용 테마 입니다. 이전에 있던 블랙하이라이터 기반 테마에서 독립했습니다.
by. Navla