제이위키의 규정
기본방침 (문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침 · 운영 관리 방침) · 편집지침 · 커뮤니티 가이드라인 · 동음이의 리다이렉트 요청
 제이위키의 도움말
FAQ · 도움말 (사이트 소개 · 저작권 · 운영진 · 단축키 · 편집 · 문법 ( · HTML · CSS) · · 분류 · 등급 (등급 목록) · 동음이의) · 유저가이드 (기초문법 · 고급문법 · 정치 창작 팁 · 전쟁 창작 팁 · 판타지 창작 팁 · 언어 창작 팁 · 종교 창작 팁) · 권리침해 · 다른 위키와의 차이점
 제이위키의 운영
운영진 (관리자 · 중재자) · 관리자 선거 (2018 · 2019 · 2021) · 투명성 보고서 · 재정 보고서
 제이위키의 인정단체
인정단체 · 에른스트의 아무튼 공방 (아무거나 월간공방) · 그리다 · 감성위키 · 와르샤와웍스 · 연필이 닿는 곳 · 철통팀 · 오펜시브 프로젝트 팀
 제이위키의 앙케이트
이 창작이 대단하다! (2021 세계관 · 2021 창작자 · 2020 세계관 · 2020 창작자 · 2020 편의성) · 연말시리즈 (2022 · 2023)
이 문서는 제이위키의 도움말입니다.

이 문서는 제이위키 초보자를 위한 문서로, 훌륭한 기여자 분들의 기여를 언제나 기다립니다.

사용자 김찬위키독에서 직접 작성했던 HTML 문법[1] 문서 내용을 백업하였습니다. 제이위키에서는 필요 없거나 작동하지 않는 내용은 제외하였습니다.

HTML이란?

하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어입니다.[2] 주로 CSS, JS와 함께 웹 코딩에 사용됩니다.

이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.

모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.[3] 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.

표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.

HTML에서 요소들 사이의 간격 구분
margin
border
padding
content
padding
border
margin

이 뒤로 나올 코드들에는 margin, border, padding이라는 개념들이 자주 등장합니다. 이에 대해 정확히 알고 넘어가면 좋습니다. 표에는 서로의 위아래로만 구분이 되어 있지만 위아래뿐 아니라 상하좌우 모든 방향을 둘러쌉니다.

  • content는 대부분의 요소들이 차지하는 공간입니다. 텍스트, 이미지, 링크 등 사실상 margin과 border, padding을 제외한 모든 것들이 content에 포함된다고 볼 수 있습니다.
  • padding은 border로 둘러싸여진 하나의 오브젝트(object) 내부의 공간을 말합니다.
  • border는 요소의 테두리를 구성합니다. border가 하나의 오브젝트(object)에서 가장 바깥 부분을 담당합니다.
  • margin은 HTML 문서에서 가장 바깥쪽 여백, 즉 오브젝트(object)에 포함되지 않는 나머지 모든 공간을 말합니다. 두 오브젝트가 공유하는 margin 여백은 더해지지 않고 하나로 합쳐집니다. 예를 들어 양옆으로 나란히 놓여진 오브젝트의 좌우 margin이 각각 10px일 때, 이 10px이 더해져서 20px로 보이는 것이 아니라 둘이 합쳐져 10px로 보이게 됩니다. 만일 한쪽이 더 크면 큰쪽으로 보입니다.

태그 목록

미디어위키 문법에서는 일부 HTML 태그를 지원하며, 위키 시스템 자체에 있는 독립적인 태그도 몇 있습니다.

