"HTML 커스텀 태그"의 두 판 사이의 차이

2023년 5월 27일 (토) 14:42 기준 최신판

✔️ 크롬 버전 44.0.2403.89 m에서 테스트하였습니다.

1 개요[ | ]

custom tag
커스텀 태그

HTML 표준에 없는 태그
span 태그과 유사하게 처리된다.
CSS 스타일도 적용된다.

2 예시[ | ]

안녕 <div>div 태그</div> 친구들
안녕 <span>span 태그</span> 친구들

안녕 <asdf>asdf 태그1</asdf> 친구들
안녕 <asdf style='color:red'>asdf 태그2</asdf> 친구들

<!-- 커스텀 태그 중간에 하이픈을 넣지 않을 시, HTML5 표준 위반. 커스텀 태그 사용 시, 차기 HTML 버전에서 나올 신규 태그와 충돌을 막기 위해 중간에 하이픈을 넣는 것을 권장. -->
안녕 <as-df>asdf 태그1</as-df> 친구들
안녕 <as-df style='color:red'>asdf 태그2</as-df> 친구들

3 같이 보기[ | ]

@@ 8번째 줄: / 8번째 줄: @@
 ==예시==
-*예제: http://zetawiki.com/ex/html5/custom-tag.html
+<syntaxhighlight lang='html5'>
-<source lang='html5'>
+안녕 <div>div 태그</div> 친구들
-<div>Hello</div>
+안녕 <span>span 태그</span> 친구들
-<asdf>World</asdf>
-테스트는 <asdf>test</asdf>입니다.
+안녕 <asdf>asdf 태그1</asdf> 친구들
-테스트는 <asdf style='color:red'>test</asdf>입니다.
+안녕 <asdf style='color:red'>asdf 태그2</asdf> 친구들
-</source>
+<!-- 커스텀 태그 중간에 하이픈을 넣지 않을 시, HTML5 표준 위반. 커스텀 태그 사용 시, 차기 HTML 버전에서 나올 신규 태그와 충돌을 막기 위해 중간에 하이픈을 넣는 것을 권장. -->
+안녕 <as-df>asdf 태그1</as-df> 친구들
+안녕 <as-df style='color:red'>asdf 태그2</as-df> 친구들
+</syntaxhighlight>
+<jsfiddle height='250'>2uqmsc85</jsfiddle>
 ==같이 보기==
-*[[jQuery 커스텀 태그 사용]]
+* [[커스텀]]
+* [[HTML 태그]]
+* [[HTML span 태그]]
+* [[jQuery 커스텀 태그 사용]]
 [[분류: HTML 태그]]