HTML의 여러 태그 중 <div>의 경우만 유일하게 div 내 나무마크 내 적용이 가능합니다. 기본 형식은 아래와 같으며 style="속성 목록" 다음에 줄바꿈을 생략하면 정상적으로 출력되지 않습니다. {{{#!wiki style="속성 목록"
속성이 적용된 텍스트}}} 속성 목록 부분은 "속성명1: 적용사항1; 속성명2: 적용사항2" 와 같은 방식으로 구성되며 여러 속성끼리는 세미콜론(;)으로 구분합니다.
본 문단의 하위 항목인 '텍스트 정렬 및 자간 조절', '줄바꿈 기준 설정', '텍스트 및 셀 배경의 그라데이션 효과' 뿐 아니라, 후술되는 '이미지/동영상 삽입 관련 고급 문법', '인용문 정렬 문법', '접기 시 미관 개선용 문법'은 이처럼 HTML의 div 태그에 존재하는 다양한 속성을 나무마크에 호환시킨 후 나무위키의 필요성에 맞게 활용한 예시들입니다.
주의: <div> 태그 내에 나무마크를 적용하기 위해 분리하여 사용했던 이전 방식인 "{{{#!html <div style="속성 목록">}}} 속성이 적용된 텍스트 {{{#!html </div>}}}" 방식의 문법은 더 이상 사용할 수 없습니다.
주의: <div> 태그를 제외한 HTML의 다른 모든 태그, 특히 <span> 태그를 사용하는 문법은 정식 문법이 아니며 가능한 한 사용을 자제할 것이 요구됩니다. {{{#!wiki style= ...}}}로 시작하지 않고, {{{#!html ...}}}로 시작하는 모든 문법은 모두 비권장이라 보시면 됩니다. 이에 관해서는 별도 문단에서 설명합니다.
틀, 표, 인용문 박스 등 특정 영역의 가장자리에서 텍스트가 줄바꿈 될 때의 기준을 다음 문법을 통해 설정하여 가독성을 향상시킬 수 있습니다. {{{#!wiki style="word-break: (조건값);"
(텍스트)}}} 줄바꿈 조건값으로 입력할 수 있는 값에는 다음이 있습니다.
normal: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 라틴 문자(로마자)의 단어 단위 줄바꿈
keep-all: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 모든 문자(한글 포함)의 단어 단위 줄바꿈
break-all: 글자 단위 줄바꿈
참고: 이 문법을 따로 사용하지 않았을 경우의 나무위키 기본값은 글자 단위 줄바꿈(break-all) 입니다.
이 문법을 사용하여 해당 영역에서 전체적으로 단어 단위로 줄바꿈을 적용할 시, 예외적으로 일부 단어에 대해서만 단어 내 특정한 위치에서 줄바꿈을 적용하려면 그 위치에 폭 없는 공백(Zero Width Space, U+200B)을 삽입하면 됩니다. 폭 없는 공백은 그냥 복사해서 붙여넣으면 나중에 RAW에서 찾기 어려워지니 {{{#!html ​}}} 또는 {{{#!html ​}}}과 같이 HTML을 사용한 방법이 좋습니다. 다음은 예시입니다.
word-break: break-all 사용 (나무위키 기본값, 글자 단위로 줄바꿈)
|| 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. 요람에서 배워 무덤까지 간다. ||
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. 요람에서 배워 무덤까지 간다.
word-break: normal 사용 (라틴 문자 단어 단위로 줄바꿈)
{{{
#!wiki style="word-break: normal"
|| 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. 요람에서 배워 무덤까지 간다. ||}}}
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. 요람에서 배워 무덤까지 간다.
word-break: keep-all 사용 (한글을 포함한 모든 문자의 단어 단위로 줄바꿈)
{{{
#!wiki style="word-break: keep-all"
|| 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. 요람에서 배워 무덤까지 간다. ||}}}
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. 요람에서 배워 무덤까지 간다.
{{{#!wiki style="background-image: linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)"
}}} 이 문법은 글자의 배경에 그라데이션을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) <헥스 코드 1, 2> 자리에 자신이 넣고 싶은 여섯 자리의 헥스 코드들을 찾아서 입력해 주세요.
그라데이션의 여백을 조절하고 싶다면 위 문법에 margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; 을 추가로 입력하여 조절해 주세요.
그라데이션의 크기를 조절하고 싶다면 위 문법에 padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; 을 추가로 입력하여 조절해 주세요.
그라데이션의 방향을 설정하고 싶다면 <to 방향> 자리에 to left, to right, to top, to bottom 중에서 하나를 입력해 주세요.
왼쪽에서 오른쪽: to right
오른쪽에서 왼쪽: to left
위에서 아래: to bottom
아래에서 위: to top
북동쪽 방향 대각선: to top right 또는 to right top
동남쪽 방향 대각선: to bottom right 또는 to right bottom
남서쪽 방향 대각선: to bottom left 또는 to left bottom
북서쪽 방향 대각선: to top left 또는 to left top
그라데이션의 각도를 세세하게 조절하고 싶다면 <to 방향> 대신 육십분법으로 <숫자deg>나 호도법으로 <숫자rad> 문법을 사용해 보세요. 숫자 안의 각도를 소수점 아래로 미세한 조정이 가능합니다. 아래는 예시입니다.
북쪽 방향: 0deg
북동쪽 방향: 45deg
동쪽 방향: 90deg
남동쪽 방향: 135deg
남쪽 방향: 180deg
남서쪽 방향: 225deg
서쪽 방향: 270deg
북서쪽 방향: 315deg
상기의 문법을 동시에 사용한 예시입니다. {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)"
그라데이션 기능입니다}}}
헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다. ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
{{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||
안녕하세요 여러분
헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.
서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)를 중첩으로 사용해 만들 수 있습니다. ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
중첩된 그라데이션
퍼센테이지를 적용할 수 도 있습니다. ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33%, #f67280 66%, #f64d5f 66%)"
{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
모든 목차에는 toc 앵커가 있습니다. [[문서명#toc]]을 사용하면 해당 문서의 목차로 이동하는 링크가 생깁니다. 예시) 나무위키:문법 도움말/심화#toc
모든 문단에는 s-문단번호 앵커와 문단이름 앵커가 있습니다. [[문서명#s-n]]을 사용하면 해당 문서의 n번째 문단으로 이동하는 링크가 생깁니다. 또한 [[문서명#문단 이름]]을 사용하면 해당 문서의 해당 문단으로 이동하는 링크가 생깁니다. 문단을 추가하거나 삭제하면 문단번호가 변화하니 문단번호 앵커는 쉽게 변할 수 있습니다. 그러나 문단이름은 변하는 경우가 상대적으로 적어 더 안정적입니다. 물론 문단이름도 변할 수 있어서 완전한 것은 아닙니다. 예시) 나무위키:문법 도움말/심화#s-1, 나무위키:문법 도움말/심화#개요
모든 각주에는 fn-각주번호 또는 fn-각주이름 앵커가 있습니다. [[문서명#fn-n]]을 사용하면 해당 문서의 n번째 각주로 이동하는 링크가 생기고, [[문서명#fn-A]]을 사용하면 해당 문서의 A라는 각주로 이동하는 링크가 생깁니다. 예시) 나무위키:문법 도움말/심화#fn-1, 나무위키:문법 도움말/심화#fn-A
모든 각주가 삽입된 본문에는 rfn-각주번호 앵커가 있습니다. [[문서명#rfn-n]]을 사용하면 해당 문서의 n번째 각주가 삽입된 곳으로 이동하는 링크가 생깁니다. 여기에는 각주번호가 아닌 각주이름은 사용할 수 없습니다. 예시) 나무위키:문법 도움말/심화#rfn-1, 나무위키:문법 도움말/심화#rfn-2
분류 문서의 속한 문서 목록에는 category-'이름공간' 앵커가 있습니다. 하위 분류에는 category-분류 앵커가 있습니다.
단, 나무위키 스킨 설정에서 '고정형 내비게이션 바'를 사용하는 경우 해당 기능 특성상 앵커 이동 위치의 내용이 가려지는 현상이 발생합니다. (A (1))
기술적인 문제로 일반적인 하이퍼링크 문법으로는 해당 문서로 통하는 정상적인 하이퍼링크를 만들 수 없습니다. 이럴 때는 해당 문자 앞에 \(백슬래시)를 넣어 줘야 합니다. 단, 한글 윈도우에서는 백슬래시 기호가 원화 기호로 보인다는 점을 기억하세요. #나 맨 끝의 ]가 제목에 들어간 문서에 한해서 맨 끝에 #를 넣어 줘도 됩니다.
다른 편집자를 위해서 틀:링크시 주의를 달아 줘도 됩니다. 해당 틀을 작성할 때 위키 문법상 \를 2개 더 입력해야 안내문에 \가 정상적으로 출력이 되니 유의하십시오.
단, /는 예외적으로 \를 앞에 입력해도 정상 출력이 안 됩니다. 이때는 [[문서:(/으로 시작하는 문서명)]]과 같이 디폴드 이름공간인 "문서:"를 붙이시면 됩니다.(2) 여러 편법들(3)을 이용할 수도 있지만 문서 이름공간을 붙이는 것이 정석이면서도 훨씬 더 편리합니다.
일반 텍스트 사이에 코드를 넣거나, 해당 텍스트에 마크업이 적용되지 않도록 할 수 있습니다.(5)
{{{텍스트}}}
"{{{"와 "}}}"안에 들어간 텍스트는 마크업이 적용되지 않고, 이렇게 고정폭 글꼴로 표시됩니다. 텍스트 사이에 코드를 넣는 경우나 이 문법 도움말 문서처럼 특정 마크업을 설명할 때 사용됩니다. 주의: 기술적인 문제로 인해 "{{{"와 "}}}" 사이에 "{" 또는 "}"를 3개 이상 연속으로 사용할 수 없습니다. {, {{, }, }}는 정상적으로 출력되며, 사이에 띄어쓰기가 있는 경우에도 정상적으로 출력됩니다. 다만 중괄호를 열고 닫는 것이 짝이 맞는 경우엔 작동합니다. 시연
참고: 한 문자에만 마크업을 적용되지 않게 하려면 그 문자 바로 앞에 \(역슬래시)를 넣으면 됩니다. 문법 도움말 기본편 참조.
주의: 캡션 내에서 [[내용|출력]] 형태 링크를 쓰면 문법이 깨질 수 있습니다. 또한 2019년 2월 현재 편집 중 미리보기를 할 때는 캡션이 회색으로 보이며 표 위가 아닌 밑으로 내려오는 버그가 존재합니다. 주의: 이미지와 동영상의 경우, border를 포함한 테이블의 width이 이미지나 동영상의 width(youtube 영상은 기본 640) 이상이여야 영상이 짤리지 않습니다.
이미지 또는 동영상과 같은 컨텐츠를 셀 안에 삽입할 때 생기는 상하 5px, 좌우 10px의 기본 셀 여백을 다음 문법을 이용해 제거할 수 있습니다. {{{#!wiki style="margin: -5px -10px"
}}} -10px"까지 쓰고 반드시 줄을 바꿔줘야 합니다. 가끔씩 상하에 -4px의 기본 여백을 제거해야되는 경우도 있습니다.아래는 예시입니다.
이미지를 셀 안에 삽입할 때 기본 넓이 100%를 설정한 상태에서 최대 넓이를 적용하시려면 다음 문법을 이용해 설정하실 수 있습니다. {{{#!wiki style="display:inline-block; max-width: 값px;"
}}} max-width: 값px;"까지 쓰고 반드시 줄을 바꿔줘야 합니다. 그리고 display:inline-block;를 삭제하시면 이미지가 무조건 왼쪽으로 정렬됩니다.
다만 위 문법은 가끔식 원하는 넓이 값이 안 나오는 경우가 있습니다. 해당 경우 아래의 문법을 사용해보시길 바랍니다. {{{#!wiki style="display:block; margin:0 auto; max-width: 값px;"
}}} 이때 이미지를 가운데로 정렬시키며 이미지를 오른쪽으로 정렬해야 하는 경우에는 margin 값에 '0 0 0 auto'를 주시면 됩니다.아래는 예시입니다.
접기가 위치한 틀의 최소 세로폭(min-height)을 나무위키 기본 한줄 높이 1.5em와 margin: ... -5px에서 지워진 5px을 더한 값으로 설정하여 일반적인 한줄 표 높이와 동일하게 맞춥니다.
기존 문법 <^|1><height=32> {{{#!wiki style="margin:0 -10px -5px" (내부 내용)}}}의 height=32 옵션은 브라우저나 위키 스킨 설정에 따라 내부 글자 폰트의 크기가 달라지므로 일정한 높이를 구현할수 없어 일정한 크기를 보장할 수 없기 때문에 좋지 않습니다.
결과
여백 제거 미적용
[ 펼치기 · 접기 ]
내용내용내용내용내용내용내용내용
내용내용내용내용내용내용내용내용
여백 제거 적용
[ 펼치기 · 접기 ]
내용내용내용내용내용내용내용내용
내용내용내용내용내용내용내용내용
응용 2: 여러 접기를 한 행에 넣기
표의 한 칸에 여러 접기 틀을 합쳐 넣을 수 있습니다.
문법
주의: 틀 안의 내용이 충분히 커야 합니다. [ 문법 펼치기 · 접기 ]||<width=300><#090> '''{{{#fff 표 제목}}}''' ||
|| {{{#!wiki style="display:inline-block"
{{{#!folding [ 틀 1 ]
틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}}}}{{{#!wiki style="display:inline-block"
{{{#!folding [ 틀 2 ]
틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}}}}{{{#!wiki style="display:inline-block"
{{{#!folding [ 틀 3 ]
틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}}}} ||
결과
표 제목
[ 틀 1 ]틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용
[ 틀 2 ]틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용
[ 틀 3 ]틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용
위의 방식을 그대로 쓰면 펼치기 접기 버튼의 간격이 좁습니다. 간격을 확보하기 위한 방법이 있습니다. 아래 두방법을 같이 적용하는 것이 가장 좋습니다. 예) 틀:대한민국 관련 문서
방법 1
버튼 대괄호 좌우에 띄어쓰기가 아닌 공백 문자(13)을 넣으면 그 크기만큼 간격이 생깁니다.
문법
[ 문법 펼치기 · 접기 ]||<width=300><#090> '''{{{#fff 표 제목}}}''' ||
|| {{{#!wiki style="display:inline-block"
{{{#!folding ⠀[ 틀 1 ]⠀
틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}}}}{{{#!wiki style="display:inline-block"
{{{#!folding ⠀[ 틀 2 ]⠀
틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}}}}{{{#!wiki style="display:inline-block"
{{{#!folding ⠀[ 틀 3 ]⠀
틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}}}} ||
결과
표 제목
⠀[ 틀 1 ]⠀틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용
⠀[ 틀 2 ]⠀틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용
⠀[ 틀 3 ]⠀틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용
방법 2
접기 틀 바깥의 wiki 틀에 min-width:(숫자)% 옵션을 줍니다. 최소한 (숫자)%의 너비를 보장하게 하는 옵션으로 숫자는 19(가로 5항목)~26(가로 3항목) 정도가 적당합니다. 표가 800px이상이거나, 100% 등 너비가 넓을 때 좋습니다.
{{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} 나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다. 글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
{{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}} 번짐이 없으면 그림자 효과가 됩니다.
{{{#!html <span style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색">서술할 내용</span>}}} 나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다. 글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
위의 그림자 효과를 응용한 방식입니다. 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다. 이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다.
{{{#!wiki style="원하는 서식 목록"
서식이 적용된 텍스트}}} 원하는 서식에 입력할 수 있는 것들은 다음과 같습니다. 한 서식을 입력한 다음에 ;(세미콜론)을 입력하여 다음 서식과 구분합니다. 또한 세미콜론 뒤에 공란을 입력하지 않아도 정상적인 출력이 가능합니다. 여기서 (수치)는 정수값을 의미하며, 음수값도 적용이 됩니다. calc( 수치 단위 )로 할 경우 해당 식을 계산하여 처리도 가능하나, 덧셈과 뺄셈은 기호 근처에 띄어쓰기가 추가로 필요합니다.
테두리: border-(방향):(선 굵기)px (선 스타일) (색상)
예1: 상우하좌 각각 5, 10, 15, 20px 굵기의 테두리 border:1px solid; border-width:5px 10px 15px 20px 예2: 전방향 1px이지만 윗부분은 5px border:1px solid; border-top:5px solid
방향: top=위, bottom=아래, right=오른쪽, left=왼쪽, 공백=전방향.
선 굵기: thin, medium, thick = 각각 1, 3, 5px, 또는 직접 입력 XXpx(반드시 px를 붙일 것)
선 스타일
none
solid
double
dotted
dashed
inset
outset
groove
ridge
선 색상: 지정 하지 않을 경우의 색상은 글씨 색깔을 따라 갑니다. 이를 활용하여 다크모드 대응도 가능합니다.
배경 색: background-color:(색상)
둥근 모서리: border-radius:(수치)px
예시
border-radius:10px : 모든 방향 10px
border-radius:10px 20px : 좌상, 우하는 10px, 우상, 좌하는 20px
border-radius:5px 10px 20px : 좌상부터 시계방향으로 5px 10px 20px (좌하는 기본 5px)
border-radius:5px 10px 20px 40px : 좌상부터 시계방향으로 5px 10px 20px 40px
틀 안의 여백: padding-(방향):(수치)px
기본값은 padding:0px
틀 밖의 여백: margin-(방향):(수치)px 또는 margin:(북쪽&남쪽 공통 적용 수치)px (동쪽&서쪽 공통 적용 수치)px 또는 margin:(북쪽 수치)px (동쪽 수치)px (남쪽 수치)px (서쪽 수치)px}
기본값은 margin:0px margin:0px auto로 주었을 경우 표 밖의 가로 여백을 자동으로 맞춥니다. 즉, 표의 화면 가운데 정렬이 됩니다. 이 방법을 사용하면 표의 셀 내부에 이미지를 삽입할 때 여백을 없애는 것이 가능하며 양수값을 사용하면 여백이 추가되며, 음수 값을 사용할 경우 여백이 줄어듭니다.
문법
문법 미사용 ||<tan>[[파일:나무위키:로고1.png]]||
문법 사용 ||<tan>{{{#!wiki style="margin:-5px -10px"
[[파일:나무위키:로고1.png]]}}}||
위와 같이 '틀:다른 뜻 설명'에 <span style="font-family: monospace;">@설명@</span>이 선언되어 있으므로 '설명'은 '틀:다른 뜻 설명'의 매개변수가 됩니다. 틀이 삽입될 문서 내에서 매개변수를 이용하기 위해서는 매개변수=값의 형태로 값을 넘겨주면 됩니다. '값' 자리에 아무것도 입력하지 않으면 아무것도 출력되지 않습니다. 또한, '값'에 해당하는 문자열에 쉼표(,)가 포함되어 있을 경우 제대로 표시되지 않습니다. 쉼표 앞에 백슬래시를 붙여 \,로 쓰면 해결됩니다. 디폴트 매개 변수는 <span style="font-family: monospace;">@매개변수=디폴트값@</span> 형태로 선언합니다.(20) 이해를 돕기 위해 '틀:다른 뜻 설명'의 원문을 변형하여 보겠습니다.
주의: 나무마크(나무위키 자체 문법)에는 매개변수를 사용할 수 없습니다. 예를 들어, 셀의 배경색에 <span style="font-family: monospace;">||< bgcolor=@ 배경색=#00a495@ >||</span> 과 같은 매개변수를 지정할 수 없습니다.
(A) 각주이름 앵커 (2) 매크로 문단에 후술된 pagecount(문서) 문법을 생각한다면, 나무위키: 등 명시된 네임스페이스와 달리, 일반 문서의 네임스페이스인 문서:는 디폴트값이기 때문에 표제어에서 볼 수 없었다는 것을 눈치챌 수 있습니다. (3) 모양이 비슷한 전각 문자(＃, ／, ＼, ｜, ］)로 리다이렉트 만들거나, 상위 문서의 제목에 /가 없다는 가정 하에 [[../문서명]]을 사용하기 등 (4) 문단 번호 링크 시 끝 문자에 #이 붙은 효과가 나므로 백슬래시가 따로 필요하지 않습니다. (5) 마크업 언어에 관한 설명은 해당 문서 참조. 프로그래밍과 거리가 먼 사람이라 이해가 가지 않으신다면, 위키 한정으로는 그냥 "위키 문법이 미적용된다"고 이해하셔도 좋습니다. (6) 정확히는 인용문 여백이 기존에 쉼표 있다가 사라진 흔적 남은것이 수정된 이후 기준. (7) 나무위키의 사용자 수와 같습니다. (8) 더미 문서는 '더미:'으로 시작하지만 휴지통 문서와 달리 네임스페이스의 종류가 아닙니다. (9) Ruby 코드는 하술한 문법 강조를 이용해야 합니다. (10) 상하 10px, 2022.05. 기준 (11) 상하 5px, 좌우 10px, 2022.05. 기준 (12) 표 테두리 경계선 및 텍스트 크기의 변화 등의 이유로 텍스트가 중심에서 떨어지거나 경계선의 굵기가 굵어지는 등의 문제가 발생할 시에는 문제가 생긴 방향의 여백 제거값에서 -1을 더하면 됩니다. 예시) -10px에서 -11px로, -5px에서 -6px로, 0에서 -1px로. (13) '⠀': 점자 패턴 공백 ' ': 전각 공백 등등 (14) <b> 태그랑 차이 없음. (15) <i> 태그랑 차이 없음. (16) 이상한 것을 느꼈을텐데, 나무위키에서 제공하는 문법인 취소선을 쓰면 마우스를 올렸을 때 취소선이 사라지고 회색 글자만 보이지만, 이 태그는 글자 자체에 취소선을 입히는 것이다. 그러니 취소선가리기를 사용해도 이 html태그를 이용한 취소선은 사라지지 않는다. (17) 2016년 7월 27일 확인 (18) 원래는 그냥 튀어 나왔으나, 2019년 10월 말 경부터 변경. (19) 글자 크기를 세밀하게 조정. {{{+? }}}나 {{{-? }}}과는 별개의 수치로 지정되며 소숫점도 가능하다. 사용 가능이 확인된 단위는 pt, em이 있는 것이 확인. (20) C++, Python 등에서 디폴트 매개 변수를 선언하는 방법과 유사합니다.