태그 설명
지원하는 HTML 태그[4]
<div> {{div}} 여기서 div는 division의 약자로, 이름 그대로 가상의 레이아웃을 만들어 레이아웃을 나누는 데 사용됩니다. 어쩌면 웹 디자인에서 가장 많이 쓰이는 태그이기도 합니다. 쉽게 말해 한 줄 전부를 차지하는 박스를 생성하는 태그라고 생각하면 편합니다.
<span> {{span}} 위 div의 인라인 버전입니다. display 속성으로 구분할 수 있는데, div는 한 줄 전체를 차지하는 block 속성이 기본값이고, span은 감싼 부분만을 차지하는 inline 속성이 기본값입니다. 쉽게 말해 일정 구역을 묶는 태그라고 생각하면 편합니다.
<p> - 텍스트 라인을 선언하는 태그입니다. 실질적으로 위 div, span과 큰 차이는 없습니다.
<br> -[5] 개행 태그입니다.
<strong> <b> {{bold}} 볼드체 태그입니다. 자체 '''위키 문법'''이 있으므로 거의 쓰이지 않습니다. 위키 문법은 시스템상 후자를 사용합니다.
<em> <i> - 이탤릭체 태그입니다. 자체 ''위키 문법''이 있으므로 거의 쓰이지 않습니다. 위키 문법은 시스템상 후자를 사용합니다.
<del> <s> {{--}} 취소선 태그입니다. 후자 사용을 권장합니다. 후자의 경우 마우스를 위에 올리면 취소선이 사라집니다.
<ins> <u> {{u}} 밑줄 태그입니다. 후자 사용을 권장합니다.
<mark> {{mark}}[6] 하이라이트 태그입니다.
<ruby> <rt> <rp> {{ruby}} 루비 문자(ruby)를 입력할 수 있는 태그입니다.
<table> <caption> <tr> <th> <td> - 표를 만들 때 쓰는 태그들입니다. 미디어위키에는 자체적인 표 문법이 있으므로 보다 복잡한 이 태그를 쓸 일은 거의 없습니다.
<pre> {{pre}} 위키 문법이 무효화되는 코드 블록을 생성하는 태그입니다.
<code> {{code}} 짧은 코드를 묶는 태그입니다. pre나 nowiki와 달리 문법을 무효화는 기능은 없습니다.
<ul> <ol> <li> - 목록(리스트)을 만드는 태그들입니다. <ul>는 순서 없는 목록, <ol>은 순서 있는 목록을 뜻합니다. 자체 위키 문법(*#)이 있으므로 거의 쓰이지 않습니다.
<dt> <dl> - 정의 목록을 만드는 태그들입니다. 자체 위키 문법(:;)이 있으므로 거의 쓰이지 않습니다.
위키 자체 태그
<center> {{center}} 글자를 가운데로 정렬하는 태그입니다. 이렇게 감싼 부분은 문장의 중간에 있더라도 그 부분만 새로운 줄이 되어 개행됩니다.
<ref> <references> {{ref}}[7] {{각주}} 각주(주석)에 사용되는 태그들입니다. 전자는 각주 버튼을 본문 중간에 삽입하는 역할을, 후자는 그러한 각주들을 목록으로 보여 주는 역할을 합니다.
<nowiki> {{nowiki}} {{nowiki2}} 위키 문법을 무효화하는 태그입니다. pre와 다르게 짧은 단어나 구에 적절합니다.
<html> - 이 태그 사이에 입력된 내용에는 모든 HTML 기능이 활성화됩니다. 당연히 그만큼 위험한 탓에 제이위키에서는 보안을 위해 이 태그가 포함된 문서는 오직 관리자만이 편집할 수 있도록 보호됩니다.[8]
<templatestyles> {{css}} 틀 스타일 사용을 선언하는 태그입니다.
<no-comment-streams> {{댓글 금지}} 문서의 댓글 기능을 잠그는 태그입니다.

그림자 효과

그림자 효과 예시

사용하는 HTML 속성

  • text-shadow - span, div 등 텍스트에 쓰이는 태그의 하위 속성으로 쓰입니다.
  • box-shadow - div, table 등 기본 display 값이 block인 요소들에 쓰입니다.
<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색];">작성할 내용</span>

