터보비전 테마
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
 
     #top-bar .close-menu {
        margin-left: 19.75em;
        opacity: 0;
    }
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}
 
@supports selector(:focus-within) {
 
@media (min-width: 768px) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
        z-index: -1;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
}
 
}
평가: 0+x

이것은 JakdragonXJakdragonXCroquemboucheCroquembouche가 만든 터보비전(Turbo Vision) 테마입니다. 순전히 미학적 용도의 테마이며, 세계관의 특정 내용에 구애되지 않으니 아무데나 써도 됩니다. 물론 아플 정도로 복고풍인 경우에만 어울리겠지만요.

이 테마를 사용하기 위해서는 페이지의 소스코드에 다음 코드를 붙여넣으십시오.

[[include :scpko:theme:turbo-vision]]

이러면 터보비전이 ‘테마 모드’로 작동합니다.


터보블록은 사용하고 싶지만 테마는 사용하고 싶지 않다면, "blocks=-" 를 추가하십시오.

[[include :scpko:theme:turbo-vision blocks=-]]

이라면 터보비전이 ‘컴포넌트 모드’로 작동합니다. 이 모드는 블랙 하이라이터 테마와 호환됩니다.


‘테마 모드’와 ‘컴포넌트 모드’는 나중에 표시되므로, 페이지에서 어떤 모드를 사용하고 있는지 확인하십시오.

jak.png

로고 제작: AethrisAethris

터보비전 테마는 90년대 DOS 단말기의 외관을 재현하도록, 즉 아스키 문자들로 구성된 것처럼 보이도록 설계되었습니다. 테두리와 그림자가 투박하고 비대칭적으로 보이는 이유는 박스 문자(─│┐┌ 등)를 이용해서 배경색과 글꼴색만 지정해서 만든 것처럼 보이도록 만들어졌기 떄문입니다.

하지만 우리는 이 지침을 그렇게 적극적으로 고집하지는 않으며, 약간의 창의적 자유를 취하여 경험을 조금 덜 고통스럽게 만들었습니다.

이 테마는 기본값으로 사이드바가 토글로 되어 있습니다. 널찍한 수평수직 공간 어디에나 오프셋 블록들을 마음대로 채울 수 있게 만들기 위함입니다. 화면이 작아서 수평 공간이 작은 경우에는, 오프셋 블록들이 자동으로 페이지 가운데로 정렬됩니다. 즉 모바일로 읽어도 문제가 없습니다.

이 테마는 뭉툭하고, 투박하며, 현란합니다. 이 테마를 사용하는 페이지는 여러 개의 창을 띄어서 붐비는 인터페이스처럼 보일 것이고, 그게 바로 매력 포인트입니다. 하지만 꼭 그런 식으로 써야 하는 법은 없습니다. 좋으실 대로 사용하세요. 이 페이지에는 어떻게 해야 원하는 대로 테마를 주무를 수 있는지 안내를 제공합니다.


이 탭뷰에서는 이 테마에서 위키닷의 기본 포매팅들이 어떻게 보이는지 사례들을 제공합니다.

인용문과 표는 ‘컴포넌트 모드’에서도 사용할 수 있지만, 탭뷰는 ‘테마 모드’에서만 아래와 같이 작동합니다.

수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.

굵게.

기울임.

고정폭.


그럼 이제 터보블록이 어떻게 작동하는지 빠르게 시연을 보이도록 하겠습니다…


본 페이지의 다음 부분은 끔찍하게 보일 수 있습니다. 하지만 당황하거나 겁먹지 마십시오 — 모든 부분이 쉬운 덩어리들로 분해될 수 있습니다.


scpimage.png

안녕 맞아 이거 텍스트야

일련번호

SCP-번호

객체 등급

리그마(LIGMA)

특수 격리 절차

johnsmith12: 어, 너 지금 무슨 짓을 하는지 아는 거야?

