• 토론
  • 읽기
  • 원본 보기
  • 역사 보기
틀:Span/설명문서
최근 수정 : 2021년 8월 29일 (일) 18:26

< 틀:Span

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


사용용도

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

사용방법

문법
{{</nowiki>span |내용 |a= |b= |c= |s= |r= |i= |h=<nowiki>}}
  • 내용
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; 형식으로 설정한다.
  • height
글자의 높이를 설정한다. 이 옵션은 display:block, width:100%도 같이 설정이 된다.
  • line-height
글씨가 쓰여진 줄의 높이를 설정한다.(기본140%) 이 옵션은 display:block, width:100%도 같이 설정이 된다.


틀 {{코드}}와 비슷한 효과를 낸다.


사용예

내용만 입력한 예

{{span|텍스트}}

텍스트


s=, r= 변수 사용 예

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

{{span|s=9pt |c=red |메시지}}
{{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=, 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

솔리드

두줄

두줄


i= 변수 사용 예

이 예제는 글자의 높이를 설정하는 예제입니다. 여기까지는 일반적인 글자 간격입니다.  
{{span|줄간격 70% |i=70%}}
{{span|줄간격 90% |i=90%}}
{{span|줄간격 110% |i=110%}}
{{span|줄간격 160% |i=160%}}
여기부터는 일반적인 글자 간격입니다.  

이 예제는 글자의 높이를 설정하는 예제입니다. 여기까지는 일반적인 글자 간격입니다. 줄간격 70% 줄간격 90% 줄간격 110% 줄간격 160% 여기부터는 일반적인 글자 간격입니다.


h= 변수 사용 예

텍스트를 150px 설정한 경우

보여지는 결과와 같이 높이를 지정한 경우이다. 그러나 텍스트의 위치는 테이블에서 설정하는 것과는 다르게 윈쪽에 위치한다.

{{Span|텍스트 |b=gold |h=50px }}

텍스트


텍스트를 높이 50px의 블럭 중앙에 배치한 경우

gold색으로 높이 50px의 블럭을 설정한 다음에 텍스트의 위치를 padding 옵션을 이용하여 위쪽에서 15px에 위치에 설정한다.

{{Span|텍스트  |b=gold |a=center |h=50px; padding:15px 0 0 0 }}

텍스트

추가적인 설정 예

틀 span에서 정의되지 않은 속성 값을 설정할 수 있는데 위의 매개변수 값 설정 후 구분자 기호  ;  입력 후에 style설정하듯이 설정하면 된다.

{{span|영화|b=green|c=white; border-radius: 7px}}

영화

함께보기

최근 바뀜
자유게시판
+
-
기본