| r951 | ||
|---|---|---|
| r951 | 1 | [include(틀:상위 문서, top1=나무위키:문법 도움말)] |
| 2 | [include(틀:나무위키)] | |
| 3 | [include(틀:나무위키 도움말)] | |
| r950 (r945으로 되돌림) | 4 | |
| r951 | 5 | [목차] |
| 6 | == 개요 == | |
| 7 | [[나무위키]]의 문법 중 응용 문법, 특수한 상황에 적용되는 문법, 난도가 높은 문법들을 설명합니다. 편집에 필수적으로 필요한 기본 문법들은 [[나무위키:문법 도움말|상위 문서]]에 안내되어 있으니 심화 문법을 보기 전에 기초 내용을 먼저 숙지하시는 것을 권장합니다. | |
| 8 | ||
| 9 | {{{#red '''주의!'''}}} 일부 문법의 경우 모바일에서 복사 붙여넣기를 할 시 '''정상적으로 작동하지 않을 수 있습니다.''' | |
| 10 | ||
| 11 | == 'wiki style, dark-style' 문법을 이용하는 응용 텍스트 문법 == | |
| 12 | *'''관련 기초 문법''': [[나무위키:문법 도움말#텍스트|텍스트 기초 문법]] ([[나무위키:문법 도움말#텍스트 형태|형태]]·[[나무위키:문법 도움말#텍스트 크기|크기]]·[[나무위키:문법 도움말#텍스트 색상|색상]]) | |
| 13 | ||
| 14 | [[HTML]]의 여러 태그 중 <div>의 경우만 유일하게 div 내 나무마크 내 적용이 가능합니다. 기본 형식은 아래와 같으며 style="속성 목록" 다음에 '''줄바꿈을 생략하면 정상적으로 출력되지 않습니다.''' | |
| 15 | {{{{{{#!wiki style="속성 목록" dark-style="다크모드 전용 속성" | |
| 16 | 속성이 적용된 텍스트}}}}}} | |
| 17 | {{{속성 목록}}} 부분은 "{{{속성명1: 적용사항1; 속성명2: 적용사항2;}}}" 와 같은 방식으로 구성되며, 각 속성의 항목은 [[세미콜론]]({{{;}}})으로 끝납니다. 즉, 여러 속성끼리는 {{{;}}} 문자로 구분합니다. 자세한 내용에 대해서는 [[CSS]] 문서의 [[CSS#문법|문법]] 문단을 참고하시기 바랍니다. | |
| 18 | ||
| 19 | [[나무위키:테마|다크모드]] 전용 속성인 dark-style인 경우 기존 속성 목록도 그대로 적용되고 다크모드 모드인 경우 추가적으로 해당 속성이 적용됩니다. 기존 style 속성이랑 겹치는 경우 다크모드 속성이 우선시됩니다. 토론에서는 적용되지 않습니다. | |
| 20 | ||
| 21 | 본 문단의 하위 항목인 '텍스트 정렬 및 자간 조절', '줄바꿈 기준 설정', '텍스트 및 셀 배경의 그라데이션 효과' 뿐 아니라, 후술되는 '이미지/동영상 삽입 관련 고급 문법', '인용문 정렬 문법', '접기 시 미관 개선용 문법'은 이처럼 HTML의 div 태그에 존재하는 다양한 속성을 나무마크에 호환시킨 후 나무위키의 필요성에 맞게 활용한 예시들입니다. | |
| 22 | ||
| 23 | {{{#red '''주의'''}}}: <div> 태그 내에 나무마크를 적용하기 위해 분리하여 사용했던 이전 방식인 "{{{{{{#!html <div style="속성 목록">}}} 속성이 적용된 텍스트 {{{#!html </div>}}}}}}" 방식의 문법은 더 이상 사용할 수 없습니다. | |
| 24 | ||
| 25 | {{{#red '''주의'''}}}: <div> 태그를 제외한 HTML의 다른 모든 태그, 특히 <span> 태그를 사용하는 문법은 정식 문법이 아니며 가능한 한 사용을 자제할 것이 요구됩니다. {{{{{{#!wiki style= ...}}}}}}로 시작하지 않고, {{{{{{#!html ...}}}}}}로 시작하는 모든 문법은 모두 비권장이라 보시면 됩니다. 이에 관해서는 [[#html|별도 문단]]에서 설명합니다. | |
| 26 | ||
| 27 | {{{#red '''주의'''}}}: 모든 CSS 속성들이 사용 가능한 것은 아닙니다. 일부 CSS 속성 및 함수의 경우 보안 등의 문제로 인해 지원하지 않으며, 사용하려고 해도 속성이 적용되지 않습니다. 이에 대해서는 CSS 문서 내 [[CSS#s-4.2.1|나무위키에서 사용 가능한 속성]] 문단을 참고하시기 바랍니다. | |
| 28 | ||
| 29 | === 텍스트 정렬 === | |
| 30 | 텍스트를 정렬할 수 있으며 형태, 크기, 색상과 병용할 수 있습니다. 기본값은 좌측 정렬입니다. | |
| 31 | ||
| 32 | {{{{{{#!wiki style="text-align: center;" | |
| 33 | 중앙}}}}}} | |
| 34 | ||<tablewidth=100%><bgcolor=#fff,#191919> {{{#!wiki style="text-align: center;" | |
| 35 | ↓}}}{{{#!wiki style="text-align:center" | |
| 36 | 중앙}}} || | |
| 37 | ---- | |
| 38 | {{{{{{#!wiki style="text-align: left;" | |
| 39 | 좌측}}}}}} | |
| 40 | ||<tablewidth=100%><bgcolor=#fff,#191919> {{{#!wiki style="text-align: left;" | |
| 41 | ↓}}}{{{#!wiki style="text-align:left" | |
| 42 | 좌측}}} || | |
| 43 | ---- | |
| 44 | {{{{{{#!wiki style="text-align: right;" | |
| 45 | 우측}}}}}} | |
| 46 | ||<tablewidth=100%><bgcolor=#fff,#191919> {{{#!wiki style="text-align: right;" | |
| 47 | ↓}}}{{{#!wiki style="text-align:right" | |
| 48 | 우측}}} || | |
| 49 | ||
| 50 | === 텍스트 자간 조절 === | |
| 51 | {{{{{{#!wiki style="letter-spacing: 값px;" | |
| 52 | 텍스트}}}}}} | |
| 53 | 텍스트의 [[자간]]을 조절하여 공간을 절약하거나 가독성을 향상시킬 수 있습니다. 기본값은 0px입니다. | |
| 54 | ||
| 55 | [[템플릿]], [[틀]], [[표(자료)|테이블(표)]] 등에서 미관상의 목적으로만 사용하여 주십시오. | |
| 56 | {{{#!wiki style="word-break: keep-all" | |
| 57 | ||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 || 출력 || | |
| 58 | ||{{{{{{#!wiki style="letter-spacing: 1.5px;" | |
| 59 | 텍스트의 자간이 1.5px입니다.}}}}}} | |
| 60 | ||{{{#!wiki style="letter-spacing: 1.5px;" | |
| 61 | 텍스트의 자간이 1.5px입니다.}}} | |
| 62 | || | |
| 63 | ||{{{{{{#!wiki style="letter-spacing: 1px;" | |
| 64 | 텍스트의 자간이 1px입니다.}}}}}} | |
| 65 | ||{{{#!wiki style="letter-spacing: 1px;" | |
| 66 | 텍스트의 자간이 1px입니다.}}} | |
| 67 | || | |
| 68 | ||{{{{{{#!wiki style="letter-spacing: 0.5px;" | |
| 69 | 텍스트의 자간이 0.5px입니다.}}}}}} | |
| 70 | ||{{{#!wiki style="letter-spacing: 0.5px;" | |
| 71 | 텍스트의 자간이 0.5px입니다.}}} | |
| 72 | || | |
| 73 | ||{{{{{{#!wiki style="letter-spacing: 0px;" | |
| 74 | 텍스트의 자간이 기본값입니다.}}}}}} | |
| 75 | ||{{{#!wiki style="letter-spacing: 0px;" | |
| 76 | 텍스트의 자간이 기본값입니다.}}} | |
| 77 | || | |
| 78 | ||{{{{{{#!wiki style="letter-spacing: -0.5px;" | |
| 79 | 텍스트의 자간이 -0.5px입니다.}}}}}} | |
| 80 | ||{{{#!wiki style="letter-spacing: -0.5px;" | |
| 81 | 텍스트의 자간이 -0.5px입니다.}}} | |
| 82 | || | |
| 83 | ||{{{{{{#!wiki style="letter-spacing: -1px;" | |
| 84 | 텍스트의 자간이 -1px입니다.}}}}}} | |
| 85 | ||{{{#!wiki style="letter-spacing: -1px;" | |
| 86 | 텍스트의 자간이 -1px입니다.}}} | |
| 87 | || | |
| 88 | ||{{{{{{#!wiki style="letter-spacing: -1.5px;" | |
| 89 | 텍스트의 자간이 -1.5px입니다.}}}}}} | |
| 90 | ||{{{#!wiki style="letter-spacing: -1.5px;" | |
| 91 | 텍스트의 자간이 -1.5px입니다.}}} | |
| 92 | ||}}} | |
| 93 | ||
| 94 | === 줄바꿈 기준 설정[anchor(줄바꿈 기준 설정)] === | |
| 95 | 틀, 표, 인용문 박스 등 특정 영역의 가장자리에서 텍스트가 줄바꿈 될 때의 기준을 다음 문법을 통해 설정하여 가독성을 향상시킬 수 있습니다. | |
| 96 | {{{{{{#!wiki style="word-break: (조건값);" | |
| 97 | (텍스트)}}}}}} | |
| 98 | 줄바꿈 조건값으로 입력할 수 있는 값에는 다음이 있습니다. | |
| 99 | * {{{normal}}}: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''[[라틴 문자]](로마자)의 단어 단위''' 줄바꿈 | |
| 100 | * {{{keep-all}}}: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''모든 문자(한글 포함)의 단어 단위''' 줄바꿈 | |
| 101 | * {{{break-all}}}: '''글자 단위''' 줄바꿈 : wiki style 말고도 <(col | row | (없음))[[keepall]]>로도 사용 가능합니다. | |
| 102 | ||
| 103 | {{{#green '''참고'''}}}: 이 문법을 따로 사용하지 않았을 경우의 나무위키 기본값은 글자 단위 줄바꿈({{{break-all}}}) 입니다. | |
| 104 | ||
| 105 | 이 문법을 사용하여 해당 영역에서 전체적으로 단어 단위로 줄바꿈을 적용할 시, 예외적으로 일부 단어에 대해서만 단어 내 특정한 위치에서 줄바꿈을 적용하려면 그 위치에 [[공백#s-2.3|폭 없는 공백(Zero Width Space, U+200B)]]을 삽입하면 됩니다. 폭 없는 공백은 그냥 복사해서 붙여넣으면 나중에 RAW에서 찾기 어려워지니 {{{{{{#!html ​}}}}}} 또는 {{{{{{#!html ​}}}}}}과 같이 HTML을 사용한 방법이 좋습니다. | |
| 106 | ||
| 107 | {{{#green '''참고'''}}}: 해당 문법을 둘러보기 틀에 적용할 경우 [ 펼치기 · 접기 ]의 margin 문법 옆에 위치시킵니다.[* {{{|| {{{#!wiki style="margin:0 -10px -5px; min-height:calc(1.5em + 5px)" | |
| 108 | {{{#!folding [ 펼치기 · 접기 ] | |
| 109 | {{{#!wiki style="margin:-5px -1px -11px; word-break: keep-all" | |
| 110 | ||내용||}}}}}}}}} ||}}}] word-break를 틀 시작 부분에 위치시킬 경우 틀 하단에 불필요한 개행이 발생해 미관상 좋지 않습니다. | |
| 111 | ---- | |
| 112 | ||
| 113 | 다음은 예시입니다. | |
| 114 | ||
| 115 | ||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: break-all}}} 사용 (나무위키 기본값, 글자 단위로 줄바꿈)'''|| | |
| 116 | ||{{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}|| | |
| 117 | ||
| 118 | ||Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. || | |
| 119 | ---- | |
| 120 | ||
| 121 | ||<bgcolor=#fc6><rowcolor=#000><tablewidth=100%>'''{{{word-break: normal}}} 사용 (라틴 문자 단어 단위로 줄바꿈)'''|| | |
| 122 | ||\{{{{{{#!wiki style="word-break: normal"}}} | |
| 123 | {{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}}}}|| | |
| 124 | ||
| 125 | {{{#!wiki style="word-break: normal" | |
| 126 | || Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}} | |
| 127 | ---- | |
| 128 | ||
| 129 | ||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: keep-all}}} 사용 (한글을 포함한 모든 문자의 단어 단위로 줄바꿈)'''|| | |
| 130 | ||\{{{{{{#!wiki style="word-break: keep-all"}}} | |
| 131 | {{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}}}}|| | |
| 132 | ||
| 133 | {{{#!wiki style="word-break: keep-all" | |
| 134 | || Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}} | |
| 135 | ||
| 136 | === [anchor(그라데이션)]텍스트 및 셀 배경의 그라데이션 효과 === | |
| 137 | {{{{{{#!wiki style="background: linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)" | |
| 138 | }}}}}} | |
| 139 | 이 문법은 글자의 배경에 [[그라데이션]]을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) {{{<헥스 코드 1, 2>}}} 자리에 자신이 넣고 싶은 여섯 자리의 [[헥스 코드]]들을 찾아서 입력해 주세요. | |
| 140 | ||
| 141 | 그라데이션의 여백을 조절하고 싶다면 위 문법에 {{{margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요. | |
| 142 | ||
| 143 | 그라데이션의 크기를 조절하고 싶다면 위 문법에 {{{padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요. | |
| 144 | ||
| 145 | 그라데이션의 방향을 설정하고 싶다면 {{{<to 방향>}}} 자리에 {{{to left}}}, {{{to right}}}, {{{to top}}}, {{{to bottom}}} 중에서 하나를 입력해 주세요. | |
| 146 | * 왼쪽에서 오른쪽: {{{to right}}} | |
| 147 | * 오른쪽에서 왼쪽: {{{to left}}} | |
| 148 | * 위에서 아래: {{{to bottom}}} | |
| 149 | * 아래에서 위: {{{to top}}} | |
| 150 | * 북동쪽 방향 대각선: {{{to top right}}} 또는 {{{to right top}}} | |
| 151 | * 동남쪽 방향 대각선: {{{to bottom right}}} 또는 {{{to right bottom}}} | |
| 152 | * 남서쪽 방향 대각선: {{{to bottom left}}} 또는 {{{to left bottom}}} | |
| 153 | * 북서쪽 방향 대각선: {{{to top left}}} 또는 {{{to left top}}} | |
| 154 | ||
| 155 | 그라데이션의 각도를 세세하게 조절하고 싶다면 {{{<to 방향>}}} 대신 육십분법으로 {{{<숫자deg>}}}나 호도법으로 {{{<숫자rad>}}} 문법을 사용해 보세요. {{{숫자}}} 안의 각도를 소수점 아래로 미세한 조정이 가능합니다. 아래는 예시입니다. | |
| 156 | * 북쪽 방향: {{{0deg}}} | |
| 157 | * 북동쪽 방향: {{{45deg}}} | |
| 158 | * 동쪽 방향: {{{90deg}}} | |
| 159 | * 남동쪽 방향: {{{135deg}}} | |
| 160 | * 남쪽 방향: {{{180deg}}} | |
| 161 | * 남서쪽 방향: {{{225deg}}} | |
| 162 | * 서쪽 방향: {{{270deg}}} | |
| 163 | * 북서쪽 방향: {{{315deg}}} | |
| 164 | ||
| 165 | 상기의 문법을 동시에 사용한 예시입니다. | |
| 166 | {{{{{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #FFB9B9, #FFFDBB)" | |
| 167 | 그라데이션 기능입니다}}}}}} | |
| 168 | {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background: linear-gradient(to right, #FFB9B9, #FFFDBB)" | |
| 169 | {{{#000 그라데이션 기능입니다}}}}}} | |
| 170 | ||
| 171 | 또다른 예시입니다. | |
| 172 | ||
| 173 | {{{{{{#!wiki style="padding: 5px 10px; background: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)" | |
| 174 | 그라데이션 기능입니다 | |
| 175 | ||
| 176 | 무지개색 총공격이다!}}}}}} | |
| 177 | {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)" | |
| 178 | {{{#000 그라데이션 기능입니다 | |
| 179 | ||
| 180 | 무지개색 총공격이다!}}}}}} | |
| 181 | ||
| 182 | [anchor(tablegra)] | |
| 183 | 표 문법 안에 넣어서 활용하는 방법도 있습니다. | |
| 184 | ||
| 185 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #00A495, #13AD65)" | |
| 186 | {{{#FFFFFF '''나무위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||}}} | |
| 187 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #00A495, #13AD65)" | |
| 188 | {{{#FFFFFF '''나무위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} || | |
| 189 | ||
| 190 | 헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다. | |
| 191 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" | |
| 192 | {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} | |
| 193 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" | |
| 194 | {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || | |
| 195 | ||
| 196 | 다크모드 대응 시, 이미 입력된 위키스타일의 그라데이션 문법 뒤에 dark-style="(위키스타일 다음에 나오는 두 큰따옴표 사이 내용)"을 입력하면 됩니다. 예시는 다음과 같습니다. 설정을 통하여 다크모드를 적응하면 위의 예시와 다르게 보입니다. | |
| 197 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" dark-style="margin: -5px -10px; padding: 5px 10px; background: linear-gradient(to right, #1f2024, #1f2024, #1f2024, #1f2024, #1f2024, #630BCD, #630BCD, #B2112B)" | |
| 198 | {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || | |
| 199 | ||
| 200 | 헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다. | |
| 201 | * {{{linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"}}} | |
| 202 | #AFEEEE로 시작하고, 왼쪽에서 65% 지점 이후부터 #4682B4로 전환되기 시작한 후, 왼쪽에서 80% 지점부터 순수한 #4682B4로 완전히 전환되어 종료되는 그라데이션 | |
| 203 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)" | |
| 204 | {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} | |
| 205 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)" | |
| 206 | {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || | |
| 207 | ||
| 208 | * {{{linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"}}} | |
| 209 | #AFEEEE로 시작하고, 왼쪽에서 60% 지점부터 순수한 #4682B4로 완전히 전환된 후, #C0D84D로 종료되는 그라데이션 | |
| 210 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)" | |
| 211 | {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} | |
| 212 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)" | |
| 213 | {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || | |
| 214 | ||
| 215 | 오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다. | |
| 216 | * {{{linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)}}} | |
| 217 | * {{{linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)}}} | |
| 218 | * {{{linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)}}} | |
| 219 | * {{{linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)}}} | |
| 220 | ||<width=300px><nopad> {{{#!wiki style="padding:5px; background: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)" | |
| 221 | {{{#C9151E '''30%'''}}}}}}|| | |
| 222 | ||<nopad> {{{#!wiki style="padding:5px; background: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)" | |
| 223 | {{{#C9151E '''58%'''}}}}}}|| | |
| 224 | ||<nopad> {{{#!wiki style="padding:5px; background: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)" | |
| 225 | {{{#C9151E '''70%'''}}}}}}|| | |
| 226 | ||<nopad> {{{#!wiki style="padding:5px; background: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)" | |
| 227 | {{{#C9151E '''70%'''}}}}}}|| | |
| 228 | ||
| 229 | 서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)를 중첩으로 사용해 만들 수 있습니다. | |
| 230 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)" | |
| 231 | {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}} | |
| 232 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)" | |
| 233 | {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} || | |
| 234 | 퍼센테이지를 적용할 수 도 있습니다. | |
| 235 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33%, #f67280 66%, #f64d5f 66%)" | |
| 236 | {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}} | |
| 237 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33%, #f67280 66%, #f64d5f 66%)" | |
| 238 | {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} || | |
| 239 | ||
| 240 | 반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다. | |
| 241 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)" | |
| 242 | {{{#0e284c '''반복 그라데이션'''}}}}}} ||}}} | |
| 243 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)" | |
| 244 | {{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 5%, #1f719a 9%, #2abdc3 9%, #2abdc3 13%, #fff6ee 13%, #fff6ee 17%)" | |
| 245 | {{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 2%, #1f719a 4%, #2abdc3 4%, #2abdc3 6%, #fff6ee 6%, #fff6ee 8%)" | |
| 246 | {{{#0e284c '''반복 그라데이션'''}}}}}} || | |
| 247 | ||
| 248 | {{{rgba(R, G, B, A)}}} 등 투명도를 지정하면 그라데이션끼리 중첩도 가능합니다. | |
| 249 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 6px 0; background-color: hsl(34, 53%, 82%); background: linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px );" | |
| 250 | 투명도 그라데이션}}} || | |
| r950 (r945으로 되돌림) | 251 | }}} |
| r951 | 252 | ||<width=300px><nopad> {{{#!wiki style="padding: 6px 0; background-color: hsl(34, 53%, 82%); background: linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px );" |
| 253 | {{{#666 '''투명도 그라데이션'''}}}}}} || | |
| 254 | 원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다. | |
| 255 | {{{{{{#!wiki style="background: radial-gradient(circle at (위치)% (높이)%, #<헥스 코드 1>, #<헥스 코드 2>)"}}} | |
| 256 | }}} | |
| 257 | * 위치: 0%일시 원의 중심이 최좌측, 100%일시 원의 중심이 최우측 | |
| 258 | * 높이: 0%일시 원의 중심이 최상단, 100%일시 원의 중심이 최하단 | |
| 259 | 예시 | |
| 260 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 50%, #000 50%, #808080 50%)" | |
| 261 | [br]'''{{{#fff 위치 50%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 0% 50%, #000 50%, #808080 50%)" | |
| 262 | [br]'''{{{#fff 위치 0%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 50%, #808080 50%)" | |
| 263 | [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 50%}}}'''[br][br]}}} || | |
| 264 | 마찬가지로 위의 linear-gradient와 혼용하여 사용가능합니다. | |
| 265 | {{{||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)" | |
| 266 | [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} || | |
| 267 | }}} | |
| 268 | ||<width=300px><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)" | |
| 269 | [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} || | |
| r950 (r945으로 되돌림) | 270 | |
| r951 | 271 | 코닉(극좌표) 그라데이션을 사용하면 파이 모양 그래프를 만들 수 있습니다. |
| 272 | * {{{conic-gradient(gray 70%, transparent 0)}}} | |
| 273 | * {{{conic-gradient(gray 30%, transparent 0)}}} | |
| 274 | ||
| 275 | {{{#!wiki style="display: inline-block;" | |
| 276 | {{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 70%, transparent 0);" | |
| 277 | {{{+1 70%}}}}}}}}} {{{#!wiki style="display: inline-block;" | |
| 278 | {{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 30%, transparent 0);" | |
| 279 | {{{+1 30%}}}}}}}}} | |
| 280 | ||
| 281 | 텍스트 자체에 그라데이션을 넣을 수도 있습니다. 그라데이션에는 위의 여러 그라데이션들을 사용할 수 있습니다. | |
| 282 | {{{{{{#!wiki style="display: inline; color: transparent; background: text linear-gradient(to right, #e96443, #904e95);" | |
| 283 | '''텍스트 그라데이션입니다'''}}}}}} {{{#!wiki style="display: inline; color: transparent; background: text linear-gradient(to right, #e96443, #904e95);" | |
| 284 | '''텍스트 그라데이션입니다'''}}} | |
| 285 | === 글꼴 적용 === | |
| 286 | {{{{{{#!wiki style="font-family: serif" | |
| 287 | 나무위키}}}}}}{{{#!wiki style="font-family: serif" | |
| 288 | 나무위키}}} | |
| 289 | * font-family: 글꼴 | |
| 290 | 위 속성을 사용해 텍스트에 글꼴을 적용시킬 수 있습니다. | |
| 291 | '''{{{#red 주의}}}''': 기기에 따라 글꼴이 적용되지 않은 채로 나타날 수 있습니다. 특히 모바일에서 이런 문제가 다수 나타납니다. | |
| 292 | ||
| 293 | 위키 스타일 문법의 특성상 개행이 필수적이기에 개행할 수 없는 문법(문단 문법 등.) 내에 글꼴을 적용할 때에는 불가피하게 HTML 문법을 사용하여야만 합니다.[* {{{{{{#!html <span style="font-family: 글꼴">텍스트</span>}}}}}}. 당연히 문법 내에 서식을 적용하시려면 HTML 태그를 사용하여야 합니다.] | |
| 294 | ||
| 295 | == 하이퍼링크 == | |
| 296 | *'''관련 기초 문법''': [[나무위키:문법 도움말#하이퍼링크|하이퍼링크 기초 문법]] | |
| 297 | ||
| 298 | === [anchor(앵커)]앵커(anchor) === | |
| 299 | [anchor(앵커 리다이렉트)]{{{[anchor()]}}}문법을 사용하면 현재 문서 또는 다른 문서의 임의의 위치로 하이퍼링크를 걸 수 있습니다. | |
| 300 | ||
| 301 | 우선, 먼저 해야 할 일은 링크를 걸어 이동시키고자 하는 현재 문서 또는 다른 문서의 특정 위치(도착점)에 앵커를 삽입하는 것입니다. 링크를 보내고자 하는 곳에 아래와 같이 앵커를 넣어줍니다. | |
| 302 | [anchor(아무개)] 예시) {{{[anchor(아무개)]}}} | |
| 303 | ||
| 304 | 그 다음 링크를 걸 곳(출발점)에는 아래와 같은 방법으로 링크를 만들어주시면 됩니다. 문단 링크 문법과는 #뒤에 's-문단명' 대신 앵커 이름이 온다는 점만 다릅니다. | |
| 305 | ||<rowbgcolor=#fc6><rowcolor=#000> 사용법 || 출력 || 설명 || | |
| 306 | ||{{{[[나무위키:문법 도움말/심화#아무개]]}}}||[[나무위키:문법 도움말/심화#아무개]]||<|2>특정 문서의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.|| | |
| 307 | ||{{{[[나무위키:문법 도움말/심화#아무개|나무위키:문법 도움말/심화#아무개]]}}}||[[나무위키:문법 도움말/심화#아무개|나무위키:문법 도움말/심화#아무개]]|| | |
| 308 | ||{{{[[#아무개]]}}}||[[#아무개]]||같은 문서 내의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.|| | |
| 309 | ||{{{[[나무위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]}}}||[[나무위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]||<|2>링크와 출력이 서로 다른 앵커 문법입니다.|| | |
| 310 | ||{{{[[#아무개|나아가 같은 문서로도요.]]}}}||[[#아무개|나아가 같은 문서로도요.]]|| | |
| 311 | ||
| 312 | 한편, 특정한 위치에 자동으로 생성되는 앵커도 있습니다. | |
| 313 | * 모든 목차에는 'toc'이라는 앵커가 있습니다. {{{[[문서명#toc]]}}}을 사용하면 '''해당 문서의 목차'''로 이동하는 링크가 생깁니다. 예시) [[나무위키:문법 도움말/심화#toc|나무위키:문법 도움말/심화#toc]] | |
| 314 | * 모든 문단에는 s-문단번호 앵커와 문단이름 앵커가 있습니다. {{{[[문서명#s-n]]}}}을 사용하면 '''해당 문서의 n번째 문단'''으로 이동하는 링크가 생깁니다. 또한 {{{[[문서명#문단 이름]]}}}을 사용하면 '''해당 문서의 해당 문단'''으로 이동하는 링크가 생깁니다. 문단을 추가하거나 삭제하면 문단번호가 변화하니 문단번호 앵커는 쉽게 변할 수 있습니다. 그러나 문단이름은 변하는 경우가 상대적으로 적어 더 안정적입니다. 물론 문단이름도 변할 수 있어서 완전한 것은 아닙니다. 문단 이름과 문단 문법(=) 사이에 띄어쓰기가 2개 이상 있을 경우 그 띄어쓰기까지 문단이름으로 포함시켜야 합니다.[* 읽기 모드에서 텍스트 중 2개 이상의 띄어쓰기는 출력되지 않으니 해당 문서의 해당 문단명에서 띄어쓰기를 수정하는 방법을 권장합니다.] 예시) [[나무위키:문법 도움말/심화#s-1|나무위키:문법 도움말/심화#s-1]], [[나무위키:문법 도움말/심화#개요|나무위키:문법 도움말/심화#개요]] | |
| 315 | * 모든 각주에는 fn-각주번호 또는 fn-각주이름 앵커가 있습니다. {{{[[문서명#fn-n]]}}}을 사용하면 '''해당 문서의 n번째 각주'''로 이동하는 링크가 생기고, {{{[[문서명#fn-A]]}}}을 사용하면 해당 문서의 A라는 각주로 이동하는 링크가 생깁니다. 예시) [[나무위키:문법 도움말/심화#fn-1|나무위키:문법 도움말/심화#fn-1]], [[나무위키:문법 도움말/심화#fn-A|나무위키:문법 도움말/심화#fn-A]] | |
| 316 | * 모든 각주가 삽입된 본문에는 rfn-각주번호 앵커가 있습니다. {{{[[문서명#rfn-n]]}}}을 사용하면 '''해당 문서의 n번째 각주가 삽입된 곳'''으로 이동하는 링크가 생깁니다. 여기에는 각주번호가 아닌 각주이름은 사용할 수 없습니다. 예시) [[나무위키:문법 도움말/심화#rfn-1|나무위키:문법 도움말/심화#rfn-1]], [[나무위키:문법 도움말/심화#rfn-2|나무위키:문법 도움말/심화#rfn-2]] | |
| 317 | * 분류 문서의 속한 문서 목록에는 category-'이름공간' 앵커가 있습니다. 하위 분류에는 category-분류 앵커가 있습니다. | |
| 318 | ||
| 319 | 단, 나무위키 [[스킨 설정]]에서 '고정형 내비게이션 바'를 사용하는 경우 해당 기능 특성상 앵커 이동 위치의 내용이 가려지는 현상이 발생합니다. | |
| 320 | [*A 각주이름 앵커] | |
| 321 | ||
| 322 | 같은 이름을 가진 문단이 2개 이상 있을시, 앵커가 적용되지 않으니 #s-문단번호 방식으로 링크해야합니다. | |
| 323 | ||
| 324 | 접기 문법 안에 있는 도착점 앵커는 작동하지 않을 수 있으니 접기 문법 밖에 도착점 앵커를 만드시기 바랍니다. | |
| 325 | ||
| 326 | === [anchor(하이퍼링크 시 주의)] 제목에 |, {{{\}}}, #가 쓰이거나 ]로 끝나거나 /로 시작하는 문서로 하이퍼링크 걸기 === | |
| 327 | 기술적인 문제로 일반적인 하이퍼링크 문법으로는 해당 문서로 통하는 정상적인 하이퍼링크를 만들 수 없습니다. 이럴 때는 해당 문자 앞에 [[\\]](백슬래시)를 넣어 줘야 합니다. 단, 한글 윈도우에서는 백슬래시 기호가 원화 기호로 보인다는 점을 기억하세요. #나 맨 끝의 ]가 제목에 들어간 문서에 한해서 맨 끝에 #를 넣어 줘도 됩니다. | |
| 328 | ||
| 329 | 다른 편집자를 위해서 [[틀:링크시 주의]]를 달아 줘도 됩니다. 해당 틀을 작성할 때 위키 문법상 \\를 2개 더 입력해야 안내문에 \\가 정상적으로 출력이 되니 유의하십시오. | |
| 330 | ||
| 331 | 단, /는 예외적으로 \\를 앞에 입력해도 정상 출력이 안 됩니다. 이때는 {{{[[문서:(/으로 시작하는 문서명)]]}}}과 같이 디폴드 이름공간인 "{{{문서:}}}"를 붙이시면 됩니다.[* [[#매크로|매크로 문단]]에 후술된 {{{pagecount(문서)}}} 문법을 생각한다면, {{{나무위키:}}} 등 명시된 네임스페이스와 달리, 일반 문서의 네임스페이스인 {{{문서:}}}는 디폴트값이기 때문에 표제어에서 볼 수 없었다는 것을 눈치챌 수 있습니다.] 여러 편법들[* 모양이 비슷한 전각 문자(#, /, \, |, ])로 리다이렉트 만들거나, 링크를 작성하는 문서의 제목에 /가 없다는 가정 하에 {{{[[../문서명]]}}}을 사용하기 등]을 이용할 수도 있지만 문서 이름공간을 붙이는 것이 정석이면서도 훨씬 더 편리합니다. | |
| 332 | ||
| 333 | 또헌 파일 문서를 출력할 때도 마찬가지로 백슬래시 기호를 넣어주면 된다. | |
| 334 | ||
| 335 | ||||<rowbgcolor=#fc6><rowcolor=#000><tablealign=center> 예시 || | |
| 336 | ||<rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 || | |
| 337 | || {{{ [[\\]] }}} || [[\\]] || | |
| 338 | || {{{[[##]]}}} 또는 {{{[[\#]]}}} || [[##]] || | |
| 339 | || {{{[[[12:00]#]] 또는 [[[12:00\]]]}}} || [[[12:00]#]] || | |
| 340 | || {{{[[[\X\]]]}}} || [[[\X\]]] || | |
| 341 | || {{{[[\#1 to Infinity]]}}} || [[\#1 to Infinity]] || | |
| 342 | || {{{[[#1 to Infinity#s-2]]}}}[* 문단 번호 링크 시 끝 문자에 #이 붙은 효과가 나므로 백슬래시가 따로 필요하지 않습니다.] || [[#1 to Infinity#s-2]] || | |
| 343 | || {{{[[S\#ARP]]}}} 또는 {{{[[S#ARP#]]}}} || [[S\#ARP]] || | |
| 344 | || {{{[[\#fanPD Studio]]}}} || [[\#fanPD Studio]] || | |
| 345 | || {{{[[문서:/// (너 먹구름 비)|/// (너 먹구름 비)]]}}} || [[문서:/// (너 먹구름 비)|/// (너 먹구름 비)]] || | |
| 346 | || {{{[[파일:\#1f1e33.jpg|width=100]]}}} ||<nopad> [[파일:\#1f1e33.jpg|width=100]][*원_문서명 [[:파일:\#1f1e33.jpg]]] || | |
| 347 | || {{{[[파일:#1f1e33.jpg#|width=100]]}}} ||<nopad> [[파일:\#1f1e33.jpg|width=100]][*원_문서명] || | |
| 348 | ||
| 349 | == 마크업 미적용 텍스트 == | |
| 350 | 일반 텍스트 사이에 코드를 넣거나, 해당 텍스트에 [[마크업 언어|마크업]]이 적용되지 않도록 할 수 있습니다.[* 마크업 언어에 관한 설명은 해당 문서 참조. 프로그래밍과 거리가 먼 사람이라 이해가 가지 않으신다면, 위키 한정으로는 그냥 "위키 문법이 미적용된다"고 이해하셔도 좋습니다.] | |
| 351 | ||
| 352 | || 입력 || {{{{{{텍스트}}}}}} || | |
| 353 | || 결과 || {{{텍스트}}} || | |
| 354 | ||
| 355 | "\{{{"와 "}}}"안에 들어간 텍스트는 마크업이 적용되지 않고, 이렇게 {{{고정폭 글꼴}}}로 표시됩니다. 텍스트 사이에 코드를 넣는 경우나 이 문법 도움말 문서처럼 특정 마크업을 설명할 때 사용됩니다. | |
| 356 | ---- | |
| 357 | ||
| 358 | '''{{{#red 주의}}}''': 기술적인 문제로 인해 "\{{{"와 "}}}" 사이에 "{" 또는 "}"를 3개 이상 연속으로 사용할 수 없습니다. {, {{, }, }}는 정상적으로 출력되며, 사이에 띄어쓰기가 있는 경우에도 정상적으로 출력됩니다. 다만 중괄호를 열고 닫는 것이 짝이 맞는 경우엔 작동합니다. | |
| 359 | ||
| 360 | '''{{{#green 참고}}}''': 한 문자에만 마크업을 적용되지 않게 하려면 그 문자 바로 앞에 \\(역슬래시)를 넣으면 됩니다. [[../#문법 무효화|문법 도움말 기본편 참조]]. | |
| 361 | ||
| 362 | == 들여쓰기 == | |
| 363 | 텍스트를 들여쓰고자 할 경우, 줄 앞에 띄어쓰기(공백)을 하나 이상 입력합니다. 들여쓴 텍스트 내에서 또 들여쓰고자 할 경우, 입력했던 공백보다 더 많은 공백을 입력합니다. | |
| 364 | ||
| 365 | '''{{{#red 주의}}}''': 들여쓴 단계에 따라 줄 앞에 입력한 공백의 개수는 일정하게 유지해주십시오. | |
| 366 | ||
| 367 | ||
| 368 | ||<bgcolor=#fc6><color=#000><:>입력 | |
| 369 | ||<bgcolor=#fc6><color=#000><:>출력 | |
| 370 | || | |
| 371 | ||{{{#!wiki style="font-family: monospace;" | |
| 372 | 들여쓰지 않은 텍스트 | |
| 373 | {{{#red ○}}}들여쓴 텍스트 (단계 1) | |
| 374 | {{{#red ○○}}}들여쓴 텍스트 (단계 2) | |
| 375 | {{{#red ○○○}}}들여쓴 텍스트 (단계 3) | |
| 376 | {{{#red ○○○○}}}들여쓴 텍스트 (단계 4)}}} | |
| 377 | ||{{{#!wiki style="margin-bottom: 1rem;" | |
| 378 | 들여쓰지 않은 텍스트}}} | |
| 379 | {{{#!wiki style="margin-bottom: 1rem;" | |
| 380 | 들여쓴 텍스트 (단계 1)}}} | |
| 381 | {{{#!wiki style="margin-bottom: 1rem;" | |
| 382 | 들여쓴 텍스트 (단계 2)}}} | |
| 383 | {{{#!wiki style="margin-bottom: 1rem;" | |
| 384 | 들여쓴 텍스트 (단계 3)}}} | |
| 385 | {{{#!wiki style="margin-bottom: 1rem;" | |
| 386 | 들여쓴 텍스트 (단계 4)}}} | |
| 387 | || | |
| 388 | ||<bgcolor=#fc6><color=#000><-2><:>{{{#!wiki style="font-family: monospace; display: inline;" | |
| 389 | {{{#red ○}}}}}}은 띄어쓰기를 나타냅니다. | |
| 390 | || | |
| 391 | ||
| 392 | 다른 단계의 들여쓰기는 서로 다른 문단으로 여기게 되어 가로로 들여쓰기가 됨과 동시에 문단끼리 세로 여백이 생기게 됩니다. | |
| 393 | ||
| 394 | == 인용문 == | |
| 395 | * '''관련 기초 문법''': [[나무위키:문법 도움말#인용문|인용문 기초]] | |
| 396 | ||
| 397 | === 인용문의 정렬 === | |
| 398 | 인용문은 기본적으로 왼쪽 정렬이며 오른쪽이나 가운데 정렬을 하고 싶다면 틀 안에 넣고 그 틀을 정렬하는 방식으로 가능합니다. 표에 넣고 그 표를 정렬하는 식은 버그가 있는데, 아래 버그 부분을 참고하세요. | |
| 399 | ||
| 400 | {{{#!wiki style="float: left; padding-right: 10px; margin-right: 10px; border-right: 1px solid lightgray; width: 45%" | |
| 401 | 입력 | |
| 402 | ---- | |
| 403 | {{{> 좌측 정렬 인용문[br](기본값) | |
| 404 | ||
| 405 | {{{#!wiki style="margin: 0px auto; display: table" | |
| 406 | > 중앙 정렬 인용문}}} | |
| 407 | ||
| 408 | {{{#!wiki style="float: right" | |
| 409 | > 우측 정렬 인용문}}}[clearfix]}}}[br] [br] [br] }}} | |
| 410 | 출력 | |
| 411 | ---- | |
| 412 | > 좌측 정렬 인용문[br](기본값) | |
| 413 | {{{#!wiki style="margin: 0px auto; display: table" | |
| 414 | > 중앙 정렬 인용문}}} | |
| 415 | {{{#!wiki style="float: right" | |
| 416 | > 우측 정렬 인용문 | |
| 417 | }}}[clearfix] | |
| 418 | ||
| 419 | === 표 안의 인용문 === | |
| 420 | 2020년 12월 기준, 일부 브라우저에서 표 내부에서 인용문 문법을 사용하면 폭 구현이 제대로 안되는 버그가 있습니다. 아래와 같이 인용문 안에 강제로 여백을 넣는 틀을 사용하고 내용을 입력하는 식으로 임시적인 해결이 가능합니다. | |
| 421 | ||
| 422 | ## 2020년 5월 기준, 마이크로소프트 엣지, 모질라 파이어폭스, 삼성 인터넷 구현 확인. | |
| 423 | ||<rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=250px> 출력 || | |
| 424 | ||표 안에 그냥 인용문을 넣을 경우 | |
| 425 | {{{> 인용문 | |
| 426 | }}}||<^|1>아래와 같이 점선 안이 쪼그라 듦. | |
| 427 | >인용문|| | |
| 428 | ||여백을 주는 틀을 이용하는 경우. | |
| 429 | {{{>{{{#!wiki style="margin:1em" | |
| 430 | 인용문}}}}}} | |
| 431 | * {{{-1 margin은 padding과 바꾸어도 동일한 결과.}}} | |
| 432 | * {{{-1 값(1em)은 2021년 시점[* 정확히는 인용문 여백이 기존에 쉼표 있다가 사라진 흔적 남은것이 수정된 이후 기준.] 기준 나무위키 기본 스킨 엔진의 값.}}} | |
| 433 | ||<^|1><:> | |
| 434 | >{{{#!wiki style="margin:1em" | |
| 435 | 인용문}}}|| | |
| 436 | ||
| 437 | == 주석 == | |
| 438 | 위키 문서 내에 출력되지 않는, 편집자만 읽을 수 있는 주석을 달 수 있습니다. 줄 시작시 {{{##}}}를 입력하고 내용을 적습니다. 그 줄에 해당하는 내용은 출력시 없는 줄로 처리됩니다. | |
| 439 | ||
| 440 | ※ 문단 편집을 눌러서 확인해 보세요. | |
| 441 | ||<table bordercolor=gray><width=300px><rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=300px> 출력 || | |
| 442 | ||{{{#!wiki style="margin: -20px -10px" | |
| 443 | {{{## 내용 | |
| 444 | }}}}}}|| | |
| 445 | ## 내용 | |
| 446 | ||{{{#!wiki style="margin: -20px -10px" | |
| 447 | {{{## 주석입니다. | |
| 448 | 가나다라 | |
| 449 | ## 주석은 페이지에 출력되지 않습니다. | |
| 450 | 마바사아 | |
| 451 | ## 토론에서도 주석이 적용됩니다. | |
| 452 | 자차카타}}}}}} | |
| 453 | ||가나다라 | |
| 454 | ## 주석은 페이지에 출력되지 않습니다. | |
| 455 | 마바사아 | |
| 456 | ## 토론에서도 주석이 적용됩니다. | |
| 457 | 자차카타 || | |
| 458 | ||
| 459 | ---- | |
| 460 | 편집자의 실수로 인한 잘못된 수정이 잦을 경우 대상의 근처에 넣으면 좋지만, 주석을 넣었음에도 길이가 긴 줄 글의 경우 주석의 주목도가 낮아 못보는 경우가 생길 수 있습니다. 이럴 때는 1. 주목도가 높은 색이 있는 이모지를 넣거나 2. 주석 위아래로 주석을 넣은 빈줄을 넣어, 주목도를 더욱 끌어올릴 수 있습니다. | |
| 461 | ||
| 462 | * ✔️ Check Mark 같은 몇몇 특문은 환경에 따라 색이 없기도 합니다.([[https://emojipedia.org/check-mark#designs]] 참조바람) | |
| 463 | 아래 예시들은 모든 환경에서 색이 넣어져 있음이 보장됩니다. | |
| 464 | * 🔶 Large Orange Diamond | |
| 465 | * 🔷 Large Blue Diamond | |
| 466 | * 🔻Red Triangle Pointed Up | |
| 467 | * 🔺Red Triangle Pointed Down | |
| 468 | * ⭕ Hollow Red Circle | |
| 469 | * ❌ Cross Mark | |
| 470 | * ❗ Red Exclamation Mark | |
| 471 | ||
| 472 | ||<table bordercolor=gray><width=300px><colbgcolor=#fc6><colcolor=#000><-4> 활용 예시 || | |
| 473 | || 입력 ||{{{## 🔶🔶🔶 ㄱ 국적은 오보임 | |
| 474 | ... A는 ㄴ 국적의 선수다. }}}||{{{## 🔶🔶🔶 | |
| 475 | ## ㄱ 국적은 오보임 | |
| 476 | ## 🔶🔶🔶 | |
| 477 | ... A는 ㄴ 국적의 선수다. }}}||{{{## | |
| 478 | ## 🔶🔶🔶 ㄱ 국적은 오보임 | |
| 479 | ## | |
| 480 | ... A는 ㄴ 국적의 선수다. }}}|| | |
| 481 | || 출력 ||<-3>... A는 ㄴ 국적의 선수다. || | |
| 482 | ||
| 483 | ---- | |
| 484 | '''{{{#red 편집기 버그:}}}''' 편집기에서 ##의 앞에 한 칸 이상 띄워져 있으면 주석이 적용되지 않고 정상적으로 출력되지만, 편집기 상에서는 {{{#008000,#608b4e 주석이 적용된 것처럼 초록색으로 표시}}}됩니다. | |
| 485 | ||<table bordercolor=gray><rowbgcolor=#fc6><rowcolor=#000> 입력 || 편집기 || 출력 || | |
| 486 | ||{{{가나다라 | |
| 487 | ## 주석 앞 띄어쓰기 | |
| 488 | 마바사아 | |
| 489 | }}} ||가나다라 | |
| 490 | {{{#008000,#608b4e ## 주석 앞 띄어쓰기}}} | |
| 491 | 마바사아 | |
| 492 | ||가나다라 | |
| 493 | ## 주석 앞 띄어쓰기 | |
| 494 | 마바사아 | |
| 495 | || | |
| 496 | ||
| 497 | === 편집 페이지 고정 주석 === | |
| 498 | {{{##@}}}를 입력하고 원하는 내용을 작성하면 해당 내용을 편집 페이지 최상단에 고정할 수 있습니다. | |
| 499 | ||
| 500 | ||<table bordercolor=gray><tablewidth=700px><rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 || | |
| 501 | ||<width=40%>{{{#!wiki style="margin: -20px -10px" | |
| 502 | {{{##@ '''{{{+5 나무위키, 여러분이 가꾸어 나가는 지식의 나무}}}'''}}}}}} | |
| 503 | ||[[파일:나무위키 고정 주석.png|width=100%]] || | |
| 504 | ||
| 505 | == 매크로 == | |
| 506 | *'''관련 기초 문법''': [[나무위키:문법 도움말#매크로|매크로 기초 문법]] (date/datetime, br, include, table of contents(목차), footnote(각주), age(나이), dday(남은 날)) | |
| 507 | ||
| 508 | === pagecount === | |
| 509 | {{{[pagecount]}}}로 호출할 수 있습니다. 나무위키에 존재하는 문서 개수를 출력합니다. 정수값으로 출력됩니다. | |
| 510 | ||
| 511 | {{{[pagecount(이름공간)]}}}과 같이 인수를 첨가하면 특정 이름공간의 문서 개수만을 확인할 수 있습니다. 일반 문서는 '문서'로 이름공간을 정하면 됩니다. | |
| 512 | ||
| 513 | ||<rowbgcolor=#fc6><rowcolor=#000> 유형 || 입력 || 출력 || | |
| 514 | || 전체 ||{{{[pagecount]}}}||[pagecount]|| | |
| 515 | || 문서 이름공간(일반 문서) ||{{{[pagecount(문서)]}}}||[pagecount(문서)]|| | |
| 516 | || 틀 이름공간 ||{{{[pagecount(틀)]}}}||[pagecount(틀)]|| | |
| 517 | || 분류 이름공간 ||{{{[pagecount(분류)]}}}||[pagecount(분류)]|| | |
| 518 | || 파일 이름공간 ||{{{[pagecount(파일)]}}}||[pagecount(파일)]|| | |
| 519 | || 사용자 이름공간 ||{{{[pagecount(사용자)]}}}||[pagecount(사용자)]|| | |
| 520 | || 특수기능 이름공간 ||{{{[pagecount(특수기능)]}}}||[pagecount(특수기능)]|| | |
| 521 | || 나무위키 이름공간 ||{{{[pagecount(나무위키)]}}}||[pagecount(나무위키)]|| | |
| 522 | || 토론 이름공간 ||{{{[pagecount(토론)]}}}||[pagecount(토론)]|| | |
| 523 | || 휴지통 이름공간 ||{{{[pagecount(휴지통)]}}}||[pagecount(휴지통)]|| | |
| 524 | || 투표 이름공간 ||{{{[pagecount(투표)]}}}||[pagecount(투표)]|| | |
| 525 | || 파일휴지통 이름공간 ||{{{[pagecount(파일휴지통)]}}}||[pagecount(파일휴지통)]|| | |
| 526 | || 위키운영 이름공간 ||{{{[pagecount(위키운영)]}}}||[pagecount(위키운영)]|| | |
| 527 | || 템플릿 이름공간 ||{{{[pagecount(템플릿)]}}}||[pagecount(템플릿)]|| | |
| 528 | || 시스템 이름공간 ||{{{[pagecount(시스템)]}}}||[pagecount(시스템)]|| | |
| 529 | ||
| 530 | 여기서 정식 이름공간이 아닌 인수를 쓸 경우 모든 문서의 개수가 출력됩니다. | |
| 531 | ||
| 532 | ||<rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 || | |
| 533 | ||{{{[pagecount(더미)]}}}[* [[더미 문서]]는 '더미:'로 시작하지만 [[휴지통 문서]]와 달리 이름공간의 종류가 아닙니다.]||[pagecount(더미)]|| | |
| 534 | ||
| 535 | === [anchor(루비)]루비 문자(ruby) === | |
| 536 | [[루비 문자]]([[후리가나]])를 입력합니다. 단, 매크로내 컬러 지정은 윗첨자에만 적용됩니다. 이 매크로는 [[Ruby]] 코딩 용도로 사용할 수 없습니다.[* Ruby 코드는 하술한 [[#문법 강조 (syntax highlighting)|문법 강조]]를 이용해야 합니다.] | |
| 537 | ||
| 538 | 예시 | |
| 539 | || {{{ [ruby(글자,ruby=루비,color=red)] }}} || | |
| 540 | || [ruby(글자,ruby=루비,color=red)] || | |
| 541 | ||
| 542 | == [anchor(테이블)]테이블 응용 문법 == | |
| 543 | *'''관련 기초 문법''' | |
| 544 | * [[나무위키:문법 도움말#테이블|테이블 기초 문법]] (기본 형태, 가로 세로 합치기, 테이블과 셀 텍스트의 정렬, 테이블과 셀의 크기와 색상) | |
| 545 | * [[나무위키:문법 도움말#이미지 파일|이미지 삽입법과 관련 매개변수]] | |
| 546 | ||
| 547 | === 테이블 캡션 === | |
| 548 | 테이블에 캡션을 달 수 있습니다. | |
| 549 | ||
| 550 | {{{|캡션| 테이블 || 내용 || | |
| 551 | }}} | |
| 552 | ||
| 553 | |캡션| 테이블 || 내용 || | |
| 554 | ||
| 555 | 테이블의 첫 셀을 구성하는 {{{|}}} 와 {{{|}}} 사이에 캡션을 입력합니다. | |
| 556 | ||
| 557 | 텍스트 뿐만 아니라 이미지나 동영상을 캡션으로 넣을 수도 있습니다. | |
| 558 | ||
| 559 | '''{{{#red 주의}}}''': 캡션 내에서 {{{[[내용|출력]]}}} 형태 링크를 쓰면 문법이 깨질 수 있습니다. 또한 2019년 2월 현재 편집 중 미리보기를 할 때는 캡션이 회색으로 보이며 표 위가 아닌 밑으로 내려오는 버그가 존재합니다. | |
| 560 | '''{{{#red 주의}}}''': 이미지와 동영상의 경우, '''border를 포함한''' 테이블의 width이 이미지나 동영상의 width(youtube 영상은 기본 640) 이상이여야 영상이 짤리지 않습니다. | |
| 561 | ||
| 562 | === 이미지 / 동영상 삽입 시 기본 셀 여백 제거 === | |
| 563 | 이미지 또는 동영상과 같은 콘텐츠를 셀 안에 삽입할 때 생기는 상하 5px, 좌우 10px의 기본 셀 여백을 [[나무위키:문법 도움말#nopad|<nopad>]]가 아닌 다음 문법으로도 제거할 수 있습니다. | |
| 564 | {{{{{{#!wiki style="margin: -5px -10px" | |
| 565 | }}}}}} | |
| 566 | -10px"까지 쓰고 '''반드시 줄을 바꿔줘야''' 합니다. | |
| 567 | 가끔씩 상하에 '''-4px의''' 기본 여백을 제거해야 되는 경우도 있습니다. | |
| 568 | ---- | |
| 569 | 아래는 예시입니다. | |
| 570 | ||
| 571 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:나무위키:로고1.png|width=100%]] ||}}}[br][br]문법을 적용하지 않은 이미지.[br]테두리(빨간색) 안에 상하 5px, 좌우 10px의 기본 여백(노란색) 발생.|| | |
| 572 | ||
| 573 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:나무위키:로고1.png|width=100%]] || | |
| 574 | ||
| 575 | ---- | |
| 576 | ||
| 577 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px" | |
| 578 | [[파일:나무위키:로고1.png|width=100%]]}}} ||}}}[br]문법을 적용한 후.|| | |
| 579 | ||
| 580 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px" | |
| 581 | [[파일:나무위키:로고1.png|width=100%]]}}} || | |
| 582 | ||
| 583 | ---- | |
| 584 | ||
| 585 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px" | |
| 586 | [youtube(jNQXAC9IVRw)]}}} ||}}}[br]동영상에 적용.|| | |
| 587 | ||
| 588 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px" | |
| 589 | [youtube(jNQXAC9IVRw)]}}} || | |
| 590 | ||
| 591 | === 이미지 삽입 시 최대 넓이값 설정하기 === | |
| 592 | 이미지를 셀 안에 삽입할 때 기본 넓이 100%를 설정한 상태에서 최대 넓이를 적용하시려면 다음 문법을 이용해 설정하실 수 있습니다. | |
| 593 | {{{{{{#!wiki style="display:inline-block; max-width: 값px;" | |
| 594 | }}}}}} max-width: 값px;"까지 쓰고 '''반드시 줄을 바꿔줘야''' 합니다.[br]그리고 display:inline-block;를 삭제하시면 이미지가 무조건 왼쪽으로 정렬됩니다. | |
| 595 | ||
| 596 | 다만 위 문법은 가끔식 원하는 넓이 값이 안 나오는 경우가 있습니다. 해당 경우 아래의 문법을 사용해보시길 바랍니다. | |
| 597 | {{{{{{#!wiki style="display:block; margin:0 auto; max-width: 값px;" | |
| 598 | }}}}}} 다만 위 문법인 경우 이미지를 가운데로 정렬시키며 만약에 이미지를 오른쪽으로 정렬해야 하는 경우에는 margin 값에 '0 0 0 auto'를 주시면 됩니다. 왼쪽으로 정렬해야 하는 경우는 margin 값에 '0 auto 0 0'를 주시면 됩니다. | |
| 599 | ---- | |
| 600 | 아래는 예시입니다. | |
| 601 | ||
| 602 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:나무위키:로고1.png|width=100%]] ||}}}[br][br]문법을 적용하기 전.|| | |
| 603 | ||
| 604 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:나무위키:로고1.png|width=100%]] || | |
| 605 | ||
| 606 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="display:inline-block; max-width: 400px;" | |
| 607 | [[파일:나무위키:로고1.png|width=100%]]}}} ||}}}[br]문법을 적용한 후.|| | |
| 608 | ||
| 609 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="display:inline-block; max-width: 400px;" | |
| 610 | [[파일:나무위키:로고1.png|width=100%]]}}} || | |
| 611 | ||
| 612 | === 이미지 삽입 시 스케일링 방식 설정 === | |
| 613 | {{{#red '''주의'''}}}: [[웹 브라우저]]에 따라서 '''호환성 차이'''가 있을 수 있습니다. | |
| 614 | ||
| 615 | [[CSS]] 표준에서 규정한 '''image-rendering''' 속성을 이용하여 [[웹 브라우저]]가 이미지를 스케일링 할 때에 쓰는 알고리즘을 지정할 수 있습니다. | |
| 616 | {{{{{{#!wiki style="image-rendering: [설정값];" | |
| 617 | }}}}}} | |
| 618 | 사용 가능한 설정값은 다음과 같습니다. | |
| 619 | * '''auto''': 웹 브라우저의 기본 스케일링 방식을 적용합니다. | |
| 620 | * '''crisp-edges''': 스케일링 과정에서 계단 현상을 제거합니다. | |
| 621 | * '''smooth''': 스케일링 과정에서 계조를 매끄럽게 합니다. 일반적인 수준의 결과물이 나옵니다. | |
| 622 | * '''high-quality''': 스케일링 과정에서 계조를 매끄럽게 합니다. smooth 값에 비해서 더욱 정밀한 스케일링 작업이 이루어집니다. '''웹 브라우저의 렌더링 성능에 영향을 줄 수 있으므로 주의해서 사용하세요!''' | |
| 623 | * '''pixelated''': Nearest Neighbor 알고리즘을 통해 스케일링이 이루어집니다. 화질에 어떠한 영향도 끼치지 않습니다. | |
| 624 | ||
| 625 | 별도로 설정하지 않을 경우에는 기본값인 auto로 설정됩니다. | |
| 626 | ---- | |
| 627 | 아래는 예시입니다. | |
| 628 | ||
| 629 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: high-quality;" | |
| 630 | [[파일:나무위키:로고1.png|width=100%]]}}} ||}}} image-rendering 값을 high-quality로 설정할 때 || | |
| 631 | ||
| 632 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: high-quality;" | |
| 633 | [[파일:나무위키:로고1.png|width=100%]]}}} || | |
| 634 | ||
| 635 | ---- | |
| 636 | ||
| 637 | ||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: pixelated;" | |
| 638 | [[파일:나무위키:로고1.png|width=100%]]}}} ||}}} image-rendering 값을 pixelated로 설정할 때 || | |
| 639 | ||
| 640 | ||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: pixelated;" | |
| 641 | [[파일:나무위키:로고1.png|width=100%]]}}} || | |
| 642 | ||
| 643 | === 테이블 여러 개 나란히 배치하기 === | |
| 644 | {{{<tablealign>}}} 문법을 사용하여 테이블을 두 개 이상 가로로 나란히 배치해야 할 때가 있습니다. 이 경우 {{{wiki}}} 문법을 사용할 수 있습니다. | |
| 645 | ||
| 646 | 예를 들어, 1번 테이블과 2번 테이블을 동시에 배치해야 하는 경우, 표 간 개행을 하면 다음과 같이 2번 테이블이 개행되어 출력됩니다. | |
| 647 | ||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 648 | {{{||<tablealign=right> '''1번 테이블''' || | |
| 649 | || 내용내용내용내용내용내용내용내용내용 || | |
| 650 | || blahblahblahblahblahblahblahblah || | |
| 651 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] || | |
| 652 | ||
| 653 | ||<tablealign=right> '''2번 테이블''' || | |
| 654 | || 내용내용내용내용내용내용내용내용내용 || | |
| 655 | || blahblahblahblahblahblahblahblah || | |
| 656 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}|| | |
| 657 | || '''결과''' ||{{{#!wiki | |
| 658 | ||<tablealign=right> '''1번 테이블''' || | |
| 659 | || 내용내용내용내용내용내용내용내용내용 || | |
| 660 | || blahblahblahblahblahblahblahblah || | |
| 661 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] || | |
| 662 | ||
| 663 | ||<tablealign=right> '''2번 테이블''' || | |
| 664 | || 내용내용내용내용내용내용내용내용내용 || | |
| 665 | || blahblahblahblahblahblahblahblah || | |
| 666 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}|| | |
| 667 | [clearfix] | |
| 668 | 표 간 개행을 하지 않으면 두 테이블이 붙어버리므로 2번 테이블의 {{{<tablealign=right>}}} 문법은 무효화됩니다. | |
| 669 | ||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 670 | {{{||<tablealign=right> '''1번 테이블''' || | |
| 671 | || 내용내용내용내용내용내용내용내용내용 || | |
| 672 | || blahblahblahblahblahblahblahblah || | |
| 673 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] || | |
| 674 | ||<tablealign=right> '''2번 테이블''' || | |
| 675 | || 내용내용내용내용내용내용내용내용내용 || | |
| 676 | || blahblahblahblahblahblahblahblah || | |
| 677 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}|| | |
| 678 | || '''결과''' ||{{{#!wiki | |
| 679 | ||<tablealign=right> '''1번 테이블''' || | |
| 680 | || 내용내용내용내용내용내용내용내용내용 || | |
| 681 | || blahblahblahblahblahblahblahblah || | |
| 682 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] || | |
| 683 | ||<tablealign=right> '''2번 테이블''' || | |
| 684 | || 내용내용내용내용내용내용내용내용내용 || | |
| 685 | || blahblahblahblahblahblahblahblah || | |
| 686 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}|| | |
| 687 | ||
| 688 | 첫 번째 혹은 모든 테이블에 대해 {{{wiki}}} 문법을 사용해 감싸면 개행을 방지하면서 여러 테이블을 나란히 배치할 수 있습니다. | |
| 689 | ||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 690 | {{{{{{#!wiki | |
| 691 | ||<tablealign=right> '''1번 테이블''' || | |
| 692 | || 내용내용내용내용내용내용내용내용내용 || | |
| 693 | || blahblahblahblahblahblahblahblah || | |
| 694 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}} | |
| 695 | ||<tablealign=right> '''2번 테이블''' || | |
| 696 | || 내용내용내용내용내용내용내용내용내용 || | |
| 697 | || blahblahblahblahblahblahblahblah || | |
| 698 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}|| | |
| 699 | || '''결과''' ||{{{#!wiki | |
| 700 | {{{#!wiki | |
| 701 | ||<tablealign=right> '''1번 테이블''' || | |
| 702 | || 내용내용내용내용내용내용내용내용내용 || | |
| 703 | || blahblahblahblahblahblahblahblah || | |
| 704 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}} | |
| 705 | ||<tablealign=right> '''2번 테이블''' || | |
| 706 | || 내용내용내용내용내용내용내용내용내용 || | |
| 707 | || blahblahblahblahblahblahblahblah || | |
| 708 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}|| | |
| 709 | ||
| 710 | ==== 중앙 정렬된 테이블 나란히 배치하기 ==== | |
| 711 | 여러 테이블을 중앙 정렬시키되 나란히 배치해야 하는 경우도 있습니다. 이 경우 자식 요소를 텍스트로 취급되게 하고, 부모 요소에서는 텍스트 중앙 정렬을 하여 해결할 수 있습니다. | |
| 712 | ||
| 713 | ||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 714 | {{{{{{#!wiki style="text-align: center;" | |
| 715 | {{{#!wiki style="display: inline-block; margin: 0 10px;" | |
| 716 | || '''테이블 1''' || | |
| 717 | || 내용내용내용내용내용내용내용내용내용 || | |
| 718 | || blahblahblahblahblahblahblahblah || | |
| 719 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}{{{#!wiki style="display: inline-block; margin: 0 10px;" | |
| 720 | || '''테이블 2''' || | |
| 721 | || 내용내용내용내용내용내용내용내용내용 || | |
| 722 | || blahblahblahblahblahblahblahblah || | |
| 723 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}}}}}}}|| | |
| 724 | || '''결과''' ||{{{#!wiki style="text-align: center;" | |
| 725 | {{{#!wiki style="display: inline-block; margin: 0 10px;" | |
| 726 | || '''테이블 1''' || | |
| 727 | || 내용내용내용내용내용내용내용내용내용 || | |
| 728 | || blahblahblahblahblahblahblahblah || | |
| 729 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}{{{#!wiki style="display: inline-block; margin: 0 10px;" | |
| 730 | || '''테이블 2''' || | |
| 731 | || 내용내용내용내용내용내용내용내용내용 || | |
| 732 | || blahblahblahblahblahblahblahblah || | |
| 733 | || [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}|| | |
| 734 | ||
| 735 | == [anchor(접기)]접기의 응용 == | |
| 736 | * '''관련 기초 문법''': [[나무위키:문법 도움말#접기|접기 기초 문법]] | |
| 737 | ||
| 738 | * {{{+1 '''응용 1:'''}}} 여백 제거 | |
| 739 | 나무위키는 기본적으로 표 자체가 가지고 있는 상하 여백[* 상하 10px, 2022.05. 기준], 표의 칸 내부에 상하좌우 여백[* 상하 5px, 좌우 10px, 2022.05. 기준]이 있습니다. 따라서 표 내에서 접기를 이용해 표를 추가로 넣을 때 상당히 넓은 여백이 생기는데, 이 여백을 wiki 틀 문법으로 제거할 수 있습니다.[* 표 테두리 경계선 및 텍스트 크기의 변화 등의 이유로 텍스트가 중심에서 떨어지거나 경계선의 굵기가 굵어지는 등의 문제가 발생할 시에는 문제가 생긴 방향의 여백 제거값에서 -1을 더하면 됩니다.[br]''예시)'' -10px에서 -11px로, -5px에서 -6px로, 0에서 -1px로.] | |
| 740 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 741 | {{{|| {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px);" | |
| 742 | {{{#!folding [ 펼치기 · 접기 ] | |
| 743 | {{{#!wiki style="margin: -5px -1px -11px; word-break: keep-all;" | |
| 744 | ||내용내용내용내용내용내용내용내용|| | |
| 745 | ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}} | |
| 746 | * min-height:calc(1.5em + 5px) | |
| 747 | 접기가 위치한 틀의 최소 세로폭(min-height)을 나무위키 기본 한줄 높이 1.5em와 margin: ... -5px에서 지워진 5px을 더한 값으로 설정하여 일반적인 한줄 표 높이와 동일하게 맞춥니다. | |
| 748 | * 펼치기 접기를 넣을 셀의 너비가 '''펼치기 접기 문구가 원래 가져야 했을 여백 값 포함 너비'''보다 크고 '''가운데 정렬'''이어야 합니다. 이 예시는 '여백 제거 적용'이라는 윗셀의 텍스트가 있어서 충분히 넓고 접기 문법이 있는 셀이 가운데 정렬이라서 티가 나지 않지만, 윗셀을 없애고 {{{#red 충분한 너비를 확보하지 못하면}}} 아래처럼 보입니다. | |
| 749 | ||<tablebgcolor=#fff,#000> {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px);" | |
| 750 | {{{#!folding [ 펼치기 · 접기 ] | |
| 751 | {{{#!wiki style="margin: -5px -1px -11px; word-break: keep-all;" | |
| 752 | ||내용내용내용내용내용내용내용내용|| | |
| 753 | ||내용내용내용내용내용내용내용내용||}}}}}}}}} || | |
| 754 | 또한, 충분한 너비가 확보되더라도 다른 가운데 정렬이 아닌 {{{#red 왼쪽 정렬}}}을 사용하면 아래와 같이 보입니다. | |
| 755 | ||<tablebgcolor=#fff,#000> 여백 제거 적용 || | |
| 756 | ||{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px);" | |
| 757 | {{{#!folding [ 펼치기 · 접기 ] | |
| 758 | {{{#!wiki style="margin: -5px -1px -11px; word-break: keep-all;" | |
| 759 | ||내용내용내용내용내용내용내용내용|| | |
| 760 | ||내용내용내용내용내용내용내용내용||}}}}}}}}} || | |
| 761 | 프로필 표 같은 피치못할 사정으로 왼쪽 정렬을 꼭 사용해야 한다면 '[ 펼치기 · 접기 ]' 문구 앞쪽에 일반 띄어쓰기가 아닌 공백문자('⠀': 점자 패턴 공백 등)를 넣음으로써 접기 전 여백이 사라지는 문제를 완벽하지는 않지만 어색하지 않아 보이게 만들 수 있습니다. | |
| 762 | ||<tablewidth=400><width=100> '''항목''' ||<bgcolor=#fff,#000>{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px);" | |
| 763 | {{{#!folding ⠀[ 펼치기 · 접기 ] | |
| 764 | {{{#!wiki style="margin: -5px -1px -11px; word-break: keep-all" | |
| 765 | ||<tablewidth=100%>내용내용내용내용내용내용내용내용|| | |
| 766 | ||내용내용내용내용내용내용내용내용||}}}}}}}}} || | |
| 767 | * 기존 문법 {{{<^|1><height=32> {{{#!wiki style="margin: 0 -10px -5px;" (내부 내용)}}}}}}의 height=32 옵션은 브라우저나 위키 스킨 설정에 따라 내부 글자 폰트의 크기가 달라지므로 일정한 높이를 구현할수 없어 일정한 크기를 보장할 수 없기 때문에 좋지 않습니다.}}}|| | |
| 768 | || 결과 ||{{{#!wiki style="display:inline-block; vertical-align:top" | |
| 769 | ||<tablebgcolor=#fff,#000> 여백 제거 미적용 || | |
| 770 | || {{{#!folding [ 펼치기 · 접기 ] | |
| 771 | || 내용내용내용내용내용내용내용내용 || | |
| 772 | || 내용내용내용내용내용내용내용내용 ||}}} ||}}} {{{#!wiki style="display: inline-block; vertical-align: top;" | |
| 773 | ||<tablebgcolor=#fff,#000> 여백 제거 적용 || | |
| 774 | || {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px);" | |
| 775 | {{{#!folding [ 펼치기 · 접기 ] | |
| 776 | {{{#!wiki style="margin: -5px -1px -11px; word-break: keep-all;" | |
| 777 | ||내용내용내용내용내용내용내용내용|| | |
| 778 | ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}|| | |
| 779 | ||
| 780 | * {{{+1 '''응용 2:'''}}} 여러 접기를 한 행에 넣기 | |
| 781 | 표의 한 칸에 여러 접기 틀을 합쳐 넣을 수 있습니다. | |
| 782 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||'''{{{#red 주의}}}''': 틀 안의 내용이 충분히 커야 합니다. | |
| 783 | {{{#!folding [ 문법 펼치기 · 접기 ] | |
| 784 | {{{||<width=300><#090> '''{{{#fff 표 제목}}}''' || | |
| 785 | || {{{#!wiki style="display: inline-block;" | |
| 786 | {{{#!folding [ 틀 1 ] | |
| 787 | 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}} | |
| 788 | }}}{{{#!wiki style="display: inline-block;" | |
| 789 | {{{#!folding [ 틀 2 ] | |
| 790 | 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}} | |
| 791 | }}}{{{#!wiki style="display: inline-block;" | |
| 792 | {{{#!folding [ 틀 3 ] | |
| 793 | 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}} | |
| 794 | }}} ||}}}}}}|| | |
| 795 | || 결과 ||{{{#!wiki | |
| 796 | ||<width=300><#090> '''{{{#fff 표 제목}}}''' || | |
| 797 | || {{{#!wiki style="display: inline-block;" | |
| 798 | {{{#!folding [ 틀 1 ] | |
| 799 | 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}} | |
| 800 | }}}{{{#!wiki style="display: inline-block;" | |
| 801 | {{{#!folding [ 틀 2 ] | |
| 802 | 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}} | |
| 803 | }}}{{{#!wiki style="display: inline-block;" | |
| 804 | {{{#!folding [ 틀 3 ] | |
| 805 | 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}} | |
| 806 | }}} ||}}}|| | |
| 807 | ||
| 808 | 위의 방식을 그대로 쓰면 펼치기 접기 버튼의 간격이 좁습니다. 간격을 확보하기 위한 방법이 있습니다. | |
| 809 | 아래 두방법을 같이 적용하는 것이 가장 좋습니다. 예) [[틀:대한민국 관련 문서]] | |
| 810 | ||
| 811 | * 방법 1 | |
| 812 | 버튼 대괄호 좌우에 띄어쓰기가 아닌 [[공백]] 문자[* '⠀': 점자 패턴 공백 [br] ' ': 전각 공백 등등]을 넣으면 그 크기만큼 간격이 생깁니다. | |
| 813 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 814 | {{{||<width=300><#090> '''{{{#fff 표 제목}}}''' || | |
| 815 | || {{{#!wiki style="display: inline-block;" | |
| 816 | {{{#!folding ⠀[ 틀 1 ]⠀ | |
| 817 | 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}} | |
| 818 | }}}{{{#!wiki style="display: inline-block;" | |
| 819 | {{{#!folding ⠀[ 틀 2 ]⠀ | |
| 820 | 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}} | |
| 821 | }}}{{{#!wiki style="display: inline-block;" | |
| 822 | {{{#!folding ⠀[ 틀 3 ]⠀ | |
| 823 | 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}} | |
| 824 | }}} ||}}}}}}|| | |
| 825 | || 결과 ||{{{#!wiki | |
| 826 | ||<width=300><#090> '''{{{#fff 표 제목}}}''' || | |
| 827 | || {{{#!wiki style="display: inline-block;" | |
| 828 | {{{#!folding ⠀[ 틀 1 ]⠀ | |
| 829 | 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}} | |
| 830 | }}}{{{#!wiki style="display: inline-block;" | |
| 831 | {{{#!folding ⠀[ 틀 2 ]⠀ | |
| 832 | 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}} | |
| 833 | }}}{{{#!wiki style="display: inline-block;" | |
| 834 | {{{#!folding ⠀[ 틀 3 ]⠀ | |
| 835 | 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}} | |
| 836 | }}} ||}}}|| | |
| 837 | ||
| 838 | * 방법 2 | |
| 839 | 접기 틀 바깥의 wiki 틀에 min-width: (숫자)% 옵션을 줍니다. 최소한 (숫자)%의 너비를 보장하게 하는 옵션으로 숫자는 19(가로 5항목)~26(가로 3항목) 정도가 적당합니다. | |
| 840 | 표가 800px이상이거나, 100% 등 너비가 넓을 때 좋습니다. | |
| 841 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 842 | {{{||<width=700><#090> '''{{{#fff 표 제목}}}''' || | |
| 843 | || {{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 844 | {{{#!folding ⠀[ 틀 1 ]⠀ | |
| 845 | ||<width=1000> 틀 1 내용 틀 1 내용 || | |
| 846 | }}} | |
| 847 | }}}{{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 848 | {{{#!folding ⠀[ 틀 2 ]⠀ | |
| 849 | ||<width=1000> 틀 2 내용 틀 2 내용 || | |
| 850 | }}} | |
| 851 | }}}{{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 852 | {{{#!folding ⠀[ 틀 3 ]⠀ | |
| 853 | ||<width=1000> 틀 3 내용 틀 3 내용 || | |
| 854 | }}}}}} ||}}}}}}|| | |
| 855 | || 결과 ||{{{#!wiki | |
| 856 | ||<width=700><#090> '''{{{#fff 표 제목}}}''' || | |
| 857 | || {{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 858 | {{{#!folding ⠀[ 틀 1 ]⠀ | |
| 859 | ||<width=1000> 틀 1 내용 틀 1 내용 || | |
| 860 | }}} | |
| 861 | }}}{{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 862 | {{{#!folding ⠀[ 틀 2 ]⠀ | |
| 863 | ||<width=1000> 틀 2 내용 틀 2 내용 || | |
| 864 | }}} | |
| 865 | }}}{{{#!wiki style="display: inline-block; min-width: 25%;" | |
| 866 | {{{#!folding ⠀[ 틀 3 ]⠀ | |
| 867 | ||<width=1000> 틀 3 내용 틀 3 내용 || | |
| 868 | }}}}}} ||}}}|| | |
| 869 | ||
| 870 | * 내부 접기들 안의 표 바깥 여백 삭제 | |
| 871 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ] | |
| 872 | {{{||<table bordercolor=#090><width=400> {{{#!wiki style="margin: 0 -10px -5px;" | |
| 873 | {{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 874 | {{{#!folding [ 표1 ] | |
| 875 | {{{#!wiki style="margin: -5px 0;" | |
| 876 | ||<table bordercolor=#fc6><width=1000> 표1 표1 표1 || | |
| 877 | }}} | |
| 878 | }}} | |
| 879 | }}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 880 | {{{#!folding [ 표2 ] | |
| 881 | {{{#!wiki style="margin: -5px 0;" | |
| 882 | ||<table bordercolor=#fc6><width=1000> 표2 표2 표2 || | |
| 883 | }}} | |
| 884 | }}} | |
| 885 | }}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 886 | {{{#!folding [ 표3 ] | |
| 887 | {{{#!wiki style="margin: -5px 0 -10px;" | |
| 888 | ||<table bordercolor=#fc6><width=1000> 표3 표3 표3 || | |
| 889 | }}}}}}}}}}}} ||}}}}}} | |
| 890 | * <width=1000> | |
| 891 | 내부 틀의 내용이 한줄을 넘어갈 크기 이상 정도로 적당히 크지 않으면 100%보다 적절히 큰 1000 정도로 두어야 표가 어그러 들지 않습니다. | |
| 892 | 위는 한칸짜리 표라서 한칸에 1000을 둔 것입니다. 칸의 크기는 각각 두칸이면 1000-1000, 세칸이면 1000-1000-1000 등으로 두면 됩니다. | |
| 893 | * margin: -5px 0 -10px | |
| 894 | 접기 내부의 아래부분 마진(margin-bottom, 또는 margin의 세번째 값)은 마지막 항목이 -5px 작아야 최하단 여백이 삭제됩니다. | |
| 895 | 위와 같은 경우는 위 두개는 -5px 0 -5px 인데, 가장 아래 항목은 -5px 0 -10px 입니다. | |
| 896 | || | |
| 897 | || 결과 ||{{{#!wiki | |
| 898 | ||<table bordercolor=#090><width=400> {{{#!wiki style="margin: 0 -10px -5px;" | |
| 899 | {{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 900 | {{{#!folding [ 표1 ] | |
| 901 | {{{#!wiki style="margin: -5px 0;" | |
| 902 | ||<table bordercolor=#fc6><width=1000> 표1 표1 표1 || | |
| 903 | }}} | |
| 904 | }}} | |
| 905 | }}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 906 | {{{#!folding [ 표2 ] | |
| 907 | {{{#!wiki style="margin: -5px 0;" | |
| 908 | ||<table bordercolor=#fc6><width=1000> 표2 표2 표2 || | |
| 909 | }}} | |
| 910 | }}} | |
| 911 | }}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: 2em;" | |
| 912 | {{{#!folding [ 표3 ] | |
| 913 | {{{#!wiki style="margin: -5px 0 -10px;" | |
| 914 | ||<table bordercolor=#fc6><width=1000> 표3 표3 표3 || | |
| 915 | }}}}}}}}}}}} ||}}}|| | |
| 916 | ||
| 917 | == [[/TeX|수식]] == | |
| 918 | [include(틀:하위 문서, top1=나무위키:문법 도움말/심화/TeX)] | |
| 919 | [[TeX]]을 이용해서 수학식 등을 입력할 수 있습니다. | |
| 920 | ||
| 921 | == [anchor(html)]HTML을 이용하는 응용 텍스트 문법 == | |
| 922 | {{{#red '''경고'''}}}: 이 문법은 현재 지원 중이나 적용을 권장하지 않으며 '''차후에 지원이 종료될 수 있습니다.''' | |
| 923 | ||
| 924 | {{{{{{#!html (코드)}}}}}} 형태로 작성합니다. 코드를 열었다면 무조건 닫아야만 적용됩니다. | |
| 925 | ||
| 926 | [[HTML]]의 기본 구조 및 태그의 종류에 대한 내용은 나무마크 수준을 벗어나므로, [[HTML/태그]] 문서 또는 외부 자료를 참고하시기 바랍니다. | |
| 927 | ||
| 928 | 적용되는 대상에 먼저 나무마크 적용이 되어있으면 [[HTML|html]] 태그가 적용이 안 되니 주의하십시오. 반대로 html을 적용하고 나무마크를 적용할 수는 있습니다. 단, 일부 사용할 수 없는 코드도 있습니다. | |
| 929 | ||
| 930 | 새 렌더러 적용 후로 HTML 태그가 적용된 문자는 목차에서 표시되지 않으므로 주의하십시오. 또한 이것을 이용해 목차와 실제로 보이는 것이 다른 문단을 만들 수 있습니다. | |
| 931 | ||
| 932 | === 텍스트 배경 색상 === | |
| 933 | {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. | |
| 934 | ||
| 935 | {{{ {{{#!html <span style="background-color: #배경색">서술할 내용</span>}}} }}} | |
| 936 | ||
| 937 | 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다. | |
| 938 | ||{{{{{{#!html <span style="background-color: #999">배경색 적용</span>}}}}}} | |
| 939 | 글자가 있는 부분(공백 포함)에만 배경색이 적용됩니다. | |
| 940 | ||<bgcolor=#ffffff> {{{#!html <span style="background-color: #999">배경색 적용</span>}}} {{{#!html <span style="background-color: #999; font-weight:700; font-size:300%">배경색 적용</span>}}} || | |
| 941 | [[틀:글배경]], [[틀:글배경b]], [[틀:글배경r]], [[틀:글배경br]]을 이용할 수도 있습니다. | |
| 942 | ||
| 943 | ==== 텍스트 배경 색상과 다른 강조 문법의 중첩 ==== | |
| 944 | {{{#!html <span style="background-color: #EFEF00">서술할 내용1</span>}}} | |
| 945 | {{{#!html <span style="color: #00AA00">서술할 내용2</span>}}} | |
| 946 | {{{#!html <span style="color: #FFFFFF; background-color: #00AEE3">서술할 내용3</span>}}} | |
| 947 | ||
| 948 | ||{{{{{{#!html <span style="background-color: #배경색">서술할 내용1</span>}}}}}} | |
| 949 | {{{{{{#!html <span style="color: #글자색">서술할 내용2</span>}}}}}} | |
| 950 | {{{{{{#!html <span style="color: #글자색; background-color: #배경색">서술할 내용3</span>}}}}}}|| | |
| 951 | ||
| 952 | HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 [[쌍반점|;(세미콜론)]] 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다. | |
| 953 | ||
| 954 | {{{#red '''주의'''}}}: HTML 문법 안에 나무위키 문법을 같이 사용할 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}} | |
| 955 | ||
| 956 | 같이 쓰려면 {{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}} | |
| 957 | ||{{{{{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}}}}|| | |
| 958 | 이와 같이 {{{<b>}}}태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}}와 같이 사용해야 합니다. [[#매개변수|틀에 매개변수]]를 입력할 때에는 {{{{{{#!html}}}}}} 없이 사용할 수 있습니다. | |
| 959 | ||
| 960 | ||<-5><bgcolor=#fc6><color=#000> HTML 태그 || | |
| 961 | || 시작 || 종료 || 예시 || 설명 || 대체 가능 문법 || | |
| 962 | || <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체: 글자를 굵게 합니다. || {{{'''가나'''다라}}} || | |
| 963 | || <i> || </i> || {{{#!html <i>가나</i>다라}}} ||이탤릭체: 글자를 기울게 합니다. || {{{''가나''다라}}} || | |
| 964 | || <strong> || </strong> || {{{#!html <strong>가나</strong>다라}}} ||글자를 강조합니다.[* <b> 태그랑 차이 없음.] || {{{'''가나'''다라}}} || | |
| 965 | || <em> || </em> || {{{#!html <em>가나</em>다라}}} ||글자를 기울입니다.[* <i> 태그랑 차이 없음.] || {{{''가나''다라}}} || | |
| 966 | || <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 나무위키에서 제공하는 문법인 --취소선--이 아닌 글자 자체에 취소선을 입히는 태그입니다.] || {{{--가나--다라}}} || | |
| 967 | || <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의합니다. || {{{,,가나,,다라}}} || | |
| 968 | || <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의합니다. || {{{^^가나^^다라}}} || | |
| 969 | |||| <br> || {{{#!html 가나<br>다라}}} ||<br>을 중심으로 개행합니다. || {{{가나[br]다라}}} || | |
| 970 | 이 외에도 다양한 태그가 있습니다. | |
| 971 | ||
| 972 | 아니면 괄호 밖에서 사용해야 합니다. '''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}''' | |
| 973 | ||{{{'''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''}}}|| | |
| 974 | ||
| 975 | {{{#red '''주의'''}}}: 문서 목차에는 HTML 문법이 적용되지 않습니다. | |
| 976 | ||
| 977 | === 텍스트 그림자 및 네온 효과 === | |
| 978 | {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. | |
| 979 | ||
| 980 | 일반적인 경우 [[틀:글무리]]를 이용하면 됩니다. 예시는 다음과 같습니다. | |
| 981 | ||
| 982 | ||<rowbgcolor=#fc6><rowcolor=#000><width=80%> 입력 || 출력 || | |
| 983 | ||{{{[include(틀:글무리, 둘레=3, 그림자=00f, 글자=fff, 내용=여기로, 링크=나무위키)]}}} ||[include(틀:글무리, 둘레=3, 그림자=00f, 글자=fff, 내용=여기로, 링크=나무위키)] || | |
| 984 | ||
| 985 | 단, 다중 그림자 효과를 적용하는 상황처럼 부득이하게 필요한 경우 아래와 같은 문법을 이용할 수 있습니다. | |
| 986 | {{{#!syntax html | |
| 987 | {{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} }}} | |
| 988 | 나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다. 글자색을 그대로 쓸 생각이면 {{{; color:#글자색}}}부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다. | |
| 989 | ||{{{{{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}}}}} | |
| 990 | 번짐이 없으면 그림자 효과가 됩니다. | |
| 991 | ||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px #999; font-weight:700; font-size:300%">그림자 효과</span>}}} || | |
| 992 | ||{{{{{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}}}}} | |
| 993 | 번짐 옵션을 6px 주어서 네온 사인 같은 효과를 얻습니다. | |
| 994 | ||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}} {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066; font-weight:700; font-size:300%">네온 효과</span>}}} || | |
| 995 | ||{{{{{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black">다중 효과</span>}}}}}} | |
| 996 | 그림자 + 번진 그림자(쉼표로 다중 적용)로 큰 글씨에서 진한 네온 효과 | |
| 997 | ||<bgcolor=#999999> {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2">다중 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black; font-weight:700; font-size:300%">다중 효과</span>}}} || | |
| 998 | ||
| 999 | === 텍스트 외곽선 효과 === | |
| 1000 | {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. | |
| 1001 | ||
| 1002 | {{{ {{{#!html <span style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색">서술할 내용</span>}}} }}} | |
| 1003 | 나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다. | |
| 1004 | 글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다. | |
| 1005 | ||
| 1006 | 위의 그림자 효과를 응용한 방식입니다. | |
| 1007 | 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다. | |
| 1008 | 이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다. | |
| 1009 | ||
| 1010 | || {{{ {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048">외곽선 효과1</span>}}} }}} ||<bgcolor=#999> {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048">외곽선 효과1</span>}}} {{{#!html <span style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff, 3px 3px #fff, 3px -3px #fff, -3px -3px #fff, -3px 3px #fff; color:#11A048; font-weight:700; font-size:300%">외곽선 효과1</span>}}} || | |
| 1011 | || {{{ {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048">외곽선 효과2</span>}}} }}} ||<bgcolor=#999> {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048">외곽선 효과2</span>}}} {{{#!html <span style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff; color:#11A048; font-weight:700; font-size:300%">외곽선 효과2</span>}}} || | |
| 1012 | ||
| 1013 | == 매크로 미지원 플랫폼에 동영상 삽입[anchor(동영상 심화)] == | |
| 1014 | [include(틀:상세 내용, 문서명=틀:video)] | |
| 1015 | '''{{{#red 주의}}}''': 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. | |
| 1016 | ||
| 1017 | [[나무위키:문법 도움말#동영상|매크로가 지원되지 않는]] 사이트의 동영상을 나무위키 문서 내에 첨부하고 싶다면, 일반적인 경우 [[틀:video]]를 이용해서 매개변수와 함께 include 하시면 됩니다. | |
| 1018 | ||
| 1019 | ||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 || 출력 || | |
| 1020 | ||{{{[include(틀:video, src=https://d28xe8vt774jo5.cloudfront.net/champion-abilities/0017/ability_0017_P1.webm, width=320)]}}} | |
| 1021 | || [include(틀:video, src=https://d28xe8vt774jo5.cloudfront.net/champion-abilities/0017/ability_0017_P1.webm, width=320)] || | |
| 1022 | ||
| 1023 | 마찬가지로 오디오도 [[틀:video]]를 이용해 첨부할 수 있습니다. | |
| 1024 | ||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 || 출력 || | |
| 1025 | ||{{{[include(틀:video,src=https://www.mois.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000010854&fileSn=0, height=50, width=100%)]}}} | |
| 1026 | ||[include(틀:video,src=https://www.mois.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000010854&fileSn=0, height=50, width=100%)]|| | |
| 1027 | ||
| 1028 | 하지만 필요한 경우, 아래와 같이 HTML 구문을 직접 이용해 동영상을 삽입하는 것도 가능합니다. (비권장) | |
| 1029 | ||
| 1030 | {{{방법 1. | |
| 1031 | {{{#!html <video src="동영상 주소"></video>}}} | |
| 1032 | ||
| 1033 | 방법 2. | |
| 1034 | {{{#!html 동영상 플레이어 소스}}} | |
| 1035 | }}} | |
| 1036 | 위와 같은 형식으로 문서 내의 원하는 위치에 쓰시면 됩니다. 문서 내에 쓰고 문서 저장을 하면 영상이 출력됩니다. | |
| 1037 | ||
| 1038 | * 모든 페이지에서의 TLS(HTTPS) 통신을 지원하지 않는 사이트의 동영상 플레이어는 나무위키에서 나타나지 않습니다. [[https://namu.wiki/w/나무위키:보존문서/나무위키:연습장1?uuid=66ce513c-6e71-413c-a693-f404eb7c9a99|참고]] [[https://namu.wiki/raw/나무위키:보존문서/나무위키:연습장1?uuid=66ce513c-6e71-413c-a693-f404eb7c9a99|RAW]][* 2016년 7월 27일 확인] | |
| 1039 | ||
| 1040 | * '''{{{#red 주의}}}''': 소리를 포함하고 있는 멀티미디어의 자동 재생(autoplay)은 나무위키 규정으로 금지되어 있습니다. | |
| 1041 | ||
| 1042 | == 틀 == | |
| 1043 | === 기본 형식 === | |
| 1044 | {{{{{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px;" | |
| 1045 | {{{+1 여기에 제목을 넣어주세요.}}}[br][br]여기에 내용을 넣어주세요.}}}}}} | |
| 1046 | {{{#!wiki style="border:1px solid grey;border-top:5px solid orange;padding:12px;" | |
| 1047 | {{{+1 여기에 제목을 넣어주세요.}}}[br][br]여기에 내용을 넣어주세요.}}} | |
| 1048 | ||
| 1049 | * {{{style="border:1px solid (색 코드);border-top:5px solid (색 코드);padding:12px;"}}} | |
| 1050 | 테두리를 지정합니다. (색 코드) 부분에 원하는 색깔의 코드를 넣어 주면 됩니다. 아래는 많이 쓰이는 코드들 입니다. 또한 blue, red 같이 CSS 웹 색상 이름을 사용해도 됩니다. 틀을 만들 때 글자를 1개라도 틀리거나 빠트리면 틀이 정상적으로 표시되지 않습니다. | |
| 1051 | * {{{#!wiki style="display: inline; background: orange; padding: 2px 3px; border-radius: 5px;" | |
| 1052 | {{{#fff '''orange'''}}}}}} | |
| 1053 | 가장 일반적인 색으로, 주의 문구에 주로 쓰입니다. 예) [[틀:사건사고]] | |
| 1054 | * {{{#!wiki style="display: inline; background: crimson; padding: 2px 3px; border-radius: 5px;" | |
| 1055 | {{{#fff '''crimson'''}}}}}} | |
| 1056 | orange보다 조금 더 강한 경고에 주로 쓰입니다. 예) [[틀:설명문서]] | |
| 1057 | * {{{#!wiki style="display: inline; background: black; padding: 2px 3px; border-radius: 5px;" | |
| 1058 | {{{#ddd '''black'''}}}}}} | |
| 1059 | crimson보다 조금 더 강한 경고에 주로 쓰입니다. 예) [[틀:이미지 라이선스/제한적 이용]] | |
| 1060 | * {{{#!wiki style="display: inline; background: navy; padding: 2px 3px; border-radius: 5px;" | |
| 1061 | {{{#fff '''navy'''}}}}}} | |
| 1062 | black보다도 더 강한 경고에 주로 쓰입니다. 예) [[틀:MPOV]] | |
| 1063 | * {{{#!wiki style="display: inline; background: gray; padding: 2px 3px; border-radius: 5px;" | |
| 1064 | {{{#fff '''gray'''}}}}}} | |
| 1065 | 폐지, 부재 등 무언가가 없다는 의미에 주로 쓰입니다. 예) [[틀:폐선]] | |
| 1066 | * {{{#!wiki style="display: inline; background: yellowgreen; padding: 2px 3px; border-radius: 5px;" | |
| 1067 | {{{#000 '''yellowgreen'''}}}}}}, {{{#!wiki style="display: inline; background: green; padding: 2px 3px; border-radius: 5px;" | |
| 1068 | {{{#fff '''green'''}}}}}} | |
| 1069 | 편집상의 주의 문구에 주로 쓰입니다. 예) [[틀:오락실 목록]], [[틀:토론 합의]] | |
| 1070 | * {{{#!wiki style="display: inline; background: #f77; padding: 2px 3px; border-radius: 5px;" | |
| 1071 | {{{#000 '''#FF7777'''}}}}}} | |
| 1072 | 성적 요소가 있음을 알릴 때 주로 사용됩니다. 예) [[틀:선정성]] | |
| 1073 | * {{{#!wiki style="display: inline; background: #00a495; padding: 2px 3px; border-radius: 5px;" | |
| 1074 | {{{#fff '''#00A495'''}}}}}} | |
| 1075 | 나무위키의 공식 문서 등에 주로 쓰입니다. 예) [[틀:공식 문서]] | |
| 1076 | * [[#s-4.2|텍스트 크기 문법]]을 이용하여 제목 크기 조절이 가능합니다. {{{{{{+1 여기에 제목을 넣어 주세요.}}}}}} 처럼 사용할 수 있습니다. | |
| 1077 | * 제목과 내용 사이에 한 줄을 띄워 주세요. {{{[br][br]}}} 처럼 줄 바꿈 매크로를 두 번 사용하면 됩니다. | |
| 1078 | ||
| 1079 | === 심화 문법 === | |
| 1080 | {{{{{{#!wiki style="원하는 서식 목록" | |
| 1081 | 서식이 적용된 텍스트}}} | |
| 1082 | }}} | |
| 1083 | 원하는 서식에 입력할 수 있는 것들은 다음과 같습니다. 한 서식을 입력한 다음에 ''';'''([[세미콜론]])을 입력하여 다음 서식과 구분합니다. 또한 세미콜론 뒤에 공란을 입력하지 않아도 정상적인 출력이 가능합니다. | |
| 1084 | ||
| 1085 | 여기서 '''(수치)'''는 [[정수|정수값]]을 의미하며, 음수값도 적용이 됩니다. calc( 수치 단위 )로 할 경우 해당 식을 계산하여 처리도 가능하나, 덧셈과 뺄셈은 기호 근처에 띄어쓰기가 추가로 필요합니다. | |
| 1086 | * 테두리: {{{border-(방향):(선 굵기)px (선 스타일) (색상)}}} | |
| 1087 | 예1: 상우하좌 각각 5, 10, 15, 20px 굵기의 테두리 | |
| 1088 | {{{border:1px solid; border-width:5px 10px 15px 20px}}} | |
| 1089 | 예2: 전방향 1px이지만 윗부분은 5px | |
| 1090 | {{{border:1px solid; border-top:5px solid}}} | |
| 1091 | * 방향: {{{top}}}=위, {{{bottom}}}=아래, {{{right}}}=오른쪽, {{{left}}}=왼쪽, 공백=전방향. | |
| 1092 | * 선 굵기: {{{thin, medium, thick}}} = 각각 1, 3, 5px, 또는 직접 입력 XXpx[* 반드시 단위를 붙일 것.] | |
| 1093 | * 선 스타일 | |
| 1094 | ||{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px none gray" | |
| 1095 | {{{none}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px solid gray" | |
| 1096 | {{{solid}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px double gray" | |
| 1097 | {{{double}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px dotted gray" | |
| 1098 | {{{dotted}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px dashed gray" | |
| 1099 | {{{dashed}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px inset gray" | |
| 1100 | {{{inset}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px outset gray" | |
| 1101 | {{{outset}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px groove gray" | |
| 1102 | {{{groove}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:10px ridge gray" | |
| 1103 | {{{ridge}}}}}}|| | |
| 1104 | * 선 색상: 지정 하지 않을 경우의 색상은 글씨 색깔을 따라 갑니다. border-(방향)-color로 border의 서술과 분리할 수 있으며, dark-style에 사용 할 수도 있습니다. | |
| 1105 | * 배경 색: {{{background-color:(색상)}}} | |
| 1106 | * 그림자 효과 : {{{text-shadow: }}} | |
| 1107 | * 둥근 모서리: {{{border-radius:(수치)px}}} | |
| 1108 | {{{#!wiki style="" | |
| 1109 | 예시 | |
| 1110 | {{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid gray; border-radius:10px" | |
| 1111 | {{{border-radius:10px}}}:[br]모든 방향 10px}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid gray; border-radius:10px 20px" | |
| 1112 | {{{border-radius:10px 20px}}}:[br]좌상, 우하는 10px, 우상, 좌하는 20px}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid gray; border-radius:5px 10px 20px" | |
| 1113 | {{{border-radius:5px 10px 20px}}}:[br]좌상부터 시계방향으로 5px 10px 20px (좌하는 기본 5px)}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid gray; border-radius:5px 10px 20px 40px" | |
| 1114 | {{{border-radius:5px 10px 20px 40px}}} :[br]좌상부터 시계방향으로 5px 10px 20px 40px}}} | |
| 1115 | }}} | |
| 1116 | * 틀 안의 여백: {{{padding-(방향):(수치)px}}} | |
| 1117 | 기본값은 {{{padding:0px}}} | |
| 1118 | ||
| 1119 | * 틀 밖의 여백: {{{margin-(방향):(수치)px}}} 또는 {{{margin:(북쪽&남쪽 공통 적용 수치)px (동쪽&서쪽 공통 적용 수치)px}}} 또는 {{{margin:(북쪽 수치)px (동쪽 수치)px (남쪽 수치)px (서쪽 수치)px}}}} | |
| 1120 | 기본값은 {{{margin:0px}}} | |
| 1121 | {{{margin:0px auto}}}로 주었을 경우 표 밖의 가로 여백을 자동으로 맞춥니다. 즉, 표의 화면 가운데 정렬이 됩니다. | |
| 1122 | 이 방법을 사용하면 표의 셀 내부에 이미지를 삽입할 때 여백을 없애는 것이 가능하며 양수값을 사용하면 여백이 추가되며, 음수 값을 사용할 경우 여백이 줄어듭니다. 단순히 여백 없이 사진이 셀을 최대로 채우게 하고 싶은 경우는 <[[nopad]]>로 대체 가능합니다. | |
| 1123 | ||<colbgcolor=#fc6><colcolor=#000> 문법 ||<^|1>문법 미사용[br]{{{||<tan>[[파일:나무위키:로고1.png]]|| | |
| 1124 | }}}||<^|1>문법 사용[br]{{{||<tan>{{{#!wiki style="margin:-5px -10px" | |
| 1125 | [[파일:나무위키:로고1.png]]}}}||}}}|| | |
| 1126 | || 출력 ||{{{#!wiki style="" | |
| 1127 | ||<tan>[[파일:나무위키:로고1.png|width=200]]||}}}||{{{#!wiki style="float:left" | |
| 1128 | ||<tan>{{{#!wiki style="margin:-5px -10px -5px -10px" | |
| 1129 | [[파일:나무위키:로고1.png|width=200]]}}}||}}}|| | |
| 1130 | 만약 margin이 접기나 표 밖으로 나오면 잘리며 스크롤 바가 생깁니다.[* 원래는 그냥 튀어 나왔으나, 2019년 10월 말 경부터 변경.] | |
| 1131 | ||
| 1132 | * 틀 높이: {{{height:(수치)px}}} | |
| 1133 | ||
| 1134 | * 틀 길이: {{{width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비. | |
| 1135 | ||
| 1136 | * 틀 최대 길이: {{{max-width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비. | |
| 1137 | ||
| 1138 | * 폰트 색: {{{color:(색상)}}} | |
| 1139 | ||
| 1140 | * 폰트 효과: {{{font-style: normal 또는 italic 또는 oblique}}} | |
| 1141 | ||
| 1142 | * 글자 크기: {{{font-size: (수치)pt나 (수치)em 등.}}}[* 글자 크기를 세밀하게 조정. {\{{+? }}\}나 {\{{-? }}\}과는 별개의 수치로 지정되며 소숫점도 가능하다. 심지어 0까지도 조정 가능해 글자를 숨겨버릴 수도 있다. 사용 가능이 확인된 단위는 pt, em이 있는 것이 확인. +-?별 텍스트 크기는 [[나무위키:문법 도움말#텍스트 크기]] 참고.] | |
| 1143 | ||
| 1144 | * 글자 위치: {{{text-align: left 또는 center 또는 right}}} | |
| 1145 | ||
| 1146 | * 줄 높이: {{{font:1em/}}}'''{{{#f33 {{{line-height}}}}}}''' {{{math; font-family:revert}}} | |
| 1147 | line-height 옵션은 막혀 있으나 위와 같이 우회하여 적용할 수 있다. 붉은 강조 표시된 부분을 원하는 값으로 수정하여 적용하며, 기본값은 폰트 크기의 1.5배인 1.5em이다. | |
| 1148 | ||
| 1149 | * 표의 좌, 우 정렬: {{{float:left 또는 right 또는 center}}} | |
| 1150 | 나무위키 이미지, 표의 정렬과 비슷하나 center의 경우 별도의 설정 없이는 표의 폭이 100%로 고정됩니다. | |
| 1151 | float 기능을 사용하여 [[#s-17.3.3|표의 캡션]] 기능과 비슷하게 이미지에도 캡션을 넣을 수 있습니다. 나무위키에는 이미지 캡션 기능이 없으므로 이렇게 써야 합니다. | |
| 1152 | ||<colbgcolor=#fc6><colcolor=#000>예시[br]문법||{{{{{{#!wiki style="float:left;text-align:center" | |
| 1153 | [[파일:나무위키:로고1.png|width=200]][br]나무위키 로고}}}}}}||{{{{{{#!wiki style="float:left;text-align:center" | |
| 1154 | 나무위키 로고[br][[파일:나무위키:로고1.png|width=200]]}}}}}}|| | |
| 1155 | ||예시[br]출력||{{{#!wiki style="float:left;text-align:center" | |
| 1156 | [[파일:나무위키:로고1.png|width=200]][br]나무위키 로고}}}||{{{#!wiki style="float:left;text-align:center" | |
| 1157 | 나무위키 로고[br][[파일:나무위키:로고1.png|width=200]]}}}|| | |
| 1158 | * {{{display}}} 속성: 표가 화면에서 어떻게 표시될지를 정합니다. 속성을 주지 않을 경우 기본값은 {{{block}}}입니다. 줄글 같이 취급하는 {{{inline}}}, 표로 취급하는 {{{table}}}, 안 보이게 하는 {{{none}}} 등이 있습니다. | |
| 1159 | 기본값인 block의 경우 강제로 표 너비의 최소를 화면의 100%로 맞춥니다. table 등으로 값을 줄 경우 이를 막을 수 있습니다. | |
| 1160 | ||<table width=100%><width=50%>display 속성을 주지 않을 경우 | |
| 1161 | (기본인 {{{display:block}}}이 됨) | |
| 1162 | {{{#!wiki style="border:1px solid gray;border-top:5px solid orange" | |
| 1163 | [[파일:나무위키:로고1.png|width=200]]}}}||<width=50%>display 속성을 {{{display:table}}}로 준 경우 | |
| 1164 | {{{#!wiki style="border:1px solid gray;border-top:5px solid orange;display:table" | |
| 1165 | [[파일:나무위키:로고1.png|width=200]]}}}|| | |
| 1166 | [clearfix] | |
| 1167 | === 매개변수 === | |
| 1168 | * '''관련 기초 문법''': [[나무위키:문법 도움말#틀·문서 삽입|틀·문서 삽입]] (include 매크로) | |
| 1169 | ||
| 1170 | [[일반 틀]], [[기호 틀]], [[양식상자 틀]], [[기타 문법 틀]] 등에서 매개변수를 설정할 때 {{{#!html <span style="font-family: monospace;">@매개변수@</span>}}} 꼴로 선언할 수 있습니다. | |
| 1171 | ||
| 1172 | 아래 예시는 [[틀:다른 뜻 설명]]을 include하는 예시입니다. | |
| 1173 | ||<tablewidth=100%><rowbgcolor=#fc6><rowcolor=#000> '틀:다른 뜻 설명' 원문 일부 || include 구문 || 출력 || | |
| 1174 | ||<|2>{{{#!html <span style="font-family: monospace;">{{{#!html &nbsp; @설명@}}}</span>}}}||{{{[include(틀:다른 뜻 설명)]}}}||[[파일:다른 뜻 아이콘.svg|align=left&width=21.6px]] {{{#!html }}}|| | |
| 1175 | ||{{{[include(틀:다른 뜻 설명, 설명=이것은 설명입니다.)]}}}||[[파일:다른 뜻 아이콘.svg|align=left&width=21.6px]] {{{#!html 이것은 설명입니다.}}}|| | |
| 1176 | 위와 같이 '틀:다른 뜻 설명'에 {{{#!html <span style="font-family: monospace;">@설명@</span>}}}이 선언되어 있으므로 '설명'은 '틀:다른 뜻 설명'의 매개변수가 됩니다. 틀이 삽입될 문서 내에서 매개변수를 이용하기 위해서는 {{{매개변수=값}}}의 형태로 값을 넘겨주면 됩니다. '값' 자리에 아무것도 입력하지 않으면 아무것도 출력되지 않습니다. 또한, '값'에 해당하는 문자열에 쉼표({{{,}}})가 포함되어 있을 경우 제대로 표시되지 않습니다. 쉼표 앞에 [[백슬래시]]를 붙여 {{{\,}}}로 쓰면 해결됩니다. | |
| 1177 | ||
| 1178 | ---- | |
| 1179 | 디폴트 매개 변수는 {{{#!html <span style="font-family: monospace;">@매개변수=디폴트값@</span>}}} 형태로 선언합니다.[* C++, Python 등에서 디폴트 매개 변수를 선언하는 방법과 유사합니다.] 이해를 돕기 위해 '틀:다른 뜻 설명'의 원문을 변형하여 보겠습니다. | |
| 1180 | ||<tablewidth=100%><rowbgcolor=#fc6><rowcolor=#000> '틀:다른 뜻 설명' 원문 일부 변형 || include 구문 || 출력 || | |
| 1181 | ||<|2>{{{#!html <span style="font-family: monospace;">{{{#!html &nbsp; @설명=설명을 입력하십시오@}}}</span>}}}||{{{[include(틀:다른 뜻 설명)]}}}||[[파일:다른 뜻 아이콘.svg|align=left&width=21.6px]] {{{#!html 설명을 입력하십시오}}}|| | |
| 1182 | ||{{{[include(틀:다른 뜻 설명, 설명=이것은 설명입니다.)]}}}||[[파일:다른 뜻 아이콘.svg|align=left&width=21.6px]] {{{#!html 이것은 설명입니다.}}}|| | |
| 1183 | 위와 같이 매개변수 '설명'의 디폴트 값이 "설명을 입력하십시오"로 선언되었으므로 아무것도 입력하지 않으면 디폴트 값인 "설명을 입력하십시오"가 출력됩니다. | |
| 1184 | ||
| 1185 | 이를 심화 문법에 응용하면 다음과 같이 매개변수 유무에 따라 출력 글자를 바꿀 수 있습니다. [[틀:토론 합의]]를 예시로 들면 다음과 같이 할 수 있습니다. | |
| 1186 | {{{#!wiki style="word-break:keep-all" | |
| 1187 | ||<tablewidth=100%><rowbgcolor=#fc6><rowcolor=#000><width=52%> '틀:토론 합의' 원문 일부 || include 구문 ||<width=10%> 출력 || | |
| 1188 | ||<|2>{{{#!html <span style="font-family: monospace;">{{{#!wiki style="display: none;display: @this=inline;@"<br>'''이 문서는'''}}}{{{#!wiki style="display: inline;display: @this=none;@"<br>'''이 문단은'''}}}</span>}}}||{{{[include(틀:토론 합의)]}}}||'''이 문서는'''|| | |
| 1189 | ||{{{[include(틀:토론 합의, this=아무 텍스트)]}}}||'''이 문단은'''||}}} | |
| 1190 | ||
| 1191 | ---- | |
| 1192 | {{{#red '''주의'''}}}: 나무마크(나무위키 자체 문법)에는 매개변수를 사용할 수 없습니다. 예를 들어, 셀의 배경색에 {{{#!html <span style="font-family: monospace;"><bgcolor=@배경색=#00a495@></span>}}}와 같은 매개변수를 지정할 수 없습니다. | |
| 1193 | ||
| 1194 | == 문법 강조 (syntax highlighting) == | |
| 1195 | 기본적인 사용법은 다음과 같습니다. | |
| 1196 | {{{{{{#!syntax 언어명 | |
| 1197 | 코드}}}}}} | |
| 1198 | 프로그래밍 언어를 입력할 때, [[텍스트 에디터]]에 입력한 것처럼 보기 좋게 해줍니다. | |
| 1199 | 프로그래밍 언어의 이름과 코드 내용을 원하는 것으로 변경하여 사용하실 수 있습니다. | |
| 1200 | ||
| 1201 | '언어명' 부분에 해당 언어 명칭을 아래와 같이 알파벳 소문자 형태로 작성하신 후 코드를 입력하시면 됩니다. 아래에 언급된 언어만 사용 가능합니다. | |
| 1202 | * [[BASIC]] - {{{basic}}} | |
| 1203 | * [[C언어|C]], [[C++]] - {{{cpp}}} | |
| 1204 | * [[C\#]] - {{{csharp}}} | |
| 1205 | * [[CSS]] - {{{css}}} | |
| 1206 | * [[Erlang]] - {{{erlang}}} | |
| 1207 | * [[Go(프로그래밍 언어)|Go]] - {{{go}}} | |
| 1208 | * [[HTML]] - {{{html}}} | |
| 1209 | * [[Java]] - {{{java}}} | |
| 1210 | * [[JavaScript]] - {{{javascript}}} | |
| 1211 | * [[JSON]] - {{{json}}} | |
| 1212 | * [[Kotlin]] - {{{kotlin}}} | |
| 1213 | * [[LISP]] - {{{lisp}}} | |
| 1214 | * [[Lua]] - {{{lua}}} | |
| 1215 | * [[markdown]] - {{{markdown}}} | |
| 1216 | * [[Objective-C]] - {{{objectivec}}} | |
| 1217 | * [[Perl]] - {{{perl}}} | |
| 1218 | * [[PHP]] - {{{php}}} | |
| 1219 | * [[PowerShell]] - {{{powershell}}} | |
| 1220 | * [[Python]] - {{{python}}} | |
| 1221 | * [[Ruby]] - {{{ruby}}} | |
| 1222 | * [[Rust(프로그래밍 언어)|Rust]] - {{{rust}}} | |
| 1223 | * [[SH#s-3|sh]] - {{{sh}}} | |
| 1224 | * [[SQL]] - {{{sql}}} | |
| 1225 | * [[Swift]] - {{{swift}}} | |
| 1226 | * [[TypeScript]] - {{{typescript}}} | |
| 1227 | * [[XML]] - {{{xml}}} | |
| 1228 | ||
| 1229 | [각주][include(틀:문서 가져옴, title=나무위키:문법 도움말/심화/HTML, version=49, uuid=49c171dd-bbef-4a52-9ce4-d14ed497f804)] | |
| 1230 | ||
| 1231 | [[분류:나무위키의 도움말]] |