텍스트 그림자를 가로세로 2px 움직여 그림자가 진 것과 같은 효과를 냅니다. 그림자 색은 글자 색보다 명도가 살짝 높은 색으로 설정하면 자연스럽습니다.

입력 출력
<span style="text-shadow: 2px 2px 0px gray; color: black;">그림자가 있는 글자</span> 그림자가 있는 글자
그림자가 있는 글자

가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다.

입력 출력
<span style="text-shadow: -2px -2px 0px gray; color: black;">왼쪽 위 그림자</span> 왼쪽 위 그림자
왼쪽 위 그림자
입력 출력
<span style="text-shadow: 2px 0px 0px gray; color: black;">오른쪽 그림자</span> 오른쪽 그림자
오른쪽 그림자

그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]이 한 그룹입니다. 그림자 효과를 하나 더 추가하고 싶다면 맨끝 그림자색 뒤에 쉼표(,)를 달고 띄어쓰기하여 그룹을 추가 작성하면 됩니다. 마지막 효과의 맨끝 그림자색 뒤에는 세미콜론(;)을 달아야 합니다.

여러 개의 그림자 효과를 이용하여 텍스트에 글리치 효과를 줄 수도 있습니다.

입력 출력
<span style="text-shadow: 1px 0px 0px #ff0000, 0px 1px 0px #0000ff, -1px 0px 0px #ffff00;">글리치 텍스트</span> 글리치 텍스트
글리치 텍스트

text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다.

입력 출력
<span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span> 글씨 그림자
<div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div>
블록 그림자

네온 효과

이 효과는 틀:네온 글씨로 쉽게 사용할 수 있습니다.

네온 효과 예시

<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]; color: #[글자 색];">작성할 내용</span>

위의 text shadow 코드를 활용한 효과입니다. 가로세로를 움직이지 않은 채로 그림자를 번지게 하면 네온사인과 같은 효과를 냅니다.

일반적으로 가로움직임=0, 세로움직임=0, 번짐정도=6으로 설정하면 네온 효과를 낼 수 있습니다. 배경 색과 그림자 색이 같으면 티가 나지 않습니다.

입력 출력
<span style="text-shadow: 0px 0px 6px #ff0000; color: #000000;">네온이 반짝반짝</span> 네온이 반짝반짝
네온이 반짝반짝

외곽선 효과

이 효과는 틀:글씨 테두리로 쉽게 사용할 수 있습니다.

외곽선 효과 예시

<span style="text-shadow: [외곽선 두께]px 0px #[외곽선 색], 0px [외곽선 두께]px #[외곽선 색], -[외곽선 두께]px 0px #[외곽선 색], 0px -[외곽선 두께]px #[외곽선 색], [외곽선 두께]px [외곽선 두께]px #[외곽선 색], [외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px [외곽선 두께]px #[외곽선 색]; color:#[글자 색]">작성할 내용</span>

마찬가지로 text shadow 코드를 활용한 효과입니다. 텍스트의 모든 방향으로 그림자의 두께를 두껍게 해 외곽선처럼 보이게 하는 효과를 냅니다.

코드에 외곽선을 8번이나 작성하게 되는데, 앞에서부터 순서대로 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 순서입니다. 8개 외곽선을 같은 색으로 전부 입력해야 일반적인 외곽선 효과가 나타납니다.

입력 출력
<span style="text-shadow: 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000, 1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, -1px 1px #ff0000; color: #ffffff;">굉장히 중요해 보이는 착각</span> 굉장히 중요해 보이는 착각
굉장히 중요해 보이는 착각

블러 효과

이 효과는 틀:블러로 쉽게 사용할 수 있습니다.

[ 주의 ]
블러 틀은 text-shadow가 아닌 blur라는 클래스를 사용합니다. 이 클래스는 마우스를 올리기만 해도 그 내용을 볼 수 있지만, 텍스트 레이아웃이 기존과 매우 달라지게 됩니다. 이를 해결하기 위해 새로 만들어진 틀이 틀:블러4입니다.

