틀:글자 외곽선 편집하기

<!-- 틀:글자 외곽선 -->

<!-- 외곽선 출력 시작 -->
<includeonly><onlyinclude>font-family:{{#switch:{{lc:{{{폰트|M}}}}}
|b='SB Aggro B'
|m='SB Aggro M'
|#default='SB Aggro M'
}};
text-shadow:
{{#switch:{{{외곽선단계|{{{단계|1}}}}}}

|1=
{{{color|#0f4728}}} 3px 0 0,
{{{color|#0f4728}}} 2.8978px 0.7765px 0,
{{{color|#0f4728}}} 2.5981px 1.5px 0,
{{{color|#0f4728}}} 2.1213px 2.1213px 0,
{{{color|#0f4728}}} 1.5px 2.5981px 0,
{{{color|#0f4728}}} 0.7765px 2.8978px 0,
{{{color|#0f4728}}} 0 3px 0,
{{{color|#0f4728}}} -0.7765px 2.8978px 0,
{{{color|#0f4728}}} -1.5px 2.5981px 0,
{{{color|#0f4728}}} -2.1213px 2.1213px 0,
{{{color|#0f4728}}} -2.5981px 1.5px 0,
{{{color|#0f4728}}} -2.8978px 0.7765px 0,
{{{color|#0f4728}}} -3px 0 0,
{{{color|#0f4728}}} -2.8978px -0.7765px 0,
{{{color|#0f4728}}} -2.5981px -1.5px 0,
{{{color|#0f4728}}} -2.1213px -2.1213px 0,
{{{color|#0f4728}}} -1.5px -2.5981px 0,
{{{color|#0f4728}}} -0.7765px -2.8978px 0,
{{{color|#0f4728}}} 0 -3px 0,
{{{color|#0f4728}}} 0.7765px -2.8978px 0,
{{{color|#0f4728}}} 1.5px -2.5981px 0,
{{{color|#0f4728}}} 2.1213px -2.1213px 0,
{{{color|#0f4728}}} 2.5981px -1.5px 0,
{{{color|#0f4728}}} 2.8978px -0.7765px 0

|2=
{{{color|#0f4728}}} 4px 0 0,
{{{color|#0f4728}}} 3.9231px 0.7804px 0,
{{{color|#0f4728}}} 3.6955px 1.5307px 0,
{{{color|#0f4728}}} 3.3259px 2.2223px 0,
{{{color|#0f4728}}} 2.8284px 2.8284px 0,
{{{color|#0f4728}}} 2.2223px 3.3259px 0,
{{{color|#0f4728}}} 1.5307px 3.6955px 0,
{{{color|#0f4728}}} 0.7804px 3.9231px 0,
{{{color|#0f4728}}} 0 4px 0,
{{{color|#0f4728}}} -0.7804px 3.9231px 0,
{{{color|#0f4728}}} -1.5307px 3.6955px 0,
{{{color|#0f4728}}} -2.2223px 3.3259px 0,
{{{color|#0f4728}}} -2.8284px 2.8284px 0,
{{{color|#0f4728}}} -3.3259px 2.2223px 0,
{{{color|#0f4728}}} -3.6955px 1.5307px 0,
{{{color|#0f4728}}} -3.9231px 0.7804px 0,
{{{color|#0f4728}}} -4px 0 0,
{{{color|#0f4728}}} -3.9231px -0.7804px 0,
{{{color|#0f4728}}} -3.6955px -1.5307px 0,
{{{color|#0f4728}}} -3.3259px -2.2223px 0,
{{{color|#0f4728}}} -2.8284px -2.8284px 0,
{{{color|#0f4728}}} -2.2223px -3.3259px 0,
{{{color|#0f4728}}} -1.5307px -3.6955px 0,
{{{color|#0f4728}}} -0.7804px -3.9231px 0,
{{{color|#0f4728}}} 0 -4px 0,
{{{color|#0f4728}}} 0.7804px -3.9231px 0,
{{{color|#0f4728}}} 1.5307px -3.6955px 0,
{{{color|#0f4728}}} 2.2223px -3.3259px 0,
{{{color|#0f4728}}} 2.8284px -2.8284px 0,
{{{color|#0f4728}}} 3.3259px -2.2223px 0,
{{{color|#0f4728}}} 3.6955px -1.5307px 0,
{{{color|#0f4728}}} 3.9231px -0.7804px 0

|#default=
{{{color|#0f4728}}} 3px 0 0,
{{{color|#0f4728}}} 2.8978px 0.7765px 0,
{{{color|#0f4728}}} 2.5981px 1.5px 0,
{{{color|#0f4728}}} 2.1213px 2.1213px 0,
{{{color|#0f4728}}} 1.5px 2.5981px 0,
{{{color|#0f4728}}} 0.7765px 2.8978px 0,
{{{color|#0f4728}}} 0 3px 0,
{{{color|#0f4728}}} -0.7765px 2.8978px 0,
{{{color|#0f4728}}} -1.5px 2.5981px 0,
{{{color|#0f4728}}} -2.1213px 2.1213px 0,
{{{color|#0f4728}}} -2.5981px 1.5px 0,
{{{color|#0f4728}}} -2.8978px 0.7765px 0,
{{{color|#0f4728}}} -3px 0 0,
{{{color|#0f4728}}} -2.8978px -0.7765px 0,
{{{color|#0f4728}}} -2.5981px -1.5px 0,
{{{color|#0f4728}}} -2.1213px -2.1213px 0,
{{{color|#0f4728}}} -1.5px -2.5981px 0,
{{{color|#0f4728}}} -0.7765px -2.8978px 0,
{{{color|#0f4728}}} 0 -3px 0,
{{{color|#0f4728}}} 0.7765px -2.8978px 0,
{{{color|#0f4728}}} 1.5px -2.5981px 0,
{{{color|#0f4728}}} 2.1213px -2.1213px 0,
{{{color|#0f4728}}} 2.5981px -1.5px 0,
{{{color|#0f4728}}} 2.8978px -0.7765px 0

}}
{{#switch:{{{하단두께|{{{하단|0}}}}}}

|1=
, {{{color|#0f4728}}} -3px 4px 0
, {{{color|#0f4728}}} -2px 4px 0
, {{{color|#0f4728}}} -1px 4px 0
, {{{color|#0f4728}}} 0 4px 0
, {{{color|#0f4728}}} 1px 4px 0
, {{{color|#0f4728}}} 2px 4px 0
, {{{color|#0f4728}}} 3px 4px 0
, {{{color|#0f4728}}} -3px 5px 0
, {{{color|#0f4728}}} -2px 5px 0
, {{{color|#0f4728}}} -1px 5px 0
, {{{color|#0f4728}}} 0 5px 0
, {{{color|#0f4728}}} 1px 5px 0
, {{{color|#0f4728}}} 2px 5px 0
, {{{color|#0f4728}}} 3px 5px 0
, {{{color|#0f4728}}} -3px 6px 0
, {{{color|#0f4728}}} -2px 6px 0
, {{{color|#0f4728}}} -1px 6px 0
, {{{color|#0f4728}}} 0 6px 0
, {{{color|#0f4728}}} 1px 6px 0
, {{{color|#0f4728}}} 2px 6px 0
, {{{color|#0f4728}}} 3px 6px 0
, {{{그림자색|#062a18}}} -2px 7px 1px
, {{{그림자색|#062a18}}} -1px 7px 1px
, {{{그림자색|#062a18}}} 0 7px 1px
, {{{그림자색|#062a18}}} 1px 7px 1px
, {{{그림자색|#062a18}}} 2px 7px 1px

|2=
, {{{color|#0f4728}}} -4px 5px 0
, {{{color|#0f4728}}} -3px 5px 0
, {{{color|#0f4728}}} -2px 5px 0
, {{{color|#0f4728}}} -1px 5px 0
, {{{color|#0f4728}}} 0 5px 0
, {{{color|#0f4728}}} 1px 5px 0
, {{{color|#0f4728}}} 2px 5px 0
, {{{color|#0f4728}}} 3px 5px 0
, {{{color|#0f4728}}} 4px 5px 0
, {{{color|#0f4728}}} -4px 6px 0
, {{{color|#0f4728}}} -3px 6px 0
, {{{color|#0f4728}}} -2px 6px 0
, {{{color|#0f4728}}} -1px 6px 0
, {{{color|#0f4728}}} 0 6px 0
, {{{color|#0f4728}}} 1px 6px 0
, {{{color|#0f4728}}} 2px 6px 0
, {{{color|#0f4728}}} 3px 6px 0
, {{{color|#0f4728}}} 4px 6px 0
, {{{color|#0f4728}}} -4px 7px 0
, {{{color|#0f4728}}} -3px 7px 0
, {{{color|#0f4728}}} -2px 7px 0
, {{{color|#0f4728}}} -1px 7px 0
, {{{color|#0f4728}}} 0 7px 0
, {{{color|#0f4728}}} 1px 7px 0
, {{{color|#0f4728}}} 2px 7px 0
, {{{color|#0f4728}}} 3px 7px 0
, {{{color|#0f4728}}} 4px 7px 0
, {{{color|#0f4728}}} -4px 8px 0
, {{{color|#0f4728}}} -3px 8px 0
, {{{color|#0f4728}}} -2px 8px 0
, {{{color|#0f4728}}} -1px 8px 0
, {{{color|#0f4728}}} 0 8px 0
, {{{color|#0f4728}}} 1px 8px 0
, {{{color|#0f4728}}} 2px 8px 0
, {{{color|#0f4728}}} 3px 8px 0
, {{{color|#0f4728}}} 4px 8px 0
, {{{그림자색|#062a18}}} -3px 9px 1px
, {{{그림자색|#062a18}}} -2px 9px 1px
, {{{그림자색|#062a18}}} -1px 9px 1px
, {{{그림자색|#062a18}}} 0 9px 1px
, {{{그림자색|#062a18}}} 1px 9px 1px
, {{{그림자색|#062a18}}} 2px 9px 1px
, {{{그림자색|#062a18}}} 3px 9px 1px

|#default=
}};</onlyinclude></includeonly>
<!-- 외곽선 출력 끝 -->

<!-- 안내 시작 -->
<noinclude>
이 틀은 HTML 요소의 <code>style</code> 속성 안에서 사용하여 글자에 폰트, 외곽선, 하단 두께 효과를 적용합니다.

== 옵션 ==
* <code>외곽선단계</code> 또는 <code>단계</code>: <code>1</code> 또는 <code>2</code>
** 기본값은 <code>1</code>입니다.
* <code>하단두께</code> 또는 <code>하단</code>: <code>1</code> 또는 <code>2</code>
** 기본값은 <code>0</code>이며, 하단 두께는 적용되지 않습니다.
* <code>color</code>: 외곽선과 하단 두께 색상
** 기본값은 <code>#0f4728</code>입니다.
* <code>그림자색</code>: 하단 두께 뒤에 깔리는 진한 그림자 색상
** 기본값은 <code>#062a18</code>입니다.
** <code>하단두께</code>가 <code>1</code> 또는 <code>2</code>일 때만 적용됩니다.
** 좌우로 넓게 깔리되, 각 외곽선 단계의 양옆 바깥으로 넘어가지 않도록 제한됩니다.
* <code>폰트</code>: <code>M</code> 또는 <code>B</code>
** <code>M</code> = <code>SB Aggro M</code>
** <code>B</code> = <code>SB Aggro B</code>
** 기본값은 <code>M</code>입니다.

== 사용법 ==
<syntaxhighlight lang="wikitext">
<span style="color:white; {{글자 외곽선}}">식물 vs 좀비</span>
</syntaxhighlight>

<syntaxhighlight lang="wikitext">
<span style="color:white; {{글자 외곽선|외곽선단계=1|하단두께=1|color=#0f4728|그림자색=#062a18|폰트=M}}">식물 vs 좀비</span>
</syntaxhighlight>

<syntaxhighlight lang="wikitext">
<span style="color:#fffbea; font-size:40px; font-weight:700; {{글자 외곽선|외곽선단계=2|하단두께=2|color=#0f4728|그림자색=#041d10|폰트=B}}">식물 vs 좀비</span>
</syntaxhighlight>

== 미리보기 ==
<div style="background:#ebd9b0; padding:24px; border-radius:8px; line-height:1.9;">
<span style="color:white; font-size:24px; {{글자 외곽선|외곽선단계=1|폰트=M}}">외곽선 1단계</span><br>
<span style="color:white; font-size:28px; {{글자 외곽선|외곽선단계=2|폰트=M}}">외곽선 2단계</span><br>
<span style="color:white; font-size:28px; {{글자 외곽선|외곽선단계=1|하단두께=1|폰트=B}}">하단두께 1단계</span><br>
<span style="color:white; font-size:32px; {{글자 외곽선|외곽선단계=2|하단두께=2|폰트=B}}">하단두께 2단계</span>
</div>

<templatedata>
{
  "description": "글자에 SB Aggro 폰트, 외곽선, 하단 두께 및 진한 그림자 효과를 적용하는 인라인 CSS를 출력합니다.",
  "params": {
    "외곽선단계": {
      "label": "외곽선 단계",
      "description": "외곽선 두께를 1 또는 2로 지정합니다.",
      "type": "number",
      "default": "1",
      "suggestedvalues": ["1", "2"],
      "suggested": true
    },
    "하단두께": {
      "label": "하단 두께",
      "description": "글자 아래쪽으로 추가되는 두께를 지정합니다. 0은 적용하지 않음을 의미합니다.",
      "type": "number",
      "default": "0",
      "suggestedvalues": ["0", "1", "2"],
      "suggested": true
    },
    "color": {
      "label": "외곽선 색상",
      "description": "외곽선과 하단 두께에 사용할 CSS 색상값입니다.",
      "type": "string",
      "default": "#0f4728",
      "example": "#0f4728, #5c2207, black, white",
      "suggested": true
    },
    "그림자색": {
      "label": "그림자 색상",
      "description": "하단 두께 뒤에 좌우로 넓게 깔리는 약한 흐림의 진한 그림자 색상을 지정합니다. 각 외곽선 단계의 양옆 바깥으로 넘어가지 않도록 제한됩니다.",
      "type": "string",
      "default": "#062a18",
      "example": "#041d10, #2b1207, black",
      "suggested": true
    },
    "폰트": {
      "label": "폰트",
      "description": "SB Aggro M 또는 SB Aggro B 중 적용할 폰트를 선택합니다.",
      "type": "string",
      "default": "M",
      "suggestedvalues": ["M", "B"],
      "suggested": true
    }
  }
}
</templatedata>
</noinclude>
<!-- 안내 끝 -->