(새 문서: <onlyinclude><includeonly><hr style="margin-top: {{#ifeq:{{{1|}}}|none|1rem|{{{1|.3rem}}}}}; margin-bottom: {{#ifeq:{{{1|}}}|none|1rem|{{{1|.3rem}}}}}; border-top: 1px solid {{#switch:{{{color|}}}|namu = var(--namu--horizentalline)|wikidok = #bfbfbf|{{color-var|{{{color|var(--namu--horizentalline)}}}}}}};"></includeonly></onlyinclude> {|{{style|class=wiki}} |- !기본 가로줄 !틀 사용 |- |이 아래에 가로줄이 있습니다.<hr>이 위에 가로줄이 있습니다. |이...) |
(차이 없음)
|
2025년 7월 3일 (목) 18:23 기준 최신판
| 기본 가로줄 | 틀 사용 |
|---|---|
| 이 아래에 가로줄이 있습니다. 이 위에 가로줄이 있습니다. |
이 아래에 가로줄이 있습니다. 이 위에 가로줄이 있습니다. |
| 틀 사용 | 테이블과 비교 |
|---|---|
| 이 아래에 가로줄이 있습니다. 이 위에 가로줄이 있습니다. |
이 아래에 테이블이 있습니다. |
| 이 위에 테이블이 있습니다. |
<hr>이나 ---- 등으로 순수하게 삽입한 가로줄은 기본적인 텍스트 한 줄보다 상하 높이가 조금 더 깁니다. 따라서 이를 div로 묶은 후 여백을 조절하여 텍스트와 딱 맞는 가로줄로 만듭니다.
문법 자체는 복잡한 편이 아니기 때문에 따로 틀을 만들 필요성은 없어 보이지만, 인용문 등 틀 안에서 div 태그를 사용하면 내용이 제대로 표시되지 않는 현상이 있습니다. 이 틀은 틀 안에서 딱 맞는 가로줄을 사용하기 위해 만들어졌습니다.
기본적으로는 제이위키에 기본값으로 적용된 상하 margin인 1rem을 .3rem으로 바꾸지만,{{#css: .mw-parser-output {
counter-reset: number 0;
}
.tooltip-template-trigger {
cursor: pointer;
color: var(namuhyperlink);
user-select: none;
}
.tooltip-template-trigger-numbering-bracket::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\005B' counter(number) '\005D';
}
.tooltip-template-trigger-numbering-number::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: counter(number);
}
.tooltip-template-trigger-numbering-parentheses::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\0028' counter(number) '\0029';
}
.tooltip-template-trigger-2 {
cursor: pointer;
color: inherit;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid var(namucite--border);
background: var(namucite--background);
color: var(namutext);
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
}
.tooltip-template-trigger:hover, .tooltip-template-trigger-numbering-bracket:hover, .tooltip-template-trigger-numbering-number:hover, .tooltip-template-trigger-numbering-parentheses:hover {
text-decoration: underline;
}
.tooltip-template-trigger:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template:hover {
display: block;
}
}}.3rem은 테이블 셀이 기본값으로 갖는 상하 padding 값입니다. 첫 번째 변수에 none을 입력할 시 margin 값이 원래대로 1rem이 됩니다. 틀로 높이를 조정한 가로줄이 아닌 기본 가로줄을 사용하면서 color 변수를 쉽게 사용하고 싶을 때 사용합니다.
color라는 변수로 색을 변경할 수도 있습니다. 여기에 namu를 입력하면 나무위키 가로줄 색인 #ccc가, wikidok을 입력하면 위키독 가로줄 색인 #bfbfbf가 적용됩니다.