블러 효과 예시

<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px [글자 색]; color: transparent;">내용</span>

네온 효과를 만들 때처럼 텍스트의 그림자를 제자리에서 번지게 한 뒤, 원래 글자의 색을 투명하게 하면 번진 그림자만 남아 마치 블러 처리를 한 것과 같은 효과를 줄 수 있습니다. 따라서 코드도 네온 효과에 텍스트를 투명하게 하는 코드 하나만 추가되었을 뿐입니다.

이것이 그 예시입니다. (← 드래그 해보세요.) 글자 색과 글자 배경 색을 같게 하는 것처럼 그냥 보면 그것이 무슨 내용인지 못 알아보게 하는 용도로 쓰입니다. PC에서는 마우스로 드래그, 모바일에서는 꾹 눌러 선택하면 그제야 내용을 볼 수 있습니다. 주요한 스포일러가 포함된 내용에 적용하면 좋습니다.

문단명에도 적용해 문단 자체를 감출 수도 있지만 어차피 목차에서는 효과 없이 그대로 보이므로 목차를 보이지 않게끔 설정하지 않으면 별 의미는 없습니다.

텍스트의 크기가 크거나 두꺼울수록 번짐 정도를 많이 주어야 합니다. 당장 아래 예시만 해도 일반 텍스트와 18pt+볼드체 텍스트에 같은 효과를 적용하였더니 후자의 텍스트는 크고 두꺼워 글자를 읽을 수 있는 정도가 되었습니다.

입력 출력
<span style="text-shadow: 0px 0px 6px #000000; color: transparent">블러일까요? 모자이크일까요?</span> 블러일까요? 모자이크일까요?
블러일까요? 모자이크일까요?

루비 문자

이 태그는 틀:ruby로 쉽게 사용할 수 있습니다.

(ぼく)(きみ)(おな)(ゆむ)()ていた。

사용하는 HTML 태그

  • ruby - 루비 문자가 시작될 위치를 지정합니다. rt 태그 안에 적힌 문자가 이 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
  • rt - 루비 문자를 지정합니다. 이 태그 안에 적힌 문자가 ruby 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
<ruby>작성할 내용<rt>루비 문자로 작성할 내용</rt></ruby>

주로 후리가나 표기[9]에 사용됩니다.

입력 출력
<ruby>루비 문자 예시입니다<rt>이것이 루비 문자입니다</rt></ruby> 루비 문자 예시입니다이것이 루비 문자입니다
루비 문자 예시입니다이것이 루비 문자입니다

위 루비 문자 예시로 작성한 후리가나(()仮名(がな))처럼 한 단어에 루비 문자를 구분하여 작성하고 싶을 땐 루비 문자 코드를 그만큼 여러 번 입력하면 됩니다.

입력 출력
<ruby>僕<rt>ぼく</rt></ruby>と<ruby>君<rt>きみ</rt></ruby>は<ruby>同<rt>おな</rt></ruby>じ<ruby>夢<rt>ゆむ</rt></ruby>を<ruby>見<rt>み</rt></ruby>ていた。 ぼくきみおなゆむていた。
ぼくきみおなゆむていた。

하이라이트

이 태그는 틀:mark로 쉽게 사용할 수 있습니다.[10]

하이라이트 예시

사용하는 HTML 태그

  • mark
<mark>내용</mark>

형광펜으로 칠한 것과 같은 강조 효과를 줍니다. 글자의 배경 색을 바꾸는 것과는 다릅니다. 글자의 배경 색을 바꾸는 코드는 입니다. 물론 겉보기에는 차이가 없으므로 배경 색으로 응용하시는 것도 좋습니다.

입력 출력
형<mark>관</mark>펜으로 오타를 칠<mark>헤</mark>보세요. 펜으로 오타를 칠보세요.
펜으로 오타를 칠보세요.