나: ㅋㅋ모름. 그냥 이 멍청한 테마 갖고 뻘짓하는 중임.

SCP-번호는 현재 미격리 상태다. 이것이 정체불명의 글쓰기 떄문인지 아니면 그냥 졸라 귀찮아서 그런 것인지는 수수께끼로 남아 있다.

어떤 이유로든 SCP-번호를 관찰하게 될 경우 — 생각해 보니 별로 말이 안 되는 것 같지만 — 영향을 받은 피험자는 치료 #104321을 위해 기지 치료사에게 문의해야 한다. 이러한 치료는 몇 시간 이상 지속될 수 있으며, 환자에게는 매우 고통스러울 것이다. 왜냐하면 아무도 양호실에 가고 싶어하지 않거든, 이유야 씨발 다 알 만하지

아 씨발 오늘 점심 뭐였더라?

설명

SCP-번호는 아무 것도 아니다. 진짜 아무 것도 아니다. 사실, 이건 거짓말이다. 바로 너하고 똑같다. 너도 당연히 거짓말이다. 상처받거나 화내지는 마라. 이건 모두에게 보편적으로 적용되는 거니까. 여기 재단에서는 차별행위가 금지되어 있다.

없이 별 별 아름다운 옥 마디씩 봅니다. 많은 라이너 애기 이름과, 아직 잔디가 위에 옥 봅니다. 시와 멀듯이, 차 이름을 내일 이국 멀리 가득 버리었습니다. 어머님, 패, 속의 어머니, 이름을 그리워 밤을 못 벌써 봅니다. 속의 그리워 둘 계절이 까닭입니다. 벌레는 것은 어머니 둘 잠, 이름과 노새, 까닭입니다. 소학교 새워 내 봅니다.

별 그리워 다하지 이제 듯합니다. 새워 아이들의 아침이 봅니다. 사랑과 위에도 불러 강아지, 멀리 이름을 이름과, 까닭입니다. 이네들은 벌써 무덤 잠, 별 별 소녀들의 거외다. 부끄러운 이름자를 써 나는 나는 이름을 위에 거외다.


솔직히 까놓고 말해서, 우리가 진실이라고 말할 수 있는 게 무엇이지? 어쩌면 지각능력도 거짓일지도 모른다. 당연하게도, 너의 현실과 나의 현실은 똑같을 수가 없다. 우리는 모두 서로 다른 진실과 거짓을 가지고 있다. 물론 우리는 삼차원 생명체다. 우리는 이해를 갈망한다. 우리는 지식을 원하고, 우리의 최선의 의도에도 불구하고 지식을 추구할 것이다.

혹시 제가 색칠된 상자의 크기를 늘리기 위해 억지로 개소리를 길게 치고 있다고 생각하시고 있나요? 그럴 수도 있죠. 하지만 그런 무의미한 바람과 상관없이, 당신에게 자기성찰의 순간을 드리고 싶군요. 너는, 정말로, 진짜인가? 아니, 아까도 말했지만, 너는 그냥 거짓된 상이다. 네가 살고 있는 세상에 대한 잘못된 상. 그게 다야.


사용법

지금 이 텍스트가 들어 있는 것 같은 터보 블록을 사용하기 위해서는, 다음 속성들을 사용하는 div를 만들어야 합니다.

  • "turbo-block"
  • 배경색을 지정하는 속성
  • 테두리색을 지정하는 속성
  • 글자색을 지정하는 속성

본 테마에서 모든 속성을 제공하고 있습니다.

블록

"turbo-block" 속성은 터보블록 그 자체를 생성하는 속성입니다. 다른 속성 없이 이거 하나만 쓸 수도 있지만, 이상해 보일 겁니다.

[[div class="turbo-block"]]
여기에 텍스트 입력
[[/div]]

배경색

본 테마는 다양한 배경색 유틸리티 속성을 제공하고 있습니다. 사용법은 "bg-[색상]" 형태입니다. 사용 가능한 모든 색상은 다음과 같습니다.

