편집 요약 없음
편집 요약 없음
6번째 줄: 6번째 줄:
==사용방법==
==사용방법==
;문법
;문법
*display
*text-'''A'''lign
:  diplay요소 변경, 기본 inline으로 설정되어 있음.
:  이 옵션은 기본적으로 display:block, widht:100%으로 설정이 된 후 left, right, center로 정렬을 한다.
*width
*'''B'''ackground-color
: 가로크기 지정, display값이 block일때 적용된다.
*height
:  세로크기, display값이 block일때 적용된다.
*background-color
:  배경색 변경, 기본 yellow
:  배경색 변경, 기본 yellow
*color
*'''C'''olor
:  글자 색 변경, 기본은 black이다.
:  글자 색 변경, 기본은 black이다.
*font-sise
*font-'''S'''ize
:  글자 크기 변경, 기본은 10pt, 100%이다.
:  글자 크기 변경, 기본은 10pt, 100%이다.
*text-align
 
:  block으로 설정되어있을 때 left right center 정렬을 한다.
*bo'''R'''der
*margin
:  외부 여백설정
*padding
:  내부 여백설정
*border
:  테두리 설정, 1px dashed skyblue; 형식으로 설정.
:  테두리 설정, 1px dashed skyblue; 형식으로 설정.


33번째 줄: 24번째 줄:




<pre>{{span|s=9pt |c=red |텍스트 메시지}}
<pre>{{span|s=9pt |c=red |메시지}}</pre>
다음과 같은 효과이다.  
다음과 같은 효과이다.  
<span style ="color:red; font-size:9pt;">텍스트 메시지</span>
<pre><span style ="color:red; font-size:9pt;">메시지</span></pre>
</pre>
{{span|s=9pt |c=red |메시지}}
{{span|s=9pt |c=red |텍스트 메시지}}




<pre>{{span |d=block |w=100px |b=yellow |애국가}}
<pre>{{span |b=silver |애국가}}</pre>
다음과 같은 효과이다.  
다음과 같은 효과이다.  
<span style ="display:block; width:100px; background:yellow">애국가</span>
<pre><span style =" background:silver">애국가</span>
</pre>
</pre>
{{span |d=block |w=100px |b=silver |애국가}}
{{span |b=silver |애국가}}




<pre>{{span |d=block|w=100%|c=red|a=right|범례}}</pre>
span으로 오른쪽 정렬
{{span |d=block|w=100%|c=red|a=right|범례}}
<pre>{{span |c=red|a=right|범례}}</pre>
다음과 같은 효과이다.
<pre><span style ="display:block; width:100%; color:red; text-align:right;">범례</span></pre>
{{span |c=red|a=right|범례}}

2020년 10월 1일 (목) 22:03 판

일반 글자 스타일을 지정하는 틀이다.

사용용도

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

사용방법

문법
  • text-Align
이 옵션은 기본적으로 display:block, widht:100%으로 설정이 된 후 left, right, center로 정렬을 한다.
  • Background-color
배경색 변경, 기본 yellow
  • Color
글자 색 변경, 기본은 black이다.
  • font-Size
글자 크기 변경, 기본은 10pt, 100%이다.
  • boRder
테두리 설정, 1px dashed skyblue; 형식으로 설정.

사용예

{{span|기본 메시지}}

기본 메시지 


{{span|s=9pt |c=red |메시지}}

다음과 같은 효과이다. 

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

메시지 


{{span |b=silver |애국가}}

다음과 같은 효과이다. 

<span style =" background:silver">애국가</span>

애국가


span으로 오른쪽 정렬 

{{span |c=red|a=right|범례}}

다음과 같은 효과이다. 

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

범례