•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기

알파위키:문법 도움말/심화/HTML(r17 Blame)

r17
r8
hoon273
1[[분류:알파위키의 도움말]]
2[include(틀:상위 문서, top1=알파위키:문법 도움말/심화)]
r1
jh090107
3[include(틀:알파위키)]
r8
hoon273
4[include(틀:알파위키 도움말)]
r10
jh090107
5[목차]
r1
jh090107
6== 개요 ==
r15
(삭제된 사용자)
7이 문서는 알파위키에서 작동하는 [[HTML]]을 다룹니다. 위에도 적혀 있듯이 비권장 문법이니 남용하지는 말아주세요. 웬만한 html 문법은 다음과 같은 문법으로 대체가 가능하오니 가급적 대체문법을 이용해주시기 바랍니다.
8|| 문법 ||{{{{{{#!html <div style="css-property: value;">알파위키, 여러분이 가꾸어 나가는 지식의 나무</div>}}}
9}}}||
10|| 출력 ||{{{#!html <div style="css-property: value;">알파위키, 여러분이 가꾸어 나가는 지식의 나무</div>}}}||
11||<-2> HTML 문법 ||
12|| 문법 ||{{{{{{#!wiki style="css-property: value;"
13알파위키, 여러분이 가꾸어 나가는 지식의 나무}}}}}}||
14|| 출력 ||{{{#!wiki style="css-property: value;"
15알파위키, 여러분이 가꾸어 나가는 지식의 나무}}}||
16||<-2> 대체 문법 ||
r1
jh090107
17
18== [anchor(텍스트)]HTML 문법을 이용한 텍스트 효과 ==
19=== 텍스트 배경 색상 사용 ===
20{{{ {{{#!html <span style="background-color: #배경색">서술할 내용</span>}}} }}}
21
22아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
23||{{{{{{#!html <span style="background-color: #999">배경색 적용</span>}}}}}}
24글자가 있는 부분(공백 포함)에만 배경색이 적용됩니다.
25||<bgcolor=#ffffff> {{{#!html <span style="background-color: #999">배경색 적용</span>}}} {{{#!html <span style="background-color: #999; font-weight:700; font-size:300%">배경색 적용</span>}}} ||
r9
jh090107
26[[틀:글배경]], [[틀:글배경b]], [[틀:글배경r]], [[틀:글배경br]]을 이용할 수도 있습니다.
r1
jh090107
27
28==== 텍스트 배경 색상과 텍스트 색깔 중첩 사용 ====
29{{{#!html <span style="background-color: #EFEF00">서술할 내용1</span>}}}
30{{{#!html <span style="color: #00AA00">서술할 내용2</span>}}}
31{{{#!html <span style="color: #FFFFFF; background-color: #00AEE3">서술할 내용3</span>}}}
32
33||{{{{{{#!html <span style="background-color: #배경색">서술할 내용1</span>}}}}}}
34{{{{{{#!html <span style="color: #글자색">서술할 내용2</span>}}}}}}
35{{{{{{#!html <span style="color: #글자색; background-color: #배경색">서술할 내용3</span>}}}}}}||
36
37HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 [[쌍반점|;(세미콜론)]] 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다.
38
r10
jh090107
39{{{#red '''주의'''}}}: HTML 문법 안에 알파위키 문법을 같이 쓸 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}}
r1
jh090107
40
41같이 쓰려면 {{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}
42||{{{{{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}}}}||
r15
(삭제된 사용자)
43이와 같이 {{{<b>}}}태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}}와 같이 사용해야 합니다.
r1
jh090107
44
r15
(삭제된 사용자)
45||<-5> HTML 태그 ||
46|| 시작 || 종료 || 예시 || 설명 || 대체 가능 문법 ||
47|| <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체: 글자를 굵게 합니다. || {{{'''가나'''다라}}} ||
48|| <i> || </i> || {{{#!html <i>가나</i>다라}}} ||이탤릭체: 글자를 기울게 합니다. || {{{''가나''다라}}} ||
49|| <strong> || </strong> || {{{#!html <strong>가나</strong>다라}}} ||글자를 강조합니다.[* <b> 태그랑 차이 없음.] || {{{'''가나'''다라}}} ||
50|| <em> || </em> || {{{#!html <em>가나</em>다라}}} ||글자를 기울입니다.[* <i> 태그랑 차이 없음.] || {{{''가나''다라}}} ||
51|| <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 이상한 것을 느꼈을텐데, 알파위키에서 제공하는 문법인 --취소선--을 쓰면 마우스를 올렸을 때 취소선이 사라지고 회색 글자만 보이지만, 이 태그는 글자 자체에 취소선을 입히는 것이다. 그러니 --취소선--가리기를 사용해도 이 html태그를 이용한 취소선은 사라지지 않는다.] || {{{--가나--다라}}} ||
52|| <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의합니다. || {{{,,가나,,다라}}} ||
53|| <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의합니다. || {{{^^가나^^다라}}} ||
r1
jh090107
54이 외에도 다양한 태그가 있습니다.
55
56아니면은 괄호 밖에서 사용해야 합니다. '''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''
57||{{{'''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''}}}||
58
59{{{#red '''주의'''}}}: 문서 목차에는 HTML 문법이 적용되지 않습니다.
60
r15
(삭제된 사용자)
61=== 텍스트 그림자 및 네온 효과 ===
r1
jh090107
62{{{ {{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} }}}
r10
jh090107
63알파위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
r1
jh090107
64글자색을 그대로 쓸 생각이면 {{{; color:#글자색}}}부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
65||{{{{{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}}}}}
66번짐이 없으면 그림자 효과가 됩니다.
67||<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>}}} ||
68||{{{{{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}}}}}
69번짐 옵션을 6px 주어서 네온 사인 같은 효과를 얻습니다.
70||<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>}}} ||
71||{{{{{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black">다중 효과</span>}}}}}}
72그림자 + 번진 그림자(쉼표로 다중 적용)로 큰 글씨에서 진한 네온 효과
73||<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>}}} ||
74
r15
(삭제된 사용자)
75==== 텍스트 외곽선 효과 ====
r1
jh090107
76{{{ {{{#!html <span style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색">서술할 내용</span>}}} }}}
r10
jh090107
77알파위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
r1
jh090107
78글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
79
80위의 그림자 효과를 응용한 방식입니다.
81상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다.
82이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다.
83
r15
(삭제된 사용자)
84|| {{{ {{{#!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>}}} ||
85|| {{{ {{{#!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>}}} ||
r1
jh090107
86
87== [anchor(동영상)]HTML 문법을 이용한 비디오 삽입 ==
r15
(삭제된 사용자)
88[[알파위키:문법 도움말#동영상|매크로가 지원되지 않는]] 사이트의 동영상을 알파위키 문서 내에 첨부하고 싶다면, HTML5를 이용해야 합니다. 단, 이는 후술하고 있듯이 '''{{{#red 차후 지원이 중단될 수 있는 비권장 문법 입니다.}}}'''
r1
jh090107
89
r15
(삭제된 사용자)
90{{{방법 1.
r1
jh090107
91{{{#!html <video src="동영상 주소"></video>}}}
92
93방법 2.
94{{{#!html 동영상 플레이어 소스}}}
95}}}
96위와 같은 형식으로 문서 내의 원하는 위치에 쓰시면 됩니다. 문서 내에 쓰고 문서 저장을 하면 영상이 출력됩니다.
97
r15
(삭제된 사용자)
98 * 모든 페이지에서의 TLS(HTTPS) 통신을 지원하지 않는 사이트의 동영상 플레이어는 알파위키에서 나타나지 않습니다. [[https://namu.wiki/w/알파위키:보존문서/알파위키:연습장1?rev=1262|참고]] [[https://namu.wiki/raw/알파위키:보존문서/알파위키:연습장1?rev=1262|RAW]][* 2016년 7월 27일 확인]
r3
turbo_whistler
99
r15
(삭제된 사용자)
100== 기타 ==
101 * class 속성을 span 태그를 통해 삽입할 수 있습니다. div, a 등 다른 태그에서는 지원하지 않습니다.
102 {{{#!syntax xml
103<span class="클래스명">...</span>
104<span class="클래스명1 클래스명2 클래스명3...">...</span>
r3
turbo_whistler
105}}}
r15
(삭제된 사용자)
106 class 속성에 공백이 없을 경우 큰따옴표를 사용하지 않아도 작동하지만 이는 비권장 사항입니다.
r3
turbo_whistler
107
r15
(삭제된 사용자)
108[각주][include(틀:문서 가져옴, title=알파위키:문법 도움말/심화, version=1824, paragraph=19.1)]