[[div class="turbo-block bg-red"]]

[[div class="turbo-block bg-grey"]]

[[div class="turbo-block bg-green"]]

[[div class="turbo-block bg-cyan"]]

[[div class="turbo-block bg-orange"]]

[[div class="turbo-block bg-yellow"]]

[[div class="turbo-block bg-purple"]]

[[div class="turbo-block bg-black"]]

[[div class="turbo-block bg-white"]]

경계선색

경계선 색상은 두 개의 속성이 있습니다. "border-black"과 "border-white" 입니다. 터보블록은 경계선색을 기본으로 설정하지 않기 때문에, 일일이 설정해줘야 합니다.

지금쯤이면 여기서 만들어진 모든 "turbo-block" div는 경계선이 이중 실선이고, 인용문이나 표, 탭뷰는 경계선이 단일 실선이라는 것을 눈치채셨나요.

글꼴색

글꼴색도 둘 중 하나입니다. "text-black" 아니면 "text-white". turbo-block black 과 white에서는 자동으로 기본 글꼴색이 지정됩니다.

터보블록들은 저마다의 제목과 부제목을 가질 수 있습니다. 이 제목은 블록의 바로 정가운데 상단에 나타납니다. 이 경우에는 "제목"이라고 나와 있네요. 블록 div에 "data-title"를 추가해 줌으로써 체목을 넣을 수 있습니다.

[[div class="turbo-block ..." data-title="여기에 제목 입력"]]

오리지널 터보비전과 똑같이 하려면 제목은 대문자로만 되어야 하지만, 강제사항은 아닙니다. 그냥 넣고 싶은 거 넣으세요.

그래도 되도록 제목은 짧게 쓰기 바랍니다. 제목이 넘치면 이상하게 보이거든요.

무슨 소리인지 알겠지요?

이것의 소스코드는 이렇습니다.

[[div class="turbo-block bg-grey border-black text-black" data-title="웁스, 나 좀 봐! 내 이름은 너무 긴 제목이야!"]]
무슨 소리인지 알겠지요?
[[/div]]

불쌍한 모바일 유저들을 배려해서 제목은 짧게 써넣읍시다.

부제목

터보블록 안에서 단락을 나누는 부제목을 삽입하는 "heading" 속성이 있습니다. 위에 나타난 부제목은 다음 코드로 삽입된 것입니다.

[[div class="heading"]]
부제목
[[/div]]

부제목 텍스트 없이 그냥 선을 긋고 싶다면, 평소에 하던 대로 수평줄을 그으면 됩니다.


↑ 잘 했어 라이코스.

터보블록 안에는 아무 거나 다 집어넣을 수 있고, 당연히 화상자료도 넣을 수 있습니다. 화상을 넣는 가장 좋은 방법은 터보블록 div를 만들고 그 안에 표준형 이미지 블록 컴포넌트를 사용하는 것입니다.

아까 저 위에서 나왔던 화상자료는 다음 코드를 사용해 넣은 것입니다.

[[div class="turbo-block bg-orange border-white text-white" data-title="화상"]]
[[include :scpko:component:image-block
| name=scpimage.png
| caption=안녕 맞아 이거 텍스트야
]]
[[/div]]

지금까지 어떻게 터보블록을 만드는지에 대해 배우셨습니다. 터보블록을 다른 터보블록 안에 넣을 수 있지만, 그렇다고 해서 흐트러진 연구원의 어수선한 책상에 산더미처럼 쌓인 공책더미처럼 귀살스러운 느낌이 들지는 않습니다. 그런 느낌을 재현하기 위해서는, 블록을 왼쪽 오른쪽으로 옮겨야 합니다.

이것은 오프셋 속성을 사용함으로써 구현할 수 있습니다. 터보비전 테마는 다음과 같이 왼쪽으로 이동시키는 속성

  • "offset-left"
  • "left-1"
  • "left-2"
  • "left-3"
  • "left-4"
  • "left-5"

