|
Table of Contents
|
이게 뭔가요?
솔직히 소신 발언 하나 할게요.
시그마 테마의 몇몇 서식이 좀… 구립니다! 몇몇 경우는 제가 임의로 수정하는 경우도 있어요.
그래서 개인적으로 매번 이렇게 바꾸는 게 너무 귀찮아서 그냥 여기다 한번에 정리해두고, 컴포넌트로 한 번에 불러오고자, 이렇게 컴포넌트 페이지를 따로 팠습니다.
뭐, 겸사겸사 제가 자주 쓰는 서식을 커스텀 클래스로 추가도 하고요.
그렇기에 사실, 그렇게 많은 게 바뀌지는 않습니다. 겉으로 볼 때는 딱히 변화가 없어 보일 수도 있습니다. 그냥 글 쓰면서 간간이 보이던 아쉬웠던 레이아웃을 제 취향에 따라 보완한 것에 불과해요.
어떻게 쓰면 되나요?
[[include :scpko:component:navla]]
위 구문을 테마 구문 위쪽에 넣어 주세요. 테마 구문이 없다면 제일 위에 넣어주세요.
이것과 호환되지 않는 테마를 쓴다면, 서식이 오류를 일으킬 수도 있습니다. 그리고 이후에 제가 코드를 임의로 바꿀 수도 있기에 문제가 생길 수도 있습니다. 이 점 유의해서 사용해 주세요. (전 책임지지 않습니다!)
그래서 뭐가 바뀌었나요?
두 번째 헤더의 굵기
이젠 두 번째 헤더도
첫 번째와 세 번째와 마찬가지로 굵어
더 통일성 있어 보입니다.
헤더의 위쪽 여백
헤더의 위쪽에 마진을 주어
조금 더 문단의 흐름을
직관적으로 파악할 수 있어
가독성이 좋아졌습니다.
리스트의 앞 여백
- 리스트의 앞 여백
- 솔직히 너무 넓지 않았나요?
- 특히, 모바일에서 이중 리스트를 볼 떄
- 너무 가독성이 안 좋았습니다.
- 하지만 이젠
- 좀 더 오밀조밀하여
- 훨씬 보기 편합니다
- 추가로
- 첫 리스트마다 약간의 마진을 주어
- 각 하위 목록에 대한 구분도
- 미세하게 가능케 했습니다.
추가로, p구문 바로 다음에 오는 리스트의 윗쪽 마진을 없앴습니다.
사유:
- 이렇게 사용하는
- 케이스가 많으니까요.
탭 뷰 개선
탭 버튼을 양 너비에 맞추었습니다. 이게 훨씬 깔끔하잖아요.
전반적인 코드는 최종책임자 테마에서 가져왔습니다.
스타일링은 일부러 뺐습니다. 다른 테마의 코드를 덮어씌우지 않게 하려고요.
그래서 뭐가 추가되었나요?
폰트들
세리프 서체가 쓸 데가 은근히 많아서 그냥 여기다 미리 임포트 해놨습니다. 쓰기 편하라고 커스텀 span도 마련했어요.
[[span class="nmj"]]여기는 나눔명조 폰트.[[/span]]
[[span class="ubt"]]여기는 은바탕 폰트.[[/span]]나눔명조 폰트입니다. 깔끔하고 명시도가 좋아 본문에 잘 어울립니다.
은바탕 폰트입니다. 날카로운 나눔명조보다 둥글어 명시도는 떨어지지만, 큼직하게 키우면 정말 예쁘기에, 타이틀에 잘 어울립니다.
범용 텍스트 박스
인용문보다 좀 더 주목도가 높은 텍스트 박스입니다.
[[div class="box"]]
여기에 내용을 입력.
[[/div]]짧은 분량의 글보단 긴 분량의 글을 한 번에 묶을 때 사용해 주세요.
이후로 나오는 대부분의 텍스트 박스는 이 박스의 서식을 기반으로 합니다.
종이 질감 텍스트 박스
텍스트 박스에 그림자만을 주어, 마치 테이블에 놓인 종이 한 장을 보는 듯한 느낌을 주는 박스입니다.
[[div class="box paper"]]
여기에 내용을 입력.
[[/div]]꽤나 높은 주목도를 가지고 있습니다.
공문이나 이메일 등에 사용하는 게 좋을 것 같네요.
미니멀 텍스트 박스
간단한 텍스트 박스입니다.
[[div class="box mini"]]
여기에 내용을 입력.
[[/div]]주목도가 조금 낮습니다.
추가 설명, 면담 기록과 같은 긴 글을 묶기에 좋습니다.
이미지가 뒤에 깔린 텍스트 박스
제가 여러 작품에서 자주 사용 중인 뒤에 특정 이미지가 깔린 텍스트 박스를 가져와 봤습니다.
[[div class="box img"]]
여기에 내용을 입력.
[[/div]]style을 지정하지 않는다면,
기본 SCP 재단 로고 이미지가 기본으로 깔립니다.
해당 이미지의 주소는 https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg 입니다.
[[div class="box img" style="--img: url("여기에 url입력");"]]
여기에 내용을 입력.
[[/div]]한번 분석심리학부의 로고를 넣어보았습니다. 어떤가요?
분심부 로고의 주소는 http://scpko.wdfiles.com/local--files/department-of-analytical-psychology/DoAP_Black.png 입니다. 고로, 구문은 다음과 같습니다.
[[div class="box img" style="--img: url("http://scpko.wdfiles.com/local--files/department-of-analytical-psychology/DoAP_Black.png");"]]
여기에 내용을 입력.
[[/div]]
혹시 다크 테마를 사용 중인가요?
그리고, 준비한 배경 로고가 검은색인가요?
그럼, div 구문 내에 style="--dark: 1;" 속성을 추가해 보세요!
그럼 이렇게 다크모드에 어울리게 이미지를 반전시켜 적용합니다.
적용을 안 한다면 이렇게 보입니다.
반그림자 테마 기준으로는 이것도 나쁘진 않네요…!
그리고, 숨겨진 사실! 앞서 보여드린 box와 mini, paper 모두 사실은 같은 방법을 통해 배경이미지 적용이 가능합니다! box img보다는 조금 작고 희미하게 출력되니 참고하세요!
명언 인용문
위의 강조용 인용문 텍스트 박스의 다른 버전입니다. 특히 누군가의 말을 표현할 때 어울릴 거 같군요.
[[div class="box quote"]]
여기에 내용 입력
[[/div]]인터넷에서 본 말을 곧이곧대로 믿지 마라 — 율리우스 카이사르
따옴표는 https://commons.wikimedia.org/wiki/File:Cquote1_black.svg 여기 자료를 썼습니다.
디지털 스타일 텍스트 박스
간간이 쓰는 컴퓨터 재질의 텍스트 박스입니다. SCiPNET 같은 데 접속하는 연출에 쓰기 편할 거에요.
[[div class="box digit"]]
여기에 내용 입력
[[/div]]SCiPNET 데이터베이스
4등급 보안인가 필요
대충 이런 질감입니다.
이 안에서는 인용문 서식도 변화합니다.
">"으로 인용문 구문을 사용하면 이렇게 명령어 효과도 줄 수 있습니다.
[[div class="box digit" style="--clr: 여기에 색상 입력;"]]
여기에 내용 입력
[[/div]]--clr 변수에 색상을 입력하면 그 색상에 맞게 요소들이 재설정됩니다.
CSS 색상 코드 외에도 헥스 코드(#ABCDEF)나 다른 색상 구문(rgb(12, 34, 56))도 통합니다.
연작바
[[div class="pre-next"]]
<< [[[이전 편 주소]]] | [[[허브 주소]]] | [[[다음 편 주소]]] >>
[[/div]]미니멀하고 깔끔한 연작바 입니다.
이거는 또 다른 방식으로 활용이 가능한데,
제목
이렇게 타이틀 서식으로도 활용이 가능합니다..!
타이틀용 가운데 정렬
제 취향을 듬쁙 넣은 타이틀용 세리프 서체 가운데 정렬 span입니다.
+* [[span class="cool-title"]]여기에 타이틀 입력[[/span]]명탐정 머피 로와
수상한 생선들
그리고 그 비린내 나는 진실들
그럼 이렇게 헤더 구문과 함께 넣으면 깔끔한 타이틀이 완성됩니다.
글래시즈 스타일 배너
thd-glasses님의 작페에서 볼 수 있는 특유의 배너 스타일을 CSS로 구현해 봤습니다.
[[div class="glss-banner" style="--img: url('여기에 이미지 주소 입력'); --bg-size:여기에 이미지 사이즈 입력;"]]
+* 제목
++* ^^부제목^^
여기에 설명을 입력!
[[/div]]이 div 내의 제목은 3단계까지 cool-title과 동일한 서식을 받습니다.
댓글
[[div class="re"]]
사용자1
사용자1의 댓글
[[div class="re"]]
사용자2
사용자2의 답글
[[/div]]
[[/div]]익명(01234)
골목길에서 활용할 수 있는 댓글 서식입니다. 첫 번째 문단을 이렇게 자동으로 타이틀로 만들어 주니, 답글의 내용을 적는 텍스트는 엔터를 두 번 쳐서 분리해 주세요.
주딱 ♦
이렇게 댓글 div 내에 동일한 div를 넣어 답글을 달 수도 있습니다.
들여쓰기
[[div class="indent"]]
여기에 내용 입력
[[/div]]소설에서 흔히 다른 문장과 구분하기 위해 문단의 맨 앞을 오른쪽으로 당기고는 합니다. 이러한 서식은 문단의 구분을 용이하게 하여 긴 글을 읽기 수월하게 합니다.
이 구문은 이와 같은 역할을 합니다. 이 구문 내에 존재하는 문단은 맨 앞에 약간의 공백을 가지게 됩니다. 만일 여러분이 긴 테일을 쓰신다면 이 구문을 전체 페이지에 적용하신다면 훨씬 가독성이 좋은 서식이 될 수 있을 겁니다.
줄바꿈을 한 번만 하면 문단이 구분되지 않고, 두 번 줄바꿈을 하여 문단을 구분해 주어야 앞에 공백이 추가됩니다.
플렉스 2열
[[div class="flex-column"]]
[[div class="flex"]]
첫번째 글
[[/div]]
[[div class="flex"]]
두번째 글
[[/div]]
[[/div]]여름엔 덥게~ 겨울엔 춥게~ FLEX~
사실 이 플렉스가 아닙니다. Flexible Box의 약자이죠.
CSS에서 각 요소들을 마치 떡꼬치처럼 특정한 규칙에 따라 꿰어 놓는 레이아웃 배치 방식입니다.
이 클래스는 두 개의 하위 div 박스로 이루어진 떡꼬치입니다.
데스크탑 환경, 그리고 태블릿 환경에서 이 두 박스는 가로로 연결됩니다. 즉, 간단히 말해 2개의 열로 나타납니다.
하지만 이러한 2개의 열 방식은 모바일 환경에서 가독성을 떨어뜨립니다. 고로, 모바일 환경에선 세로로 연결되는 방식으로 변합니다.
만일 모바일에서도 여전히 2열 레이아웃을 유지하고 싶으시다면, 바깥쪽 div를 [[div class="flex-column always"]]로 설정하세요.
또한,
3개 이상의
박스도
가능합니다.
하이라이트 강조
특정 단락을 강조하거나 블록을 만들어 강조하고 싶으시다면, 다음 구문을 사용하실 수 있습니다.
[[span class="accent"]]글자 강조[[/span]]
[[div class="accent"]]
블록 강조
[[/div]]글자 강조
블록 강조
각각 이렇게 나옵니다.
역시, [[div class="accent" style="--bg-clr: 여기에 배경색 입력; color: 여기에 글자 색 입력;"]]과 같은 구문을 이용해 배경색과 글자색을 꾸밀 수 있습니다. 이를 통해 다음과 같이 꾸며볼 수도 있습니다.
일련번호: SCP-000-KO
등급: 유클리드(Euclid)
경고! 열람 시 1등급 한우 필요!
(기능 추가) 이제 —bg-clr 변수에 linear-gradient도 먹힙니다. 여기를 참고해 보세요.
컨텐츠 경고
[[div class="ntc"]]
⚠️ 컨텐츠 경고
[[/div]]정보 모듈 콘텐츠 경고의 파쿠리입니다.
⚠️ 컨텐츠 경고
이렇게 생겼습니다.
가로선 제목
[[div class="line-title"]]
+* 제목스
[[/div]]요런 느낌
입니다. 양측에 가로선을 추가했음죠.
사이드 박스
바로 이것입니다!
[[div class="sidebox" style="--bg-clr:여기에 색상 입력;"]]을 통해 배경 색상도 커스텀할 수 있습니다!
사이드 박스가 뭐냐고요? 오른쪽에 박스에 손을 대 보세요.
워데나즈의 것과 비슷해 보이지만… 그냥 제가 새로 만들었습니다.
[[div class="limit"]] <— 앵커의 시작 한계를 설정
[[div class="anchor"]] <— 사이드박스가 고정될 위치를 설정
[[div class="sidebox"]]
사이드박스에 들어갈 내용
[[/div]]
[[/div]]
사이드박스가 스크롤해 지나갈 내용
[[/div]] <— 앵커의 종료 한계를 설정
이 코드로 사용할 수 있습니다.
이 클래스를 가운데 정렬된 테마에 사용하고자 하신다면, 후술할 center=0 인자를 꼭 선언해 주셔야 합니다.
무료 DLC!
추가로, 시그마 테마의 일부 서식의 스타일을 제 입맛에 따라 바꿔 봤습니다. 이것들은 다른 테마와 호환되지 않을 수 있습니다. 즉, 이 DLC는 시그마 테마를 사용할 때만 사용 가능합니다. (나블라 스타일 테마는 이미 호환되게 적용해 놓았습니다!)
참고로, 이 페이지는 이미 DLC가 적용된 상태 입니다.
이 추가 서식을 이용하려면, 이 컴포넌트에 dlc=0이란 인수를 추가해 주세요.
즉, 아래와 같이 입력해 주세요.
[[include :scpko:component:navla dlc=0]]
왜 하필 0이냐고요? 위키닷 엔진의 기묘한 true / false 판정법 때문에 그렇습니다.
인용문 개선 및 분화
[[div class="blockquote"]]로 선언한 인용구와 줄의 시작에 ">"를 넣어 만드는 인용구를 다른 서식으로 분할했습니다. 전자는 긴 글을 위한 인용구 서식, 후자는 강조를 위한 서식입니다.
이것은 긴 글을 묶기 편한 적은 집중도의 인용구입니다.
묶고자 하는 단락의 윗줄에 [[div class="blockquote"]]를,
그리고 그 아랫줄에 [[/div]]를 달아주면 긴 글 앞에 ">"를 찍는 노가다 없이도 쉽게 인용구를 만들 수 있습니다.
다중 인용구도 가능합니다!
그리고 이것이 줄의 앞에 ">"를 달아 만든 간편한 인용구입니다.
빠르고 편하게 짧은 단락을 강조할 때 쓰기 편합니다.역시 다중 인용구도 가능합니다!
접기 구문 개선
인수들
사이드박스 목차
이 페이지에 적용되어 있습니다. 왼쪽을 보세요!
[[include :scpko:component:navla tocbox=0]]
컴포넌트를 인클루드할 때 위와 같이 입력하면 왼쪽 상단에 이 페이지의 목차를 표시하는 사이드 박스가 생깁니다.
이걸로 긴 글을 나누어 읽을 때, 읽던 페이지로 빠르게 이동할 수 있습니다.
가운데 정렬
전환 가능한 사이드바 모듈을 사용할 때, 사이드 바 위치를 수동으로 조절할 수 있는 인수를 더했습니다.
[[include :scpko:component:navla center=0]]
이렇게 한다면 사이드박스와 목차가 완벽히 페이지의 끝에 잘 고정됩니다. 나블라 스타일 테마의 경우, 기본적으로 이것이 선언되어 있습니다.
도움!
혹시 어떤 커스텀 클래스가 있는지 확인하기 위해 매번 이 페이지를 찾아오기 번거로우신가요?
[[include :scpko:component:navla help=0]]
컴포넌트를 인클루드할 때 위와 같이 입력하면 어떤 클래스가 있는지 알려주는 박스가 나타납니다.
이렇게 나타납니다.
임시로 구문을 확인 할 때 사용하시고, 투고할 땐 help=0를 꼭 지우는 걸 잊지 마세요!
소스코드
나블라 컴포넌트 코드 페이지 참조