틀:Span

내용없음

속성	비고
display	diplay요소 변경, 기본 inline으로 설정되어 있음.
width	가로크기 지정, display값이 block일때 적용된다.
height	세로크기, display값이 block일때 적용된다.
background-color	배경색 변경
color	글자 색 변경, 기본은 black이다.
font-sise	글자 크기 변경, 기본은 10pt, 100%이다.
margin	외부 여백설정
padding	내부 여백설정
border	테두리 설정, 1px dashed skyblue; 형식으로 설정.

보기 • 편집

span 태그의 역할을 하며, 일반 글자 스타일을 지정하는 틀이다. 틀 {{sp}}로 사용해도 동일하게 작동한다.

사용용도

특히 모바일에서 스타일을 지정하는데 유용한 틀인데, 스타일 지정시 오타등을 줄일 수 있다.

사용방법

문법

{{sp |내용 |a= |b= |c= |s= |r= |i= |w= |h= |id="id name" }}

내용

1번째 인자, 스타일을 적용할 내용이다.

"="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다.

text-align

left, right, center로 정렬을 할 수 있다. 이 옵션은 display:block, width:100%도 같이 설정이 된다.

background-color

배경색을 설정한다, 기본 yellow이다.

color

글자 색을 변경한다, 기본은 black이다. red/gray/silver/royalblue ...

font-size

글자 크기를 변경한다, 기본은 10pt(=100%). 8pt/ 9pt/ 85%/ 120% ...

font-weight

글자를 강조할지를 설정한다, 기본은 normal. normal/ bold.

border

테두리 설정, 1px dashed red; 형식으로 설정한다. 2px dashed blue/ ...

height

글자의 높이를 설정한다. 이 옵션은 display:block, width:100%도 같이 설정이 된다.

line-height

글씨가 쓰여진 줄의 높이를 설정한다. 기본140%. 100%/ 120%/ 160% ...

|id=

id name을 지정하여 앵커기능으로 사용할 수 있다.

이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.

다음 틀은 비슷한 기능을 가진 다른 틀이며 참조하기 바란다.

틀:st 문서를 참고하십시오.

틀:코드 문서를 참고하십시오.

사용예

내용만 입력한 예

아무 옵션 없이 적용할 경우, 기본색상이 출력되다.

입력	결과
{{sp\|텍스트}}	텍스트

s=, r= 변수 사용 예

1번인자 매시지의 위치는 맨앞쪽을 추천한다. 결과는 같다.

입력	결과
{{sp\|s=9pt \|c=red \|메시지}} {{sp\|메시지\|s=9pt \|c=red}}	메시지 메시지

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

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

b=, c= 변수 사용 예

입력	결과
{{sp\|애국가 \|b=royalblue \|c=white}}	애국가

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

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

c=, a= 변수 사용 예

입력	결과
{{span\|범례 \|c=red\|a=right}}	범례

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

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

다른예

입력	결과
{{span\|주요작품\|b=#ddddff\|a=center}}	주요작품

r= 변수 사용 예

border의 여러 옵션을 사용한 경우이다.

입력	결과
{{Span\|점선\|r=1px dotted red}} {{Span\|점선2\|r=1px dashed red}} {{Span\|솔리드\|r=3px solid green}} {{Span\|두줄\|r=3px double royalblue}} {{Span\|두줄\|r=3px groove red}}	점선 점선2 솔리드 두줄 두줄

w= 변수 사용 예

글자의 굵기(강조)를 사용한 경우이다.

입력	결과
{{Sp\|강조한 글자 \|w=bold }} {{Sp\|일반 글자 \|w=normal }}	강조한 글자 일반 글자

i= 변수 사용 예

입력

결과


* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다. 
* {{sp|줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.|i=70%}}
* {{sp|줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=90%}}
* {{sp|줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=110%}}
* {{sp|줄간격 160% - 이 줄은 글자의 줄간격이 160%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=160%}}
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다.