|
|
2번째 줄: |
2번째 줄: |
| {{김찬}} | | {{김찬}} |
| {{김찬 연습장}} | | {{김찬 연습장}} |
| [[위키독]]에서 직접 작성했던 [http://ko.kimchan.wikidok.net/wp-d/6167f1e20d7785f2221a7774/View HTML 문법] 문서 내용 백업<br>
| |
| [[제이위키]]에서는 필요 없거나 작동하지 않는 내용은 제외함
| |
| {{목차}}
| |
| == 개요 ==
| |
| 이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.
| |
|
| |
| 모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.<ref>{{fs|10|{{ffms|<nowiki><[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]></nowiki>}}의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.}}</ref> 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.
| |
|
| |
| 표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.
| |
|
| |
| <div style="display: inline-block; width: 270px; text-align: center; margin: 10px 0px;"><span style="color: black;"><strong>HTML에서 요소들 사이의 간격 구분</strong></span>
| |
| <div style="borborder-width: 2px 20px; border-style: solid; border-color: #f9cc9d; background-color: #f9cc9d; padding: 5px 20px; color: black;"><strong>margin</strong>
| |
| <div style="border-width: 2px 20px; border-style: solid; border-color: #fddd9b; background-color: #fddd9b; padding: 5px; color: black;"><strong>border</strong>
| |
| <div style="border-width: 2px 20px; border-style: solid; border-color: #c3d08b; background-color: #c3d08b; padding: 5px; color: black;"><strong>padding</strong>
| |
| <div style="border-width: 2px 20px; border-style: solid; border-color: #8cb6c0; background-color: #8cb6c0; padding: 5px; color: black;"><strong>content</strong></div>
| |
| <strong>padding</strong></div>
| |
| <strong>border</strong></div>
| |
| <strong>margin</strong></div>
| |
| </div>
| |
|
| |
| 이 뒤로 나올 코드들에는 margin, border, padding이라는 개념들이 자주 등장합니다. 이에 대해 정확히 알고 넘어가면 좋습니다. 표에는 서로의 위아래로만 구분이 되어 있지만 위아래뿐 아니라 상하좌우 모든 방향을 둘러쌉니다.
| |
|
| |
| * {{c|#8cb6c0|'''content'''}}는 대부분의 요소들이 차지하는 공간입니다. 텍스트, 이미지, 링크 등 사실상 margin과 border, padding을 제외한 모든 것들이 content에 포함된다고 볼 수 있습니다.
| |
| * {{c|#c3d08b|'''padding'''}}은 border로 둘러싸여진 하나의 오브젝트(object) 내부의 공간을 말합니다.
| |
| * {{c|#fddd9b|'''border'''}}는 요소의 테두리를 구성합니다. border가 하나의 오브젝트(object)에서 가장 바깥 부분을 담당합니다.
| |
| * {{c|#f9cc9d|'''margin'''}}은 HTML 문서에서 가장 바깥쪽 여백, 즉 오브젝트(object)에 포함되지 않는 나머지 모든 공간을 말합니다.
| |
|
| |
| == 그림자 효과 ==
| |
| <span style="text-shadow: 2px 2px gray; color: black;">그림자 효과 예시</span>
| |
|
| |
| 사용하는 HTML 속성
| |
| * '''text-shadow''' - span, div 등 텍스트에 쓰이는 태그의 하위 속성으로 쓰입니다.
| |
| * '''box-shadow''' - div, table 등 기본 display 값이 block인 요소들에 쓰입니다.
| |
|
| |
| <pre><span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색];">작성할 내용</span></pre>
| |
|
| |
| 텍스트 그림자를 가로세로 2px 움직여 그림자가 진 것과 같은 효과를 냅니다. 그림자 색은 글자 색보다 명도가 살짝 높은 색으로 설정하면 자연스럽습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: 2px 2px 0px gray; color: black;">그림자가 있는 글자</span></nowiki>
| |
| |<span style="text-shadow: 2px 2px 0px gray;">그림자가 있는 글자</span>
| |
| |-
| |
| |<span style="text-shadow: 2px 2px 0px gray; font-size: 18pt; color: black;">'''그림자가 있는 글자'''</span>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: -2px -2px 0px gray; color: black;">왼쪽 위 그림자</span></nowiki>
| |
| |<span style="text-shadow: -2px -2px 0px gray; color: black;">왼쪽 위 그림자</span>
| |
| |-
| |
| |<span style="text-shadow: -2px -2px 0px gray; font-size: 18pt; color: black;">'''왼쪽 위 그림자'''</span>
| |
| |}
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: 2px 0px 0px gray; color: black;">오른쪽 그림자</span></nowiki>
| |
| |<span style="text-shadow: 2px 0px 0px gray; color: black;">오른쪽 그림자</span>
| |
| |-
| |
| |<span style="text-shadow: 2px 0px 0px gray; font-size: 18pt; color: black;">'''오른쪽 그림자'''</span>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]이 한 그룹입니다. 그림자 효과를 하나 더 추가하고 싶다면 맨끝 그림자색 뒤에 쉼표(,)를 달고 띄어쓰기하여 그룹을 추가 작성하면 됩니다. 마지막 효과의 맨끝 그림자색 뒤에는 세미콜론(;)을 달아야 합니다.
| |
|
| |
| 여러 개의 그림자 효과를 이용하여 텍스트에 글리치 효과를 줄 수도 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span></nowiki>
| |
| |<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span>
| |
| |-
| |
| |<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00; font-size: 18pt;">'''글리치 텍스트'''</span>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki><span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span></nowiki>
| |
| |<span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span>
| |
| |-
| |
| |<nowiki><div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div></nowiki>
| |
| |<div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div>
| |
| |}
| |
| === 네온 효과 ===
| |
| 이 효과는 [[틀:네온 글씨]]로 쉽게 사용할 수 있습니다.
| |
|
| |
| {{neon|red|#373a3c|네온 효과 예시}}
| |
|
| |
| <pre><span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]; color: #[글자 색];">작성할 내용</span></pre>
| |
|
| |
| 위의 text shadow 코드를 활용한 효과입니다. 가로세로를 움직이지 않은 채로 그림자를 번지게 하면 네온사인과 같은 효과를 냅니다.
| |
|
| |
| 일반적으로 가로움직임=0, 세로움직임=0, 번짐정도=6으로 설정하면 네온 효과를 낼 수 있습니다. 배경 색과 그림자 색이 같으면 티가 나지 않습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: 0px 0px 6px #ff0000; color: #000000;">네온이 반짝반짝</span></nowiki>
| |
| |<span style="text-shadow: 0px 0px 6px #ff0000; color: #000000;">네온이 반짝반짝</span>
| |
| |-
| |
| |<span style="text-shadow: 0px 0px 6px #ff0000; color: #000000;">{{fs|18|'''네온이 반짝반짝'''}}</span>
| |
| |}
| |
| === 외곽선 효과 ===
| |
| 이 효과는 [[틀:글씨 테두리]]로 쉽게 사용할 수 있습니다.
| |
|
| |
| {{border|black|white|외곽선 효과 예시}}
| |
|
| |
| <pre><span style="text-shadow: [외곽선 두께]px 0px #[외곽선 색], 0px [외곽선 두께]px #[외곽선 색], -[외곽선 두께]px 0px #[외곽선 색], 0px -[외곽선 두께]px #[외곽선 색], [외곽선 두께]px [외곽선 두께]px #[외곽선 색], [외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px [외곽선 두께]px #[외곽선 색]; color:#[글자 색]">작성할 내용</span></pre>
| |
|
| |
| 마찬가지로 text shadow 코드를 활용한 효과입니다. 텍스트의 모든 방향으로 그림자의 두께를 두껍게 해 외곽선처럼 보이게 하는 효과를 냅니다.
| |
|
| |
| 코드에 외곽선을 8번이나 작성하게 되는데, 앞에서부터 순서대로 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 순서입니다. 8개 외곽선을 같은 색으로 전부 입력해야 일반적인 외곽선 효과가 나타납니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><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></nowiki>
| |
| |<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>
| |
| |-
| |
| |<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;">{{fs|18|'''굉장히 중요해 보이는 착각'''}}</span>
| |
| |}
| |
| === 블러 효과 ===
| |
| 이 효과는 [[틀:블러]]로 쉽게 사용할 수 있습니다.
| |
| {{widen|-12}}
| |
| {{나무접기2|id=blur-caution|title=[ 주의 ]|블러 틀은 text-shadow가 아닌 blur라는 {{u|클래스}}를 사용합니다. 이 클래스는 마우스를 올리기만 해도 그 내용을 볼 수 있지만, 텍스트 레이아웃이 기존과 매우 달라지게 됩니다.}}
| |
| {{widen}}
| |
| {{neon|#373a3c|{{tp}}|블러 효과}} 예시
| |
|
| |
| <pre><span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px [글자 색]; color: transparent;">내용</span></pre>
| |
|
| |
| 네온 효과를 만들 때처럼 텍스트의 그림자를 제자리에서 번지게 한 뒤, 원래 글자의 색을 투명하게 하면 번진 그림자만 남아 마치 블러 처리를 한 것과 같은 효과를 줄 수 있습니다. 따라서 코드도 네온 효과에 텍스트를 투명하게 하는 코드 하나만 추가되었을 뿐입니다.
| |
|
| |
| {{글배경|배경색=#373a3c|내용=이것이 그 예시입니다.}} (← 드래그 해보세요.) 글자 색과 글자 배경 색을 같게 하는 것처럼 그냥 보면 그것이 무슨 내용인지 못 알아보게 하는 용도로 쓰입니다. PC에서는 마우스로 드래그, 모바일에서는 꾹 눌러 선택하면 그제야 내용을 볼 수 있습니다. 주요한 스포일러가 포함된 내용에 적용하면 좋습니다.
| |
|
| |
| 문단명에도 적용해 문단 자체를 감출 수도 있지만 어차피 목차에서는 효과 없이 그대로 보이므로 목차를 보이지 않게끔 설정하지 않으면 별 의미는 없습니다.
| |
|
| |
| 텍스트의 크기가 크거나 두꺼울수록 번짐 정도를 많이 주어야 합니다. 당장 아래 예시만 해도 일반 텍스트와 18pt+볼드체 텍스트에 같은 효과를 적용하였더니 후자의 텍스트는 크고 두꺼워 글자를 읽을 수 있는 정도가 되었습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="text-shadow: 0px 0px 6px #000000; color: transparent">블러일까요? 모자이크일까요?</span></nowiki>
| |
| |<span style="text-shadow: 0px 0px 6px #000000; color: transparent">블러일까요? 모자이크일까요?</span>
| |
| |-
| |
| |<span style="text-shadow: 0px 0px 6px #000000; color: transparent">{{fs|18|'''블러일까요? 모자이크일까요?'''}}</span>
| |
| |}
| |
|
| |
| == 루비 문자 ==
| |
| 이 태그는 [[틀:ruby]]로 쉽게 사용할 수 있습니다.
| |
|
| |
| {{ruby|僕|ぼく}}と{{ruby|君|きみ}}は{{ruby|同|おな}}じ{{ruby|夢|ゆむ}}を{{ruby|見|み}}ていた。
| |
|
| |
| 사용하는 HTML 태그
| |
| * '''ruby''' - 루비 문자가 시작될 위치를 지정합니다. rt 태그 안에 적힌 문자가 이 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
| |
| * '''rt''' - 루비 문자를 지정합니다. 이 태그 안에 적힌 문자가 ruby 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
| |
|
| |
| <pre><ruby>작성할 내용<rt>루비 문자로 작성할 내용</rt></ruby></pre>
| |
|
| |
| 주로 후리가나 표기<ref>{{fs|10|일본어 등에서 한자 위에 히라가나를 통해 작은 글씨로 발음을 추가 표기하는 것.}}</ref>에 사용됩니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><ruby>루비 문자 예시입니다<rt>이것이 루비 문자입니다</rt></ruby></nowiki>
| |
| |<ruby>루비 문자 예시입니다<rt>이것이 루비 문자입니다</rt></ruby>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><ruby>루비 문자 예시입니다<rt>이것이 루비 문자입니다</rt></ruby></span>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 위 루비 문자 예시로 작성한 후리가나({{ruby|振|ふ}}り{{ruby|仮名|がな}})처럼 한 단어에 루비 문자를 구분하여 작성하고 싶을 땐 루비 문자 코드를 그만큼 여러 번 입력하면 됩니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><ruby>僕<rt>ぼく</rt></ruby>と<ruby>君<rt>きみ</rt></ruby>は<ruby>同<rt>おな</rt></ruby>じ<ruby>夢<rt>ゆむ</rt></ruby>を<ruby>見<rt>み</rt></ruby>ていた。</nowiki>
| |
| |<ruby>僕<rt>ぼく</rt></ruby>と<ruby>君<rt>きみ</rt></ruby>は<ruby>同<rt>おな</rt></ruby>じ<ruby>夢<rt>ゆむ</rt></ruby>を<ruby>見<rt>み</rt></ruby>ていた。
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><ruby>僕<rt>ぼく</rt></ruby>と<ruby>君<rt>きみ</rt></ruby>は<ruby>同<rt>おな</rt></ruby>じ<ruby>夢<rt>ゆむ</rt></ruby>を<ruby>見<rt>み</rt></ruby>ていた。</span>
| |
| |}
| |
|
| |
| == 하이라이트 ==
| |
| 이 태그는 [[틀:mark]]로 쉽게 사용할 수 있습니다.<ref>{{fs|10|단, [[틀:mark]]는 아래 설명할 <tt><nowiki><mark></nowiki></tt> 태그가 아니라 텍스트 배경 색 효과를 사용하였습니다.}}</ref>
| |
|
| |
| <mark>하이라이트</mark> 예시
| |
|
| |
| 사용하는 HTML 태그
| |
| * '''mark'''
| |
|
| |
| <pre><mark>내용</mark></pre>
| |
|
| |
| 형광펜으로 칠한 것과 같은 강조 효과를 줍니다. 글자의 배경 색을 바꾸는 것과는 다릅니다. 글자의 배경 색을 바꾸는 코드는 <span style="background-color: 배경색;">입니다. 물론 겉보기에는 차이가 없으므로 배경 색으로 응용하시는 것도 좋습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki>형<mark>관</mark>펜으로 오타를 칠<mark>헤</mark>보세요.</nowiki>
| |
| |형<mark>관</mark>펜으로 오타를 칠<mark>헤</mark>보세요.
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;">형<mark>관</mark>펜으로 오타를 칠<mark>헤</mark>보세요.</span>
| |
| |}
| |
|
| |
| == 테두리 ==
| |
| {{글배경|테두리=1px solid black|내용=테두리 예시}}
| |
|
| |
| 사용하는 HTML 속성
| |
| * '''border'''
| |
|
| |
| <pre><span style="border: [테두리 두께]px [테두리 모양] [테두리 색];">내용</span></pre>
| |
| <pre><span style="border-width: [테두리 두께]px; border-color: [테두리 색]; border-style: [테두리 모양];">내용</span></pre>
| |
|
| |
| 위의 두 코드는 출력값이 같습니다.
| |
|
| |
| 텍스트 또는 표에 테두리를 추가합니다. border는 태그가 아닌 속성이라서 태그 안에 사용되어야 합니다. 텍스트에 사용될 때는 주로 span 태그<ref>{{fs|10|div 태그에 쓰이기도 합니다. div와 span의 차이점이라면 span은 줄바꿈이 적용되지 않으며 텍스트에만 적용되고, div는 줄바꿈이 적용되며 텍스트가 아닌 한 줄 전체에 적용됩니다.}}</ref>에, 표에 사용될 때는 <nowiki>{|</nowiki><ref>{{fs|10|표 전체에 테두리를 적용할 때.}}</ref>나 <nowiki>! 또는 |</nowiki><ref>{{fs|10|셀 하나에만 테두리를 적용할 때.}}</ref>에 쓰입니다.
| |
|
| |
| 테두리 두께는 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 이상의 두께이거나 검은색이 아닐 때만 정상 작동합니다.
| |
| <div style="color: black;">
| |
| <div style="display: inline-block; border: 10px solid gray; padding: 4px; margin: 4px;">solid</div>
| |
| <div style="display: inline-block; border: 10px dotted gray; padding: 4px; margin: 4px;">dotted</div>
| |
| <div style="display: inline-block; border: 10px dashed gray; padding: 4px; margin: 4px;">dashed</div>
| |
| <div style="display: inline-block; border: 10px double gray; padding: 4px; margin: 4px;">double</div>
| |
| <div style="display: inline-block; border: 10px groove gray; padding: 4px; margin: 4px;">groove</div><br>
| |
| <div style="display: inline-block; border: 10px ridge gray; padding: 4px; margin: 4px;">ridge</div>
| |
| <div style="display: inline-block; border: 10px inset gray; padding: 4px; margin: 4px;">inset</div>
| |
| <div style="display: inline-block; border: 10px outset gray; padding: 4px; margin: 4px;">outset</div>
| |
| <div style="display: inline-block; border: 10px none gray; padding: 4px; margin: 4px;">none</div>
| |
| <div style="display: inline-block; border: 10px hidden gray; padding: 4px; margin: 4px;">hidden</div>
| |
| </div>
| |
| {{나무접기2|id=border-information|title=[ 각 모양별 설명 펼치기 · 접기 ]|{{lmr|ul}}
| |
| * solid는 가장 일반적인 테두리입니다. 실선으로 표시됩니다.
| |
| * dotted는 점선으로 표시됩니다.
| |
| * dashed는 조금 긴 점선으로 표시됩니다.
| |
| * double은 두 줄의 실선으로 표시됩니다.
| |
| * groove는 3차원의 입체적인 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
| |
| * ridge는 3차원의 능선 효과가 있는 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
| |
| * inset은 3차원의 내지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
| |
| * outset은 3차원의 외지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
| |
| * none은 테두리를 없앱니다.
| |
| * hidden은 테두리가 존재는 하나 표시되지 않습니다.}}
| |
| {{widen}}
| |
| 테두리 색은 헥스코드 #6자리 또는 [[틀:HTML 색 이름|HTMl 색상 이름]]을 입력합니다.
| |
|
| |
| border 속성 안에 두께, 모양, 색을 한번에 지정할 수 있습니다. 이렇게 입력할 경우 상하좌우 모든 방향에 한번에 적용됩니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki><span style="border: 1px solid #000000;">테두리입니다.</span></nowiki>
| |
| |rowspan="2"|<span style="border: 1px solid #000000;">테두리입니다.</span>
| |
| |-
| |
| |<nowiki><span style="border-width: 1px; border-color: #000000; border-style: solid;">테두리입니다.</span></nowiki>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 위, 아래, 오른쪽, 왼쪽 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이 적용됩니다.
| |
|
| |
| {|class="wikitable"
| |
| |-
| |
| |1개의 값||모든 방향
| |
| |-
| |
| |2개의 값||왼쪽부터 순서대로 위아래, 양옆
| |
| |-
| |
| |3개의 값||왼쪽부터 순서대로 위, 양옆, 아래
| |
| |-
| |
| |4개의 값||왼쪽부터 순서대로 위, 오른쪽, 아래, 왼쪽(시계 방향)
| |
| |}
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki><div style="display: inline-block; border-width: 2px; border-color: #000000; border-style: solid dotted;">위아래는 실선이지만<br />양옆은 점선입니다.</div></nowiki>
| |
| |<div style="display: inline-block; border-width: 2px; border-color: #000000; border-style: solid dotted;">위아래는 실선이지만<br />양옆은 점선입니다.</div>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 위 문법에 추가로 border-radius 속성을 입력하면 테두리의 모서리를 둥글게 처리할 수 있습니다. px 단위로 입력하면 10px 정도가 상한선이지만, % 단위로 입력하면 너비와 높이 비율에 따라 타원과 원까지 둥글게 만들 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki><span style="border: 1px solid #000000; border-radius: 10px;">둥글둥글</span></nowiki>
| |
| |<span style="border: 1px solid #000000; border-radius: 10px;">둥글둥글</span>
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 모든 border 속성은 테이블(표)에도 똑같이 적용할 수 있습니다. 그러나 border-radius 속성만은 그냥 입력하면 적용이 안 되는데, 이는 제이위키 테이블의 border-collapse 속성의 기본값이 collapse로 되어 있기 때문입니다. border-radius를 적용하기 위해 border-collapse를 separate로 함께 적용해 주면 정상적으로 기능합니다. 그러나 이렇게 해도 직사각형의 테두리 실루엣이 남게 되어 지저분합니다. 따라서 테이블에 border-radius를 지정할 땐 border를 투명하게 하고 대신 배경 색으로 둥긂을 표시하는 것이 낫습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>{|class="wikitable" style="border: 1px solid #000000; border-collapse: separate; border-radius: 10px;"</nowiki><br><nowiki>
| |
| |-</nowiki><br><nowiki>
| |
| |테이블도 둥글둥글</nowiki><br><nowiki>
| |
| |}</nowiki>
| |
| |
| |
| {|class="wikitable" style="border: 1px solid #000000; border-collapse: separate; border-radius: 10px;"
| |
| |-
| |
| |테이블도 둥글둥글
| |
| |}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| padding 속성을 이용하면 테두리의 크기를 조절할 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki><span style="border: 1px solid #000000; border-radius: 10px; padding: 5px;">더 크게 둥글둥글</span></nowiki>
| |
| |<span style="border: 1px solid #000000; border-radius: 10px; padding: 5px;">더 크게 둥글둥글</span>
| |
| |}
| |
|
| |
| == 그라데이션 배경 ==
| |
| {{안내문|color=gray|[[파일:CC 아이콘.png|20px|link=https://creativecommons.org/licenses/by-sa/3.0/deed.ko]] 이 문서의 내용 중 전체 또는 일부는 [https://namu.wiki/w/나무위키:문법%20도움말/심화 나무위키:문법 도움말/심화] 문서의 [https://namu.wiki/w/나무위키:문법%20도움말/심화#s-2.4 2.4번] 문단에서 가져왔습니다.}}
| |
|
| |
| <div style="margin: 15px 0px; padding: 5px; background-image: linear-gradient(to right, #ffb9b9, #fffdbb); color: black;">그라데이션 예시</div>
| |
|
| |
| 사용하는 HTML 속성
| |
| * background-image<ref>{{fs|10|그냥 background 속성으로 입력해도 상관 없습니다.}}</ref> - 배경 색이나 이미지를 지정합니다. span, div 등 텍스트 관련 태그나 {| 등 테이블의 하위 속성으로 쓰입니다.
| |
| ** linear-gradient - 배경 색을 선형 그라데이션으로 지정합니다.
| |
| ** radial-gradient - 배경 색을 원형 그라데이션으로 지정합니다.
| |
| ** -webkit-background-clip - 배경 색이 어느 범위의 콘텐츠까지 적용될지를 지정합니다.
| |
|
| |
| <pre>span style="background-image: linear-gradient([방향], #[시작색], #[끝색]);">내용</span></pre>
| |
| <pre>span style="background-image: radial-gradient([모양] at [위치]% [높이]%, [원 안쪽 색], [원 중간 색], [원 바깥쪽 색]);"</pre>
| |
|
| |
| 두 번째 문법은 원 모양 그라데이션입니다.
| |
| * 모양 : circle 또는 elipse입니다. 기본값은 elipse입니다.
| |
| * 위치 : 0%일 시 원의 중심이 최좌측, 100%일 시 최우측
| |
| * 높이 : 0%일 시 원의 중심이 최상단, 100%일 시 최하단
| |
|
| |
| 배경에 그라데이션을 넣는 기능입니다.
| |
|
| |
| 그라데이션의 방향을 조절하고 싶다면 [방향] 자리에 아래 코드를 입력하세요.
| |
| * <tt>to right</tt> : 왼쪽에서 오른쪽
| |
| * <tt>to left</tt> : 오른쪽에서 왼쪽
| |
| * <tt>to bottom</tt> : 위쪽에서 아래쪽
| |
| * <tt>to top</tt> : 아래쪽에서 위쪽
| |
| * <tt>to top right</tt> 또는 <tt>to right top</tt> : 북동쪽 대각선
| |
| * <tt>to bottom right</tt> 또는 <tt>to right bottom</tt> : 동남쪽 대각선
| |
| * <tt>to bottom left</tt> 또는 <tt>to left bottom</tt> : 남서쪽 대각선
| |
| * <tt>to top left</tt> 또는 <tt>to left top</tt> : 북서쪽 대각선
| |
|
| |
| 방향을 더 세세하게 조절하고 싶다면 [to 방향] 대신 [각도deg]를 입력할 수 있습니다. 입력한 숫자만큼 각도를 조절할 수 있으며 각도는 위쪽 방향 0도부터 시계 방향으로 돌아갑니다. 아래는 예시입니다.
| |
| * <tt>0deg</tt> : 북쪽
| |
| * <tt>45deg</tt> : 북동쪽
| |
| * <tt>90deg</tt> : 동쪽
| |
| * <tt>135deg</tt> : 동남쪽
| |
| * <tt>180deg</tt> : 남쪽
| |
| * <tt>225deg</tt> : 남서쪽
| |
| * <tt>270deg</tt> : 서쪽
| |
| * <tt>315deg</tt> : 북서쪽
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>style="background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4);"</nowiki>
| |
| |style="height: 90px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4);"|{{center|{{c|white|'''안녕하세요<br>여러분'''}}}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>style="background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%);"</nowiki>
| |
| |style="height: 90px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%);"|{{center|{{c|white|'''안녕하세요<br>여러분'''}}}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |
| |
| * <nowiki>style="background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%);"</nowiki>
| |
| * <nowiki>style="background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%);"</nowiki>
| |
| * <nowiki>style="background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%);"</nowiki>
| |
| * <nowiki>style="background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%);"</nowiki>
| |
| |
| |
| {|class="wikitable" style="width: 100%;"
| |
| |-
| |
| |style="background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%);"|{{right|{{c|#C9151E|'''30%'''}}}}
| |
| |-
| |
| |style="background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%);"|{{right|{{c|#C9151E|'''58%'''}}}}
| |
| |-
| |
| |style="background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%);"|{{right|{{c|#C9151E|'''70%'''}}}}
| |
| |-
| |
| |style="background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%);"|{{right|{{c|#C9151E|'''70%'''}}}}
| |
| |}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient([방향], #[헥스 코드 1], #[헥스 코드 2])를 중첩으로 사용해 만들 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>style="background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f);"</nowiki>
| |
| |style="height: 90px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f);"|{{center|{{c|white|'''중첩된<br>그라데이션'''}}}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>style="background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"</nowiki>
| |
| |style="height: 90px; background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"|{{center|{{border|black|white|'''반복 그라데이션'''}}}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| rgba(R, G, B, 투명도) 등 투명도를 지정하면 그라데이션끼리 중첩도 가능합니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |style="vertical-align: top;"|{{나무접기2|id=complex-grammar|title=[ 문법 펼치기 · 접기 ]|<nowiki>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 );"</nowiki>}}
| |
| |style="height: 90px; 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 );""|{{center|'''투명도 그라데이션'''}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다. linear-gradient와 혼용할 수도 있습니다. 원 색을 하나만 입력할 시 단색의 원이 나옵니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |<nowiki>style="background-image: radial-gradient(circle at 50% 50%, #000000 20%, transparent 20%), linear-gradient(to top, #808080, #808080);"</nowiki>
| |
| |style="height: 90px; background-image: radial-gradient(circle at 50% 50%, #000000 20%, transparent 20%), linear-gradient(to top, #808080, #808080);"|{{center|{{c|white|'''위치 50%<br>높이 50%<br>크기 20%'''}}}}
| |
| |-
| |
| |<nowiki>style="background-image: radial-gradient(circle at 50% 0%, #000000 20%, transparent 20%), linear-gradient(to top, #000000, #808080);"</nowiki>
| |
| |style="height: 90px; background-image: radial-gradient(circle at 50% 0%, #000000 20%, transparent 20%), linear-gradient(to top, #000000, #808080);"|{{center|{{c|white|'''위치 50%<br>높이 0%<br>크기 20%'''}}}}
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| background-clip은 background 태그로 정해진 배경 색이나 이미지를 콘텐츠의 어느 범위까지 적용할지를 지정해 주는 속성입니다. 여기에 background-clip을 text로 지정해 주고 텍스트 색을 투명으로 지정해 주면 배경이 아닌 텍스트에만 그라데이션을 적용할 수 있습니다.
| |
|
| |
| 제이위키에서는 -webkit-background-clip으로 입력해야 합니다. 텍스트 색은 color: transparent;로 입력하면 투명해집니다.
| |
|
| |
| [[틀:font-gradient]]로 쉽게 사용할 수도 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="background-image: linear-gradient(135deg, red, orange, yellow, green, blue, violet); -webkit-background-clip: text; color: transparent;">무지개색 총공격이다!</span></nowiki>
| |
| |<span style="background-image: linear-gradient(135deg, red, orange, yellow, green, blue, violet); -webkit-background-clip: text; color: transparent;">무지개색 총공격이다!</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="background-image: linear-gradient(135deg, red, orange, yellow, green, blue, violet); -webkit-background-clip: text; color: transparent;">무지개색 총공격이다!</span></span>
| |
| |}
| |
|
| |
| == 테이블 관련 ==
| |
| 각각의 행에 서로 다른 개수의 셀을 넣으려 한다면 서로 다른 셀 개수의 최소공배수만큼의 열을 추가한 뒤 적절히 셀을 합쳐야 합니다.
| |
|
| |
| 예를 들어 윗줄은 3칸, 아랫줄은 4칸의 테이블을 만들려 한다면 총 열의 개수는 12개입니다. 그리고 윗줄은 4칸마다, 아랫줄은 3칸마다 셀 합치기를 해주면 원하는 대로 나옵니다.
| |
|
| |
| {|class="wikitable" style="width: 350px; text-align: center;"
| |
| |-
| |
| |||||||||||||||||||||||
| |
| |-
| |
| |colspan="4"|3
| |
| |colspan="4"|삼
| |
| |colspan="4"|셋
| |
| |-
| |
| |colspan="3"|4
| |
| |colspan="3"|사
| |
| |colspan="3"|넷
| |
| |colspan="3"|四
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 그러나 단순히 이렇게 할 경우, 셀 합치기를 하지 않은 12개 칸 전부가 있는 줄이 없다면 각 셀의 너비를 아무리 조절해 봐도 편집 완료 후 문서를 볼 때 테이블이 아래와 같이 나타날 겁니다. 셀의 너비가 일정하지 않은 모습을 볼 수 있습니다.
| |
|
| |
| {|class="wikitable" style="width: 350px; text-align: center;"
| |
| |-
| |
| |colspan="4"|3
| |
| |colspan="4"|삼
| |
| |colspan="4"|셋
| |
| |-
| |
| |colspan="3"|4
| |
| |colspan="3"|사
| |
| |colspan="3"|넷
| |
| |colspan="3"|四
| |
| |}
| |
|
| |
| {{hr|none|color=black}}
| |
|
| |
| 이럴 때 해당 테이블 태그에 style 속성으로 table-layout: fixed를 지정해 주면 셀 합치기를 하지 않은 줄이 없어도 각 줄의 셀들의 너비가 셀 개수만큼 적절히 배분됩니다.
| |
|
| |
| {|class="wikitable" style="width: 350px; text-align: center; table-layout: fixed;"
| |
| |-
| |
| |colspan="4"|3
| |
| |colspan="4"|삼
| |
| |colspan="4"|셋
| |
| |-
| |
| |colspan="3"|4
| |
| |colspan="3"|사
| |
| |colspan="3"|넷
| |
| |colspan="3"|四
| |
| |}
| |
|
| |
| == 글꼴 ==
| |
| 이 속성은 [[틀:폰트]]로 쉽게 사용할 수 있습니다.
| |
|
| |
| {{폰트|sans-serif|이것은}}<br>
| |
| {{폰트|serif|다양한}}<br>
| |
| {{폰트|Monospace|글꼴들의}}<br>
| |
| {{폰트|cursive|예시}}<br>
| |
| {{폰트|fantasy|입니다.}}
| |
|
| |
| 사용하는 HTML 속성
| |
| * '''font-family'''
| |
|
| |
| <pre><span style="font-family: [글꼴];">내용</span></pre>
| |
|
| |
| 글꼴을 바꾸는 속성입니다. 문서의 가독성을 해칠 수 있으므로 '''권장드리지 않습니다.'''
| |
|
| |
| 글꼴은 기본적으로 5가지가 제공됩니다.
| |
| * {{폰트|sans-serif|Sans-serif}}는 세리프 장식이 없는 폰트입니다.
| |
| * {{폰트|serif|Serif}}는 세리프 장식이 있는 글꼴입니다.
| |
| * {{폰트|Monospace|Monospace}}는 프로그램 코드 예제를 보여줄 때 주로 사용되는 글꼴입니다.
| |
| * {{폰트|cursive|Cursive}}는 손으로 쓴 듯한 글꼴입니다. 한글은 궁서체로 출력됩니다.
| |
| * {{폰트|fantasy|Fantasy}}는 화려한 양식의 글꼴입니다. 한글은 지원하지 않습니다.
| |
|
| |
| 모바일 환경에서는 완벽하게 작동하지 않습니다. Serif만이 정상 작동하며 Monospace는 특유의 자간만, Cursive는 영어만 작동하고 글꼴도 다르며, Fantasy도 글꼴이 다릅니다. Cursive와 Fantasy는 일부 웹브라우저에서는 아예 작동하지 않기도 합니다.
| |
|
| |
| {|class="wikitable" style="width: 100%; table-layout: fixed;"
| |
| |-
| |
| !{{nobold|입력}}||{{nobold|출력}}
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="font-family: sans-serif;">이 문장은 Sans-serif 글꼴로 작성되었습니다.</span></nowiki>
| |
| |<span style="font-family: sans-serif;">이 문장은 Sans-serif 글꼴로 작성되었습니다.</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="font-family: sans-serif;">이 문장은 Sans-serif 글꼴로 작성되었습니다.</span></span>
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="font-family: serif;">이 문장은 Serif 글꼴로 작성되었습니다.</span></nowiki>
| |
| |<span style="font-family: serif;">이 문장은 Serif 글꼴로 작성되었습니다.</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="font-family: serif;">이 문장은 Serif 글꼴로 작성되었습니다.</span></span>
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="font-family: monospace;">이 문장은 Monospace 글꼴로 작성되었습니다.</span></nowiki>
| |
| |<span style="font-family: monospace;">이 문장은 Monospace 글꼴로 작성되었습니다.</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="font-family: monospace;">이 문장은 Monospace 글꼴로 작성되었습니다.</span></span>
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="font-family: cursive;">이 문장은 Cursive 글꼴로 작성되었습니다.</span></nowiki>
| |
| |<span style="font-family: cursive;">이 문장은 Cursive 글꼴로 작성되었습니다.</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="font-family: cursive;">이 문장은 Cursive 글꼴로 작성되었습니다.</span></span>
| |
| |-
| |
| |rowspan="2"|<nowiki><span style="font-family: fantasy;">이 문장은 Fantasy 글꼴로 작성되었습니다.</span></nowiki>
| |
| |<span style="font-family: fantasy;">이 문장은 Fantasy 글꼴로 작성되었습니다.</span>
| |
| |-
| |
| |<span style="font-size: 18pt; font-weight: bold;"><span style="font-family: fantasy;">이 문장은 Fantasy 글꼴로 작성되었습니다.</span></span>
| |
| |}
| |
|
| |
| == 각주 ==
| |
| {{각주}}
| |
| {{문서 가져옴|연습장:Kimchan|331280}}
| |