편집 요약 없음
잔글편집 요약 없음
1번째 줄: 1번째 줄:
일반 글자 스타일을 지정하는 틀이다.
span 태그의 역할을하며, 일반 글자 스타일을 지정하는 틀이다.


==사용용도==
==사용용도==
특히 모바일에서 스타일 지정시 오타등으로 오류를 줄일 수 있도록 만든, 스타일을 지정하는 틀이다.
특히 모바일에서 스타일 지정시 오타등을 줄일 수 있도록 만든, 스타일을 지정하는 틀이다.


==사용방법==
==사용방법==
;문법
;문법 :<nowiki>{{</nowiki>span |내용 |a= |b= |c= |s= |r= <nowiki>}}</nowiki>
*내용
: 1번째 인자, 내용을 입력한다.
: "="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다.
*text-'''A'''lign
*text-'''A'''lign
:  이 옵션은 기본적으로 display:block, widht:100%으로 설정이 된 후 left, right, center로 정렬을 한다.
:  left, right, center로 정렬을 할 수 있다. 이 옵션을 설정하면 display:block, width:100%이 같이 설정이 된다.
*'''B'''ackground-color
*'''B'''ackground-color
:  배경색 변경, 기본 yellow
:  배경색을 설정한다, 기본 yellow이다.
*'''C'''olor
*'''C'''olor
:  글자 색 변경, 기본은 black이다.
:  글자 색을 변경한다, 기본은 black이다.
*font-'''S'''ize
*font-'''S'''ize
:  글자 크기 변경, 기본은 10pt, 100%이다.
:  글자 크기를 변경한다, 기본은 10pt(=100%)이다.


*bo'''R'''der
*bo'''R'''der
:  테두리 설정, 1px dashed skyblue; 형식으로 설정.
:  테두리 설정, 1px dashed red; 형식으로 설정.
 
:틀 {{틀|코드}}와 비슷한 효과를 낸다.
 


==사용예==
==사용예==
*내용만 입력한 예
<pre>{{span|기본 메시지}}
<pre>{{span|기본 메시지}}
</pre>
</pre>
24번째 줄: 31번째 줄:




*s= r= 변수 사용 예
<pre>{{span|s=9pt |c=red |메시지}}</pre>
<pre>{{span|s=9pt |c=red |메시지}}</pre>
다음과 같은 효과이다.  
{{span|s=9pt |c=red |메시지}}
 
이것은 다음의 html 태그와 같은 효과다.  
<pre><span style ="color:red; font-size:9pt;">메시지</span></pre>
<pre><span style ="color:red; font-size:9pt;">메시지</span></pre>
{{span|s=9pt |c=red |메시지}}




<pre>{{span |b=silver |애국가}}</pre>
*b= c= 변수 사용 예
다음과 같은 효과이다.  
<pre>{{span |b=royalblue |c=white |애국가}}</pre>
<pre><span style =" background:silver">애국가</span>
{{span |b=royalblue |c=white |애국가}}
 
이것은 다음의 html 태그와 같은 효과다.  
<pre><span style ="background-color:royalblue; color:white;">애국가</span>
</pre>
</pre>
{{span |b=silver |애국가}}




span으로 오른쪽 정렬
*c= r= 변수 사용 예
<pre>{{span |c=red|a=right|범례}}</pre>
<pre>{{span |c=red|a=right|범례}}</pre>
다음과 같은 효과이다.  
{{span |c=red|a=right|범례}}
 
이것은 다음의 html 태그와 같은 효과다.  
<pre><span style ="display:block; width:100%; color:red; text-align:right;">범례</span></pre>
<pre><span style ="display:block; width:100%; color:red; text-align:right;">범례</span></pre>
{{span |c=red|a=right|범례}}
 
 
*r= 변수 사용 예
<pre>{{Span|대한민국|r=1px dashed red}}
{{Span|대한민국|r=1px dotted red}}
{{Span|강조하기|r=2px solid green}}
{{Span|강조하기|r=1px solid silver}}
</pre>
 
{{Span|대한민국|r=1px dashed red}}
 
{{Span|대한민국|r=1px dotted red}}
 
{{Span|강조하기|r=2px solid green}}
 
{{Span|강조하기|r=1px solid silver}}
 
마지막 결과는 틀 {{틀|코드}}와 같은 결과이다.
 
==함께보기==
*{{틀|코드}}

2020년 11월 15일 (일) 09:58 판

span 태그의 역할을하며, 일반 글자 스타일을 지정하는 틀이다.

사용용도

특히 모바일에서 스타일 지정시 오타등을 줄일 수 있도록 만든, 스타일을 지정하는 틀이다.

사용방법

문법
{{span |내용 |a= |b= |c= |s= |r= }}
  • 내용
1번째 인자, 내용을 입력한다.
"="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다.
  • text-Align
left, right, center로 정렬을 할 수 있다. 이 옵션을 설정하면 display:block, width:100%이 같이 설정이 된다.
  • Background-color
배경색을 설정한다, 기본 yellow이다.
  • Color
글자 색을 변경한다, 기본은 black이다.
  • font-Size
글자 크기를 변경한다, 기본은 10pt(=100%)이다.
  • boRder
테두리 설정, 1px dashed red; 형식으로 설정.
틀 {{코드}}와 비슷한 효과를 낸다.


사용예

  • 내용만 입력한 예
{{span|기본 메시지}}

기본 메시지


  • s= r= 변수 사용 예
{{span|s=9pt |c=red |메시지}}

메시지

이것은 다음의 html 태그와 같은 효과다. 

<span style ="color:red; font-size:9pt;">메시지</span>


  • b= c= 변수 사용 예
{{span |b=royalblue |c=white |애국가}}

애국가

이것은 다음의 html 태그와 같은 효과다. 

<span style ="background-color:royalblue; color:white;">애국가</span>


  • c= r= 변수 사용 예
{{span |c=red|a=right|범례}}

범례

이것은 다음의 html 태그와 같은 효과다. 

<span style ="display:block; width:100%; color:red; text-align:right;">범례</span>


  • r= 변수 사용 예
{{Span|대한민국|r=1px dashed red}}
{{Span|대한민국|r=1px dotted red}}
{{Span|강조하기|r=2px solid green}}
{{Span|강조하기|r=1px solid silver}}

대한민국

대한민국

강조하기

강조하기

마지막 결과는 틀 {{코드}}와 같은 결과이다.

함께보기