잔글편집 요약 없음 |
잔글 (→내용만 입력한 예) |
||
(같은 사용자의 중간 판 16개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
span 태그의 | span 태그의 역할을 하며, 일반 글자 스타일을 지정하는 틀이다. | ||
틀 {{틀|sp}}로 사용해도 동일하게 작동한다. | |||
==사용용도== | ==사용용도== | ||
특히 모바일에서 스타일 지정시 오타등을 줄일 수 | 특히 모바일에서 스타일을 지정하는데 유용한 틀인데, 스타일 지정시 오타등을 줄일 수 있다. | ||
==사용방법== | ==사용방법== | ||
;문법 | ;문법 | ||
{{테두리|<nowiki> | |||
{{sp |내용 |a= |b= |c= |s= |r= |i= |w= |h= |id="id name" }}</nowiki> | |||
}} | |||
*내용 | *내용 | ||
: 1번째 인자, | : 1번째 인자, 스타일을 적용할 내용이다. | ||
: "="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다. | : "="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다. | ||
*text-''' | *text-'''a'''lign | ||
: left, right, center로 정렬을 할 수 있다. 이 | : left, right, center로 정렬을 할 수 있다. 이 옵션은 display:block, width:100%도 같이 설정이 된다. | ||
*''' | *'''b'''ackground-color | ||
: 배경색을 설정한다, 기본 yellow이다. | : 배경색을 설정한다, 기본 yellow이다. | ||
*''' | *'''c'''olor | ||
: 글자 색을 변경한다, 기본은 black이다. | : 글자 색을 변경한다, 기본은 black이다. red/gray/silver/royalblue ... | ||
*font-''' | *font-'''s'''ize | ||
: 글자 크기를 변경한다, 기본은 10pt(=100%) | : 글자 크기를 변경한다, 기본은 10pt(=100%). 8pt/ 9pt/ 85%/ 120% ... | ||
*font-'''w'''eight | |||
: 글자를 강조할지를 설정한다, 기본은 normal. normal/ bold. | |||
:틀 {{틀|코드}} | *bo'''r'''der | ||
: 테두리 설정, 1px dashed red; 형식으로 설정한다. 2px dashed blue/ ... | |||
*'''h'''eight | |||
: 글자의 높이를 설정한다. 이 옵션은 display:block, width:100%도 같이 설정이 된다. | |||
*l'''i'''ne-height | |||
: 글씨가 쓰여진 줄의 높이를 설정한다. 기본140%. 100%/ 120%/ 160% ... | |||
*|id= | |||
: id name을 지정하여 앵커기능으로 사용할 수 있다. {{상세|틀:앵커}} | |||
* 다음 틀은 비슷한 기능을 가진 다른 틀이며 참조하기 바란다. | |||
:{{참조|틀:st}} | |||
:{{참조|틀:코드}} | |||
==사용예== | ==사용예== | ||
===내용만 입력한 예=== | |||
< | 아무 옵션 없이 적용할 경우, 기본색상이 출력되다. | ||
</ | |||
{{ | {{사용예 | ||
|입력1= | |||
<nowiki>{{sp|텍스트}} | |||
</nowiki> | |||
|결과1= | |||
{{sp|텍스트}} | |||
}} | |||
===s=, r= 변수 사용 예=== | |||
1번인자 매시지의 위치는 맨앞쪽을 추천한다. 결과는 같다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{sp|s=9pt |c=red |메시지}} | |||
{{sp|메시지|s=9pt |c=red}} | |||
</nowiki> | |||
|결과1= | |||
{{sp|s=9pt |c=red |메시지}} | |||
{{sp|메시지|s=9pt |c=red}} | |||
}} | |||
이것은 다음의 html 태그와 같은 효과다. | 이것은 다음의 html 태그와 같은 효과다. | ||
39번째 줄: | 73번째 줄: | ||
===b=, c= 변수 사용 예=== | |||
< | {{사용예 | ||
{{ | |입력1= | ||
<nowiki>{{sp|애국가 |b=royalblue |c=white}} | |||
</nowiki> | |||
|결과1= | |||
{{sp|애국가 |b=royalblue |c=white}} | |||
}} | |||
이것은 다음의 html 태그와 같은 효과다. | 이것은 다음의 html 태그와 같은 효과다. | ||
48번째 줄: | 88번째 줄: | ||
===c=, a= 변수 사용 예=== | |||
< | {{사용예 | ||
{{span |c=red|a=right | |입력1= | ||
<nowiki>{{span|범례 |c=red|a=right}} | |||
</nowiki> | |||
|결과1={{span|범례 |c=red|a=right}} | |||
}} | |||
이것은 다음의 html 태그와 같은 효과다. | 이것은 다음의 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> | ||
;다른예 | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{span|주요작품|b=#ddddff|a=center}} | |||
</nowiki> | |||
|결과1={{span|주요작품|b=#ddddff|a=center}} | |||
}} | |||
===r= 변수 사용 예=== | |||
border의 여러 옵션을 사용한 경우이다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{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}} | |||
</nowiki> | |||
|결과1= | |||
{{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}} | |||
}} | |||
===w= 변수 사용 예=== | |||
글자의 굵기(강조)를 사용한 경우이다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki> | |||
{{Sp|강조한 글자 |w=bold }} | |||
{{Sp|일반 글자 |w=normal }} | |||
</nowiki> | |||
|결과1= | |||
{{Sp|강조한 글자 |w=bold }} | |||
{{Sp|일반 글자 |w=normal }} | |||
}} | |||
===i= 변수 사용 예=== | |||
{{사용예 | |||
|입력1= <nowiki> | |||
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다. | |||
* {{sp|줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.|i=70%}} | |||
* {{sp|줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=90%}} | |||
* {{sp|줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=110%}} | |||
* {{sp|줄간격 160% - 이 줄은 글자의 줄간격이 160%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=160%}} | |||
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다. | |||
</nowiki> | |||
|결과1= | |||
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다. | |||
* {{sp|줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.|i=70%}} | |||
* {{sp|줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=90%}} | |||
* {{sp|줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=110%}} | |||
* {{sp|줄간격 160% - 이 줄은 글자의 줄간격이 160%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=160%}} | |||
* 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다. | |||
}} | |||
===h= 변수 사용 예=== | |||
;텍스트를 150px 설정한 경우 | |||
보여지는 결과와 같이 높이를 지정한 경우이다. 그러나 텍스트의 위치는 테이블에서 설정하는 것과는 다르게 윈쪽에 위치한다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{Span|텍스트 |b=gold |h=50px }} | |||
</nowiki> | |||
|결과1={{Span|텍스트 |b=gold |h=50px }} | |||
}} | |||
;텍스트를 높이 50px의 블럭 중앙에 배치한 경우 | |||
gold색으로 높이 50px의 블럭을 설정한 다음에 텍스트의 위치를 padding 옵션을 이용하여 위쪽에서 15px에 위치에 설정한다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{Span|텍스트 |b=gold |a=center |h=50px; padding:15px 0 0 0 }} | |||
</nowiki> | |||
|결과1={{Span|텍스트 |b=gold |a=center |h=50px; padding:15px 0 0 0 }} | |||
}} | |||
{{ | === id="id name" === | ||
: id name을 지정하여 앵커기능으로 사용할 수 있다. {{상세|틀:앵커}} | |||
{{ | ==추가적인 설정 예== | ||
틀 span에서 정의되지 않은 속성 값을 설정할 수 있는데 위의 매개변수 값 설정 후 구분자 기호 {{코드|;}} 입력 후에 style설정하듯이 설정하면 된다. | |||
{{사용예 | |||
|입력1= | |||
<nowiki>{{span|영화|b=green|c=white; border-radius: 7px}} | |||
</nowiki> | |||
|결과1={{span|영화|b=green|c=white; border-radius: 7px}} | |||
}} | |||
==함께보기== | ==함께보기== | ||
* | * [[틀:st]] | ||
* [[틀:코드]] | |||
* [[틀:테두리]] |
2023년 8월 14일 (월) 12:22 기준 최신판
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%}} * 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다. |
|
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을 지정하여 앵커기능으로 사용할 수 있다. 이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.
추가적인 설정 예
틀 span에서 정의되지 않은 속성 값을 설정할 수 있는데 위의 매개변수 값 설정 후 구분자 기호 ; 입력 후에 style설정하듯이 설정하면 된다.
입력 | 결과 |
---|---|
{{span|영화|b=green|c=white; border-radius: 7px}} | 영화 |