HTML(비교)

 r8 vs r9
 ...
 [include(틀:상위 문서, top1=알파위키:문법 도움말/심화)]
 [include(틀:알파위키)]
 [include(틀:알파위키 도움말)]
-[목차]
 == 개요 ==
 '''{{{+2 {{{#red 이 문법은 권장되지 않으며 차후에 삭제될 수 있습니다.}}} }}}'''
-이 문서는 알파위키에서 작동하는 [[HTML]]을 다룹니다. 위에도 적혀 있듯이 비권장 문법이니 남용하지는 말아주세요.
+이 문서는 나무위키에서 작동하는 [[HTML]]을 다룹니다. 위에도 적혀 있듯이 비권장 문법이니 남용하지는 말아주세요.
 == [anchor(텍스트)]HTML 문법을 이용한 텍스트 효과 ==
 === 텍스트 배경 색상 사용 ===
 ...
 ||{{{{{{#!html <span style="background-color: #999">배경색 적용</span>}}}}}}
 글자가 있는 부분(공백 포함)에만 배경색이 적용됩니다.
 ||<bgcolor=#ffffff> {{{#!html <span style="background-color: #999">배경색 적용</span>}}} {{{#!html <span style="background-color: #999; font-weight:700; font-size:300%">배경색 적용</span>}}} ||
+[[틀:글배경]], [[틀:글배경b]], [[틀:글배경r]], [[틀:글배경br]]을 이용할 수도 있습니다.
 ==== 텍스트 배경 색상과 텍스트 색깔 중첩 사용 ====
 {{{#!html <span style="background-color: #EFEF00">서술할 내용1</span>}}}
 ...
 HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 [[쌍반점|;(세미콜론)]] 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다.
-{{{#red '''주의'''}}}: HTML 문법 안에 알파위키 문법을 같이 쓸 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}}
+{{{#red '''주의'''}}}: HTML 문법 안에 나무위키 문법을 같이 쓸 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}}
 같이 쓰려면 {{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}
 ||{{{{{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}}}}||
-이와 같이 <b>태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}} 이렇게 사용해야 합니다.
+이와 같이 {{{<b>}}}태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}} 이렇게 사용해야 합니다.
 ||<-4> HTML 태그 ||
 || 시작 || 종료 || 예시 || 설명 ||
-|| <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체 :글자를 굵게 합니다. ||
+|| <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체: 글자를 굵게 합니다. ||
 || <i> || </i> || {{{#!html <i>가나</i>다라}}} ||이탤릭체: 글자를 기울게 합니다. ||
 || <strong> || </strong> || {{{#!html <strong>가나</strong>다라}}} ||글자를 강조합니다.[* <b> 태그랑 차이 없음.] ||
 || <em> || </em> || {{{#!html <em>가나</em>다라}}} ||글자를 기울입니다.[* <i> 태그랑 차이 없음.] ||
-|| <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 이상한 것을 느꼈을텐데. 알파위키에서 제공하는 문법인 --취소선--을 쓰면 del 태그가 적용되어 마우스를 올렸을 때 취소선이 사라지고 회색 글자만 보이지만, 이 태그는 s 태그를 통해 취소선을 입히는 것이다. del 태그에만 CSS에 회색 및 마우스 올림 속성이 있다. 그러니 --취소선--가리기를 사용해도 이 html태그를 이용한 취소선은 사라지지 않는다.] ||
-|| <del> || </del> || {{{#!html <del>가나</del>다라}}} ||위키에 회색 취소선을 추가합니다. ||
-|| <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의 합니다. ||
-|| <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의 합니다. ||
+|| <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 이상한 것을 느꼈을텐데. 나무위키에서 제공하는 문법인 --취소선--을 쓰면 마우스를 올렸을 때 취소선이 사라지고 회색 글자만 보이지만, 이 태그는 글자 자체에 취소선을 입히는 것이다. 그러니 --취소선--가리기를 사용해도 이 html태그를 이용한 취소선은 사라지지 않는다.] ||
+|| <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의합니다. ||
+|| <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의합니다. ||
 이 외에도 다양한 태그가 있습니다.
 아니면은 괄호 밖에서 사용해야 합니다. '''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''
 ...
 ==== 텍스트 그림자 및 네온 효과 ====
 {{{ {{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} }}}
-알파위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
+나무위키에서는 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를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
+나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
 글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
 위의 그림자 효과를 응용한 방식입니다.
 ...
 || {{{ {{{#!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>}}} ||
 == [anchor(동영상)]HTML 문법을 이용한 비디오 삽입 ==
-유튜브 이외의 동영상을 알파위키 문서 내에 첨부하고 싶다면, HTML5를 이용해야 합니다. 단, 이는 후술하고 있듯이 '''{{{#red 차후 지원이 중단될 수 있는 비권장 문법 입니다.}}}'''
+유튜브 이외의 동영상을 나무위키 문서 내에 첨부하고 싶다면, HTML5를 이용해야 합니다. 단, 이는 후술하고 있듯이 '''{{{#red 차후 지원이 중단될 수 있는 비권장 문법 입니다.}}}'''
 {{{
 방법 1.
 ...
 위와 같은 형식으로 문서 내의 원하는 위치에 쓰시면 됩니다. 문서 내에 쓰고 문서 저장을 하면 영상이 출력됩니다.
  * 모든 페이지에서의 TLS(HTTPS) 통신을 지원하지 않는 사이트의 동영상 플레이어는 나무위키에서 나타나지 않습니다. [[https://namu.wiki/w/나무위키:보존문서/나무위키:연습장1?rev=1262|#참고1]][[https://namu.wiki/diff/나무위키:보존문서/나무위키:연습장1?rev=1262&oldrev=1261|#참고2]][* 2016년 7월 27일 확인]
 == HTML 태그에 CLASS 속성 적용 ==
 CLASS 속성은 SPAN 태그에만 적용됩니다.
 ...
 클래스명에 띄어쓰기(공백)가 있는 경우에는 따옴표로 묶어야 합니다.
-[각주][include(틀:나무위키에서 가져옴, title=나무위키:문법 도움말/심화/HTML, version=20)]
+[각주][include(틀:나무위키에서 가져옴, title=나무위키:문법 도움말/심화/HTML, version=22)]