테두리

테두리 예시

사용하는 HTML 속성

  • border
<span style="border: [테두리 두께]px [테두리 모양] [테두리 색];">내용</span>
<span style="border-width: [테두리 두께]px; border-color: [테두리 색]; border-style: [테두리 모양];">내용</span>

위의 두 코드는 출력값이 같습니다.

텍스트 또는 표에 테두리를 추가합니다. border는 태그가 아닌 속성이라서 태그 안에 사용되어야 합니다. 텍스트에 사용될 때는 주로 span 태그[11]에, 표에 사용될 때는 {|[12]나 ! 또는 |[13]에 쓰입니다.

테두리 두께는 px 단위로 설정하며 최소는 1입니다. px 단위 외에 thin, medium, thick을 입력할 수도 있습니다. 각각 1px, 3px, 5px로 적용됩니다.

테두리 모양은 solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden의 10가지가 있습니다. 테두리의 두께가 1px 이하이거나 테두리의 색이 검은색일 시 solid, dotted, dashed, none, hidden의 5가지만이 정상 적용됩니다. 나머지 5가지는 2px 이상의 두께이거나 검은색이 아닐 때만 정상 작동합니다.

solid
dotted
dashed
double
groove

ridge
inset
outset
none
hidden
[ 각 모양별 설명 펼치기 · 접기 ]
  • solid는 가장 일반적인 테두리입니다. 실선으로 표시됩니다.
  • dotted는 점선으로 표시됩니다.
  • dashed는 조금 긴 점선으로 표시됩니다.
  • double은 두 줄의 실선으로 표시됩니다.
  • groove는 3차원의 입체적인 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • ridge는 3차원의 능선 효과가 있는 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • inset은 3차원의 내지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • outset은 3차원의 외지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • none은 테두리를 없앱니다.
  • hidden은 테두리가 존재는 하나 표시되지 않습니다.

테두리 색은 헥스코드 #6자리 또는 HTMl 색상 이름을 입력합니다.

border 속성 안에 두께, 모양, 색을 한번에 지정할 수 있습니다. 이렇게 입력할 경우 상하좌우 모든 방향에 한번에 적용됩니다.

입력 출력
<span style="border: 1px solid #000000;">테두리입니다.</span> 테두리입니다.
<span style="border-width: 1px; border-color: #000000; border-style: solid;">테두리입니다.</span>

위, 아래, 오른쪽, 왼쪽 4방향 각각 따로 다른 테두리를 적용할 수도 있습니다. 이 경우 border가 아니라 border-width, border-color, border-style의 3가지 속성을 전부 사용해야 합니다. 기본적인 입력 방식은 border로 사용할 때와 같으나, 한 속성 내부에 몇 개의 값을 입력하느냐에 따라 출력이 조금씩 달라집니다.

border-width 속성을 예로 들면 border-width: 1px; 이렇게 값을 하나만 입력하면 상하좌우 모든 방향에 1px의 테두리가 적용되는 것이고, border-width: 1px 2px;처럼 두 개의 값을 입력하면 위, 아래에 1px과 양옆에 2px, border-width: 1px 2px 3px;처럼 세 개의 값을 입력하면 위에 1px과 양옆에 2px, 아래에 3px, border-width: 1px 2px 3px 4px;처럼 네 개의 값을 입력하면 위에 1px, 오른쪽에 2px, 아래에 3px, 왼쪽에 4px이 적용됩니다.

1개의 값 모든 방향
2개의 값 왼쪽부터 순서대로 위아래, 양옆
3개의 값 왼쪽부터 순서대로 위, 양옆, 아래
4개의 값 왼쪽부터 순서대로 위, 오른쪽, 아래, 왼쪽(시계 방향)

입력 출력
<div style="display: inline-block; border-width: 2px; border-color: #000000; border-style: solid dotted;">위아래는 실선이지만<br />양옆은 점선입니다.</div>
위아래는 실선이지만
양옆은 점선입니다.

위 문법에 추가로 border-radius 속성을 입력하면 테두리의 모서리를 둥글게 처리할 수 있습니다. px 단위로 입력하면 10px 정도가 상한선이지만, % 단위로 입력하면 너비와 높이 비율에 따라 타원과 원까지 둥글게 만들 수 있습니다.

입력 출력
<span style="border: 1px solid #000000; border-radius: 10px;">둥글둥글</span> 둥글둥글

모든 border 속성은 테이블(표)에도 똑같이 적용할 수 있습니다. 그러나 border-radius 속성만은 그냥 입력하면 적용이 안 되는데, 이는 제이위키 테이블의 border-collapse 속성의 기본값이 collapse로 되어 있기 때문입니다. border-radius를 적용하기 위해 border-collapse를 separate로 함께 적용해 주면 정상적으로 기능합니다. 그러나 이렇게 해도 직사각형의 테두리 실루엣이 남게 되어 지저분합니다. 따라서 테이블에 border-radius를 지정할 땐 border를 투명하게 하고 대신 배경 색으로 둥긂을 표시하는 것이 낫습니다.

입력 출력
{|class="wikitable" style="border: 1px solid #000000; border-collapse: separate; border-radius: 10px;"
|-
|테이블도 둥글둥글
|}
테이블도 둥글둥글

padding 속성을 이용하면 테두리의 크기를 조절할 수 있습니다.

입력 출력
<span style="border: 1px solid #000000; border-radius: 10px; padding: 5px;">더 크게 둥글둥글</span> 더 크게 둥글둥글

그라데이션 배경

이 문서의 내용 중 전체 또는 일부는 나무위키:문법 도움말/심화 문서의 2.4번 문단에서 가져왔습니다.
그라데이션 예시

사용하는 HTML 속성

  • background-image[14] - 배경 색이나 이미지를 지정합니다. span, div 등 텍스트 관련 태그나 {| 등 테이블의 하위 속성으로 쓰입니다.
    • linear-gradient - 배경 색을 선형 그라데이션으로 지정합니다.
    • radial-gradient - 배경 색을 원형 그라데이션으로 지정합니다.
    • -webkit-background-clip - 배경 색이 어느 범위의 콘텐츠까지 적용될지를 지정합니다.
span style="background-image: linear-gradient([방향], #[시작색], #[끝색]);">내용</span>
span style="background-image: radial-gradient([모양] at [위치]% [높이]%, [원 안쪽 색], [원 중간 색], [원 바깥쪽 색]);"

두 번째 문법은 원 모양 그라데이션입니다.

  • 모양 : circle 또는 elipse입니다. 기본값은 elipse입니다.
  • 위치 : 0%일 시 원의 중심이 최좌측, 100%일 시 최우측
  • 높이 : 0%일 시 원의 중심이 최상단, 100%일 시 최하단

배경에 그라데이션을 넣는 기능입니다.

그라데이션의 방향을 조절하고 싶다면 [방향] 자리에 아래 코드를 입력하세요.

  • 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]를 입력할 수 있습니다. 입력한 숫자만큼 각도를 조절할 수 있으며 각도는 위쪽 방향 0도부터 시계 방향으로 돌아갑니다. 아래는 예시입니다.

  • 0deg : 북쪽
  • 45deg : 북동쪽
  • 90deg : 동쪽
  • 135deg : 동남쪽
  • 180deg : 남쪽
  • 225deg : 남서쪽
  • 270deg : 서쪽
  • 315deg : 북서쪽

헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4);"
안녕하세요
여러분

헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%);"
안녕하세요
여러분

오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.

입력 출력
  • style="background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%);"
  • style="background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%);"
  • style="background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%);"
  • style="background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%);"
30%
58%
70%
70%

서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient([방향], #[헥스 코드 1], #[헥스 코드 2])를 중첩으로 사용해 만들 수 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f);"
중첩된
그라데이션

반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.

입력 출력
style="background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"
반복 그라데이션

rgba(R, G, B, 투명도) 등 투명도를 지정하면 그라데이션끼리 중첩도 가능합니다.

입력 출력
[ 문법 펼치기 · 접기 ]
style="background-color: hsl(34, 53%, 82%); background-image: 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 );"
투명도 그라데이션

원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다. linear-gradient와 혼용할 수도 있습니다. 원 색을 하나만 입력할 시 단색의 원이 나옵니다.

입력 출력
style="background-image: radial-gradient(circle at 50% 50%, #000000 20%, transparent 20%), linear-gradient(to top, #808080, #808080);"
위치 50%
높이 50%
크기 20%
style="background-image: radial-gradient(circle at 50% 0%, #000000 20%, transparent 20%), linear-gradient(to top, #000000, #808080);"
위치 50%
높이 0%
크기 20%

코닉(극좌표) 그라데이션을 사용하면 파이모양 그래프를 만들 수 있습니다. 일부 브라우저는 코닉 그라데이션을 표시하지 못할 수도 있습니다.

  • conic-gradient(#EEE 70%, transparent 0)
  • conic-gradient(#EEE 30%, transparent 0)
70%
30%

background-clip은 background 태그로 정해진 배경 색이나 이미지를 콘텐츠의 어느 범위까지 적용할지를 지정해 주는 속성입니다. 여기에 background-clip을 text로 지정해 주고 텍스트 색을 투명으로 지정해 주면 배경이 아닌 텍스트에만 그라데이션을 적용할 수 있습니다.

제이위키에서는 -webkit-background-clip으로 입력해야 합니다. 텍스트 색은 color: transparent;로 입력하면 투명해집니다.

틀:font-gradient로 쉽게 사용할 수도 있습니다.

입력 출력
<span style="background-image: linear-gradient(135deg, red, orange, yellow, green, blue, violet); -webkit-background-clip: text; color: transparent;">무지개색 총공격이다!</span> 무지개색 총공격이다!
무지개색 총공격이다!

테이블 관련

각각의 행에 서로 다른 개수의 셀을 넣으려 한다면 서로 다른 셀 개수의 최소공배수만큼의 열을 추가한 뒤 적절히 셀을 합쳐야 합니다.

예를 들어 윗줄은 3칸, 아랫줄은 4칸의 테이블을 만들려 한다면 총 열의 개수는 12개입니다. 그리고 윗줄은 4칸마다, 아랫줄은 3칸마다 셀 합치기를 해주면 원하는 대로 나옵니다.

3
4

그러나 단순히 이렇게 할 경우, 셀 합치기를 하지 않은 12개 칸 전부가 있는 줄이 없다면 각 셀의 너비를 아무리 조절해 봐도 편집 완료 후 문서를 볼 때 테이블이 아래와 같이 나타날 겁니다. 셀의 너비가 일정하지 않은 모습을 볼 수 있습니다.

3
4

이럴 때 해당 테이블 태그에 style 속성으로 table-layout: fixed를 지정해 주면 셀 합치기를 하지 않은 줄이 없어도 각 줄의 셀들의 너비가 셀 개수만큼 적절히 배분됩니다. 단 반드시 테이블 전체의 너비가 지정되어 있어야 합니다. max-width, min-width 등의 가변 너비도 안 됩니다.

3
4

글꼴

이 속성은 틀:폰트로 쉽게 사용할 수 있습니다.

이것은
다양한
글꼴들의
예시
입니다.

사용하는 HTML 속성

  • font-family
<span style="font-family: [글꼴];">내용</span>

글꼴을 바꾸는 속성입니다. 문서의 가독성을 해칠 수 있으므로 권장드리지 않습니다.

글꼴은 기본적으로 5가지가 제공됩니다.

  • Sans-serif는 세리프 장식이 없는 폰트입니다.
  • Serif는 세리프 장식이 있는 글꼴입니다.
  • Monospace는 프로그램 코드 예제를 보여줄 때 주로 사용되는 글꼴입니다.
  • Cursive는 손으로 쓴 듯한 글꼴입니다. 한글은 궁서체로 출력됩니다.
  • Fantasy는 화려한 양식의 글꼴입니다. 한글은 지원하지 않습니다.

모바일 환경에서는 완벽하게 작동하지 않습니다. Serif만이 정상 작동하며 Monospace는 특유의 자간만, Cursive는 영어만 작동하고 글꼴도 다르며, Fantasy도 글꼴이 다릅니다. Cursive와 Fantasy는 일부 웹브라우저에서는 아예 작동하지 않기도 합니다.

입력 출력
<span style="font-family: sans-serif;">이 문장은 Sans-serif 글꼴로 작성되었습니다.</span> 이 문장은 Sans-serif 글꼴로 작성되었습니다.
이 문장은 Sans-serif 글꼴로 작성되었습니다.
<span style="font-family: serif;">이 문장은 Serif 글꼴로 작성되었습니다.</span> 이 문장은 Serif 글꼴로 작성되었습니다.
이 문장은 Serif 글꼴로 작성되었습니다.
<span style="font-family: monospace;">이 문장은 Monospace 글꼴로 작성되었습니다.</span> 이 문장은 Monospace 글꼴로 작성되었습니다.
이 문장은 Monospace 글꼴로 작성되었습니다.
<span style="font-family: cursive;">이 문장은 Cursive 글꼴로 작성되었습니다.</span> 이 문장은 Cursive 글꼴로 작성되었습니다.
이 문장은 Cursive 글꼴로 작성되었습니다.
<span style="font-family: fantasy;">이 문장은 Fantasy 글꼴로 작성되었습니다.</span> 이 문장은 Fantasy 글꼴로 작성되었습니다.
이 문장은 Fantasy 글꼴로 작성되었습니다.
  1. 2023년 이후 접속 불가
  2. 출처
  3. <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.
  4. 링크를 타고 가면 알 수 있듯이 아래 표 외에도 수많은 지원 태그가 있지만, 이 도움말에서는 실질적인 위키 편집에 자주 쓰이는 태그들 위주로 안내합니다.
  5. 개행 태그 자체는 틀로 없지만, 틀이나 표 내에서 ↵ Enter 두 번 개행을 구현하기 위한 {{brbr}}은 존재합니다.
  6. 이 틀은 <mark> 태그가 아니라 노란 배경색을 사용합니다.
  7. ref 틀은 글씨 크기가 10pt로 고정됩니다. 제이위키의 각주 말풍선 기능에서 보이는 기본 글씨 크기가 매우 작기 때문에 10pt로 고정하는 것입니다. 물론 10pt가 제이위키 자체의 기본 글씨 크기는 아닙니다.
  8. 보호되지 않은 문서에서 이 태그를 사용하면 애초에 편집 저장이 불가능합니다.
  9. 일본어 등에서 한자 위에 히라가나를 통해 작은 글씨로 발음을 추가 표기하는 것.
  10. 단, 틀:mark는 아래 설명할 <mark> 태그가 아니라 텍스트 배경 색 효과를 사용하였습니다.
  11. div 태그에 쓰이기도 합니다. div와 span의 차이점이라면 span은 줄바꿈이 적용되지 않으며 텍스트에만 적용되고, div는 줄바꿈이 적용되며 텍스트가 아닌 한 줄 전체에 적용됩니다.
  12. 표 전체에 테두리를 적용할 때.
  13. 셀 하나에만 테두리를 적용할 때.
  14. 그냥 background 속성으로 입력해도 상관 없습니다.
이 문서의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.