글자, 필터 [Text, Font, Filter] Style 태그

사용예

color

<span style="color: 색이름 / 색코드;">콩나물대제국</span>

<p style="direction: ltr / rtl / inherit;">콩나물대제국</p>

콩나물대제국

font-family
font-size
font-style
font-variant
font-weight

글꼴
폰트 크기
이탤릭체 사용
작은 대문자 사용
폰트 굵기

<div style="
font-family:궁서;
font-size:12pt;
font-style:italic;
font-variant:small-caps;
font-weight:bold;">
콩나물대제국<br>주신의대제국
</div>

line-height

행 간격

<div style="
line-height: 300%;">
콩나물대제국<br>주신의대제국
</div>

letter-spacing

ime-mode

<input type="text"
style="ime-mode: active/inactive/disabled;">

layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char

방식
형태
높이
너비

<div style="layout-grid-mode: both / line / char;
layout-grid-type: fixed / loose / strict;
layout-grid-line: 높이(3em);
layout-grid-char: 너비(2em);">
콩나물대제국</div>

ruby-align
ruby-position

<div style="border: 1px;
ruby-align: left / center / right / auto /
distribute-letter / distribute-space / line-edge;
ruby-position: above / inline">
<ruby>콩나물 대제국<rt>우리집</ruby>
</div>

text-align
text-decoration
text-indent
text-overflow
text-transform

<div style="
text-transform:uppercase / lowercase / capitalize;
text-align:left / right / center / justify;
text-indent: cm/mm/in/pt/pc/px/em/ex/%);
text-decoration:blink;
border-width:1px; border-color:green;
border-style:solid; width:150px;
overflow: visible / hidden; text-overflow: clip / elipsis;">
<nobr>콩나물 kong na mul na ra man se</nobr></div>

vertical-align

<table><tr>
<td style="vertical-align: auto / baseline / sub / super / top /
middle / bottom / text-top / text-bottom;
border-width:1px; border-color:green;
border-style:solid; width:150px;height=100;">
콩나물대제국</td></tr></table>

white-space

<span style="white-space: nowrap / pre;
border-width:1px; border-color:green;
border-style:solid; width:50px;">
나 널
사랑해<</span>

word-wrap

<span style="word-wrap:nomal / break-word;
border-width:1px; border-color:green;
border-style:solid; width:100px;">
나 널 사랑해 믿어주길 바래~</span>

writing-mode

<span style="writing-mode: lr-tb / tb-rl; white-space: nowrap;
border-width:1px; border-color:green;
border-style:solid;">
kongnamul</span>

절대크기

상대크기

in

em

cm

ex

mm

%

pt

px

pc

larger

xx-large

smaller

x-large

large

medium

small

x-small

xx-small

속성

용도

사용법

glow

<font color="blue" style="height:30;filter:glow(color:red,strength:10);">콩나물대제국</font>
<span style="color: blue; height:10;filter:glow(color:red,strength:10);">필터효과 적용대상</span>

shadow

<font color="red" style="height:20;filter:shadow(color:blue,direction:225); ">콩나물대제국</font>
<span style="color: red; height:5;filter:shadow(color:blue,direction:225);">필터효과 적용대상</span>

dropshadow

<font color="#000000" style="height:30; filter:dropshadow(color: red,offx:2, offy: 2, positive: 1);">콩나물대제국</font><br>
<span style="color: #000000; height: 30; filter: dropshadow(color: red,offx: 5,offy: 5,positive: 0);">필터효과 적용대상</span>

progrid

<span style="width:150; height:20; filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#7789E1, EndColorStr=#FFFFFF);border:1 solid #7789E1;">콩나물대제국</span><br>
<span style="width:150; height:20; filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#7789E1, EndColorStr=#FFFFFF);border:1 solid #7789E1;">콩나물대제국</span>

alpha(투명도)

<span style="height: 20; filter: alpha(opacity: 60, style: 4, finishopcity: 50);"><font color="blue">콩나물대제국</font></span>
<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: alpha(opacity:1~100, style:0~4, finishopacity:1~100);">

콩나물대제국

fliph / flipv

<span style="height: 5; filter: fliph();">콩나물대제국</font></span>
<span style="height: 5; filter: flipv();">콩나물대제국</font></span>
<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: fliph();")>, <img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: flipv();")>

콩나물대제국
콩나물대제국

☜ h ☜ v

blur

<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: blur(add:0 / 1, direction:0 / 45 / 90 / 135 / 180 / 225 / 270 / 315, strength: 0~100);">

<span style="width:150; height:50; color: blue; filter: blur(add:1 , direction:45, strength:10);">콩나물대제국

콩나물대제국

invert

<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: invert();")>

chroma

<img src="3.jpg" style="filter:chroma(color:#ecc254);">

☞

wave

<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter:wave(add:0,freq:3,lightstrength:20,phase:20,strength:5);">

xray

<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: xray();")>

gray

<img src="http://duduji.iptime.org/duduji/html_tag/c.jpg" style="filter: gray();")>