…그리고 오른쪽으로 이동시키는 속성을 제공합니다.

  • "offset-right"
  • "right-1"
  • "right-2"
  • "right-3"
  • "right-4"
  • "right-5"

무언가 왼쪽으로 보내기 위해서는, 보낼 것을 div로 감싸고 2개 속성을 부여하세요. 첫 번재 속성은 "offset-left"고, 다른 하나는 얼마나 가운데에서 왼쪽으로 치우쳤는지를 표현하는 "left-1"에서 "left-5"까지의 속성입니다. "left-1"은 조금만 움직이고, "left-5"는 화면의 왼쪽 끝까지 확 이동합니다.

오른쪽에 대해서도 똑같이 하면 됩니다. 다만 "left" 라는 글자들을 "right"로 바꿔줘야 합니다.

모바일 오프셋

CSS를 만져 보신 분이라면, 수평으로 뭘 많이 늘어놓는 레이아웃은 아주 위험한 게임이라고 생각하실 겁니다. 모바일에서 개떡같이 보이게 될 것이란 말이죠.

하지만 두려워 말라! 가로폭이 작은 화면에서는, 오프셋 div들이 페이지 가운데로 정렬되고, 아주아주 작은 화면에서는 오프셋들이 한꺼번에 그냥 숨김 처리 됩니다.

즉 저자들 입장에서는 모바일 유저들도 오프셋 div를 이용해 만든 콘텐츠를 빠짐없이 읽을 수 있다는 뜻입니다. 원래 의도한 만큼 정신사나운 디자인을 전달하지는 못하겠지만요. 모든 사람들이 공평하게 읽을 수 있도록, 언제나 최종 송고하기 전에 자기 작품이 모바일에서도 잘 작동하는지 확인하는 습관을 들입시다.

오프셋 블록 만들기

오프셋 블록을 만들 때는 위에 나온 속성들 중 두 개, 오프셋의 방향과 정도를 조합합니다.

[[div class="offset-left left-3"]]

[[/div]]

터보블록을 오프셋하고 싶을 경우, 터보블록을 오프셋블록 안에 넣어 감싸세요. (터보블록에 오프셋 속성을 직접 부여하지 마세요):

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
안뇽!
[[/div]]
[[/div]]

안뇽!

가로폭이 넓은 화면이라면 (e.g. 데스크톱) 안뇽이 왼쪽에 뜰 것입니다. 가로폭이 좁은 화면이라면 (e.g. 휴대전화) 안뇽이 이 텍스트 위에 뜰 것입니다.

오프셋블록은 터보블록과 별개의 요소입니다. 즉, 아무 거나 마음대로 오프셋할 수 있다는 것입니다. 이미지 터보블록을 오프셋해 보세요!

플로트 클리어링

오프셋 블록들은 CSS "float" 성질을 사용합니다. HTML 요소가 플로팅을 가지면, 그 요소 아래에 있는 요소들이 끌어올라와 비어 있는 가로 공간을 채우게 됩니다.

이것이 의도한 바에 맞을 수도 있지만, 항상 그렇지 않을 수도 있습니다. 어쩌면 오프셋 블록이 떠다니는 동시에, 그 다음 내용은 오프셋 블록이 떠다니지 않을 경우에 나올 것처럼 하고 싶을 수도 있을 것입니다. 그러면 오프셋과 다음 내용 사이에 커다란 공백이 생길 것이고, 원한다면 거기에 뭐 다른 것을 넣을 수도 있겠죠.

이렇게 플로팅을 제끼는 것을 CSS에서 "clear"라고 합니다. 흔히 "클리어픽스"라고도 합니다. 위키닷에서는 물결표 네 개 (~~~~)를 이용해 간편하게 클리어를 할 수 있는 구문을 제공하고 있습니다:

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
안뇽!
[[/div]]
[[/div]]

