틀:좌우: 두 판 사이의 차이

시각위키텍스트

2025년 1월 30일 (목) 20:06 판

이 틀 문서의 출처는 리브레 위키의 좌우이동 문서입니다.

설명문서 [보기] [편집] [역사] [새로 고침]

리브레 위키:틀:좌우이동에서 가져온 틀입니다.

설명

연속된 문서들이 있을 때 문서간 이동을 편리하게 만들기 위한 내비게이션용 틀입니다. 매개변수 '왼쪽'과 '오른쪽'에 입력된 값에 자동으로 링크가 걸립니다.

서식

{{좌우이동
|왼쪽=
|왼쪽축약=
|오른쪽=
|오른쪽축약=
|가운데=
}}

예시

{{좌우이동|왼쪽=1|오른쪽=3}}

왼쪽과 오른쪽에는 문서명을 적으면 자동으로 링크가 걸립니다.

{{좌우이동|왼쪽=1}}

⇦

1

한 쪽에만 링크를 걸 수도 있습니다.

{{좌우이동|왼쪽=1|오른쪽=3|가운데=가운데에 텍스트를 집어넣을 수 있습니다.}}

⇦

1

가운데에 텍스트를 집어넣을 수 있습니다.

⇨

3

가운데에는 텍스트로만 출력됩니다. []나 [[]]를 사용하여 링크를 걸 수 있습니다.

{{좌우이동|왼쪽=1|왼쪽축약=2|오른쪽=3|오른쪽축약=4|가운데=가운데에 텍스트를 집어넣을 수 있습니다.}}

⇦

2

가운데에 텍스트를 집어넣을 수 있습니다.

⇨

4

문서명이 길 경우 축약하여 표시할 수 있습니다.

주의사항

{{좌우이동|왼쪽=1|왼쪽축약=|오른쪽=3|오른쪽축약=|가운데=가운데에 텍스트를 집어넣을 수 있습니다.}}

⇦

1

가운데에 텍스트를 집어넣을 수 있습니다.

⇨

3

축약 변수를 적어놓고 등호 우측을 빈 칸으로 두면 좌우이동 링크가 빈 텍스트로가 되버리니 주의하시기 바랍니다.

파일:스크린샷 2015-11-12 오후 8.10.49.png

텍스트가 너무 길어지면 틀이 깨집니다. 특히 사진처럼 모바일 환경^[1]에서 특히 심하게 깨지므로, 문서명이 길 경우 왼쪽축약/오른쪽축약을 반드시 사용하여 주시기 바랍니다.

각주

↑ 스크린샷은 아이폰 6, 사파리 8.1 환경

위 설명은 틀:좌우/설명문서의 내용을 가져와 보여주고 있습니다.

연습장이나 사용자 문서에서 틀의 사용이나 수정을 연습할 수 있습니다.

분류는 /설명문서에 넣어주세요. 이 틀의 하위문서.

[1] 스크린샷은 아이폰 6, 사파리 8.1 환경

[1]

@@ 1번째 줄: / 1번째 줄: @@
-<onlyinclude><includeonly>{{#css:
+<onlyinclude><includeonly>{{#tag:templatestyles||src=좌우/styles.css}}<div class="pre_after" style="background: #fff0; color: currentcolor;">{{#if:{{{1|{{{왼쪽|}}}}}}|<div class="tp_link" style="background: {{Skin|1}}; color:#fff;">{{#switch:{{{왼쪽링크해제|}}}
-.prev_next {
-	display: flex; width: 100%; border-radius: 0.2em; margin-bottom: 2px; text-align: center;
-}
-.prev_next .tp_link a {
-	display: block;
-	text-decoration: none !important;
-	padding: 0.1em 0.5em 0;
-	height: 100%;
-}
-.prev_next .tp_link {
-	transition: filter ease 0.2s;
-	width: 18em;
-	min-width: 4em;
-}
-.prev_next  > div {
-	display: table-cell;
-}
-.prev_next .arrow, .prev_next .arrow + span {
-    position: relative;
-    top: 50%;
-    transform: translateY(-54%);
-    padding-top: 0px;
-}
-.prev_next .arrow {
-	font-family: 'Font Awesome 5 Free'; font-size: large;
-	 font-weight: 700;
-	padding-top: 1px;
-}
-.prev_next .center {
-	width: 100%;
-	font-weight: 700;
-	margin: unset !important;
-	display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-}
-.prev_next .tp_link:hover {
-	filter: brightness(0.9);
-}
-}}<div class="prev_next" style="background: #fff0; color: currentcolor;">{{#if:{{{1|{{{왼쪽|}}}}}}|<div class="tp_link" style="background: {{Skin|1}}; color:#fff;">{{#switch:{{{왼쪽링크해제|}}}
 |yes|y|ok = {{{1|{{{왼쪽|}}}}}}
 |#default = [[{{{1|{{{왼쪽|}}}}}}|<div class="arrow" style="float: left; padding-right: 0.2em;">⇦</div><span style="display:block;">{{#if:{{{왼쪽축약|}}}|{{{왼쪽축약|}}}|{{{1|{{{왼쪽|}}}}}}}}]]}}</span></div>}}<div class="center" style="color: currentcolor; border-width: 2px 0 2px 0; border-style: solid; border-color: {{Skin|1}};{{#if:{{{2|{{{가운데|}}}}}}||background: {{Skin|1}};}}"><div>{{{2|{{{가운데|　}}}}}}</div></div>{{#if:{{{3|{{{오른쪽|}}}}}}|<div class="tp_link" style="background: {{Skin|1}};color:#fff;">{{#switch:{{{오른쪽링크해제|}}}