잔글편집 요약 없음 |
잔글편집 요약 없음 |
||
25번째 줄: | 25번째 줄: | ||
*l'''i'''ne-height | *l'''i'''ne-height | ||
: 글씨가 쓰여진 줄의 높이를 설정한다.(기본140% | : 글씨가 쓰여진 줄의 높이를 설정한다.(기본140%) 이 옵션은 display:block, width:100%도 같이 설정이 된다. | ||
32번째 줄: | 32번째 줄: | ||
==사용예== | ==사용예== | ||
===내용만 입력한 예=== | |||
<pre>{{span|기본 메시지}} | <pre>{{span|기본 메시지}} | ||
</pre> | </pre> | ||
38번째 줄: | 38번째 줄: | ||
===s=, r= 변수 사용 예=== | |||
1번인자 매시지의 위치는 맨앞쪽을 추천한다. 결과는 같다. | 1번인자 매시지의 위치는 맨앞쪽을 추천한다. 결과는 같다. | ||
<pre>{{span|s=9pt |c=red |메시지}} | <pre>{{span|s=9pt |c=red |메시지}} | ||
51번째 줄: | 51번째 줄: | ||
===b=, c= 변수 사용 예=== | |||
<pre>{{span|애국가 |b=royalblue |c=white}}</pre> | <pre>{{span|애국가 |b=royalblue |c=white}}</pre> | ||
{{span|애국가 |b=royalblue |c=white}} | {{span|애국가 |b=royalblue |c=white}} | ||
60번째 줄: | 60번째 줄: | ||
===c=, a= 변수 사용 예=== | |||
<pre>{{span|범례 |c=red|a=right|}}</pre> | <pre>{{span|범례 |c=red|a=right|}}</pre> | ||
{{span|범례 |c=red|a=right}} | {{span|범례 |c=red|a=right}} | ||
72번째 줄: | 72번째 줄: | ||
===r= 변수 사용 예=== | |||
border의 여러 옵션을 사용한 경우이다. | border의 여러 옵션을 사용한 경우이다. | ||
<pre> | <pre> | ||
90번째 줄: | 90번째 줄: | ||
{{Span|두줄|r=2px groove red}} | {{Span|두줄|r=2px groove red}} | ||
===i= 변수 사용 예=== | |||
<pre> | |||
{{span|줄간격 110%<br>줄간격110%<br>줄간격110% |i=90%}} | |||
</pre> | |||
{{span|줄간격 110%<br>줄간격110%<br>줄간격110% |i=90%}} | |||
===h= 변수 사용 예=== | |||
<pre> | |||
{{Span|블럭 높이 150px |h=150px|b=gold }} | |||
</pre> | |||
{{Span|블럭 높이 150px |h=150px|b=gold }} | |||
2021년 6월 8일 (화) 16:38 판
span 태그의 역할을하며, 일반 글자 스타일을 지정하는 틀이다.
사용용도
특히 모바일에서 스타일 지정시 오타등을 줄일 수 있도록 만든, 스타일을 지정하는 틀이다.
사용방법
- 문법
- {{span |내용 |a= |b= |c= |s= |r= |i= |h=}}
- 내용
- 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=2px solid green}} {{Span|두줄|r=2px double royalblue}} {{Span|두줄|r=2px groove red}}
점선
점선2
솔리드
두줄
두줄
i= 변수 사용 예
{{span|줄간격 110%<br>줄간격110%<br>줄간격110% |i=90%}}
줄간격 110%
줄간격110%
줄간격110%
h= 변수 사용 예
{{Span|블럭 높이 150px |h=150px|b=gold }}
블럭 높이 150px
- 추가정보
위에 정의되지 않은 속성 값을 설정할 수 있는데 위의 매개변수 값 설정 후 구분자 기호 ; 입력 후에 style설정하듯이 설정하면 된다.
- 다른예
{{span|영화|b=green|c=white; border-radius: 7px}}
영화
함께보기
- {{코드}}