~~~~

안뇽!

텍스트가 위로 올라가 공백을 채우지 않습니다. 그래서 데스크톱에 큰 구멍이 났네요. 모바일에서는 차이가 없습니다.

사용례

모든 오프셋 조합의 예시가 아래와 같습니다.

당신의 브라우저가 넓은 가로폭을 가지고 있다면, 창의 크기를 조절해가면서 오프셋 div들이 어떻게 반응하는지 직접 살펴 보세요.

당신의 브라우저가 좁은 가로폭을 가지고 있다면, 그러니까 아마도 모바일 기기를 사용한다면, 아래 오프셋들은 그냥 재미없는 가운데정렬된 박스들로 보일 것입니다. 오프셋을 확인하고 싶다면 더 넓은 화면에서 시도해 보세요.

[[div class="offset-left left-5"]]

[[div class="offset-left left-4"]]

[[div class="offset-left left-3"]]

[[div class="offset-left left-2]]

[[div class="offset-left left-1"]]

[[div class="offset-right right-1"]]

[[div class="offset-right right-2"]]

[[div class="offset-right right-3"]]

[[div class="offset-right right-4"]]

[[div class="offset-right right-5"]]

오프셋 속성을 사용해서는 안 되는 일부 상황이 있습니다. 물론 하려면 할 수 있지만, 페이지에 악영향을 끼칠 것입니다.

어떤 속성들이 사용가능한지는 사이드바의 위치, 그리고 브라우저 뷰포트에서 페이지 콘텐트가 가운데 정렬되어 있는지 여부에 따라 달라집니다. 또한 이 테마를 ‘테마 모드’와 ‘컴포넌트 모드’ 중 어느 쪾을 사용하는지에 따라서도 달라집니다. 페이지 가장 상단에 있는 사용지침을 검토하여 어떤 모드를 사용해야 할지 확인하십시오.

테마 모드

터보비전 테마를 ‘테마 모드’로 사용할 경우, 전환 가능한 사이드바가 기본값으로 따라옵니다. 페이지 콘테트는 가운데 정렬되고, 최대한의 가로 공간이 확보됩니다. 모든 오프셋 속성을 자유롭게 사용해도 됩니다.

컴포넌트 모드

터보비전 테마를 ‘컴포넌트 모드’로 사용할 경우, 전환 가능한 사이드바가 따라오지 않습니다. 그래서 가로 공간이 제한됩니다.

토글 사이드바를 따로 데려와서 사용할 경우, 페이지 콘텐트가 가운데정렬 될 것입니다. 그러면 오프셋 속성들까지 마음껏 사용해도 됩니다.

토글 사이드바를 사용하지 않을 경우, 페이지 바디가 화면의 오른쪽에 있게 됩니다. 그러니 오른쪽 오프셋을 사용해서는 안 됩니다. 사용하면 화면의 오른쪽 경계를 넘어가 버릴 것입니다. 그리고 페이지 시작 부근에서는 왼쪽 오프셋도 사용해서는 안 됩니다. 사이드바를 덮게 될 테니까요.

블랙 하이라이터 테마를 사용할 경우, 페이지 바디가 가운데정렬되므로, 오른쪽 오프셋은 마음껏 사용해도 됩니다. 하지만 이제 사이드바가 페이지의 왼쪽을 통째로 먹게 되었기 떄문에, 왼쪽 오프셋은 전혀 사용할 수 없습니다.

전환 가능한 사이드바 BHL을 사용할 경우, 왼쪽에 공간이 확보되기 때문에 왼쪽 오프셋도 자유롭게 사용할 수 있습니다.

TL;DR

한줄요약: 사이드바가 있을 경우 왼쪽 오프셋을 피하고, 페이지 콘텐트가 가운데정렬이 아닐 경우 오른쪽 오프셋을 피하도록 합니다.

이상이 전부네요.

소스코드

소스코드 보기