잔글편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
<span style="{{if |{{{d|}}}{{{w|}}}{{{a|}}}{{{h|}}}{{{r|}}}{{{c|}}}{{{s|}}}{{{m|}}}{{{p|}}}{{{b|}}}|{{if | {{{d|}}}| diplay:{{{d}}};| }} {{if | {{{w|}}}| width: {{{w}}};| }} {{if | {{{a|}}}| text-align: {{{a}}};| }} {{if | {{{h|}}}| height:{{{h|}}};| }} {{if | {{{b|}}}| background:{{{b|}}};|}} {{if | {{{c|}}}| Color: {{{c}}};| }} {{if | {{{s|}}}| font-size:{{{s}}};| }} {{if | {{{m|}}}| margin: {{{m}}};| }} {{if | {{{p|}}}| padding:{{{p}}};| }} {{if | {{{r|}}}| border: {{{r}}};| }}
<span style="{{if |{{{a|}}}{{{b|}}}{{{c|}}}{{{s|}}}{{{r|}}}
| {{if | {{{a|}}}| display:block; width:100%; text-align:{{{a}}};|}} {{if | {{{b|}}}| background:{{{b}}};|}} {{if | {{{c|}}}| Color: {{{c}}};|}} {{if | {{{s|}}}| font-size:{{{s}}};|}} {{if | {{{r|}}}| border:{{{r}}};|}}
| background:yellow; }}">{{{1|내용없음}}}</span><noinclude>
| background:yellow; }}">{{{1|내용없음}}}</span><noinclude>
{| class="wikitable"
{| class="wikitable"
!{{st|w=31%}}| 속성 !! 비고
|-
|-
! 속성 !! 비고
| text-'''a'''lign || 텍스트 정렬. block 일때 설정이 유효하다. 값은 left, right, center이다.
|-
| '''d'''isplay || diplay요소 변경, 기본 inline으로 설정되어 있음.  
|-
| '''w'''idth  || 가로크기 지정, display값이 block일때 적용된다.
|-
| '''h'''eight  || 세로크기, display값이 block일때 적용된다.
|-
|-
| '''b'''ackground-color  || 배경색 변경
| '''b'''ackground-color  || 배경색 변경
|-
|-
| '''c'''olor || 글자 색 변경, 기본은 black이다.  
| '''c'''olor || 글자 색 변경, 기본은 black이다.  
|-
| text-'''a'''lign || 텍스트 정렬. block 일때 설정이 유효하다. 값은 left, right, center이다.
|-
|-
| font-'''s'''ize || 글자 크기 변경, 기본은 10pt, 100%이다.  
| font-'''s'''ize || 글자 크기 변경, 기본은 10pt, 100%이다.  
|-
| '''m'''argin  || 외부 여백설정
|-
| '''p'''adding || 내부 여백설정
|-
|-
| bo'''r'''der ||  테두리 설정, 1px dashed skyblue; 형식으로 설정.
| bo'''r'''der ||  테두리 설정, 1px dashed skyblue; 형식으로 설정.

2020년 10월 1일 (목) 21:47 판

내용없음

속성 비고
text-align 텍스트 정렬. block 일때 설정이 유효하다. 값은 left, right, center이다.
background-color 배경색 변경
color 글자 색 변경, 기본은 black이다.
font-size 글자 크기 변경, 기본은 10pt, 100%이다.
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을 지정하여 앵커기능으로 사용할 수 있다.
검색 아이콘.png 이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.


  • 다음 틀은 비슷한 기능을 가진 다른 틀이며 참조하기 바란다.
틀: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%}}
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다.
  • 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다.
  • 줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
  • 줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
  • 줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
  • 줄간격 160% - 이 줄은 글자의 줄간격이 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 }}
텍스트


id="id name"

id name을 지정하여 앵커기능으로 사용할 수 있다.
검색 아이콘.png 이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.


추가적인 설정 예

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

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


함께보기

위키문법 · 색목록 · 컬러/픽커 · 특수문자/ㅇ
인물정보 입력 틀
연예
옛 인물
지도자
운동선수
전문직
기타
관련 정보 입력 틀
국가/행정
정치
지리 관련
문화
기관
단체
종교
기타 정보
인용 틀
언어
기타
행정구역 / 역사
필요한 문서 목록
미등록 분야의 문서들 틀:해부학 • 틀:수학 분야 • 분류:노벨상 수상자
동음이의.png 여기를 가르키는 문서 목록입니다.