tag:blogger.com,1999:blog-29162787828045137592024-03-14T02:30:59.571+09:00CSS EssentialsElex의 CSS 가이드.Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.comBlogger178125tag:blogger.com,1999:blog-2916278782804513759.post-41022690237887523762015-06-12T14:07:00.000+09:002015-06-12T14:07:59.882+09:00CSS 레이아웃을 배웁시다CSS 레이아웃에 관해 설명한 사이트를 발견하였다.<br />
특히, <a href="http://ko.learnlayout.com/flexbox.html" target="_blank">flexbox</a> 부분!<br />
<br />
<a href="http://ko.learnlayout.com/">http://ko.learnlayout.com/</a>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-7662771580271344662013-03-07T23:25:00.000+09:002013-03-07T23:28:48.587+09:00<sub>, <sup>를 위한 CSS<div class="ad" style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<br />
<div>
<p>윗첨자, 아랫 첨자를 위한 CSS</p>
<pre style="font-family:monospace; font-size:0.82em; border-radius: 5px; border: 1px solid #ddd; box-shadow: 3px 3px 1px 1px #ddd; margin:1em; padding: 1em;"><code>
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
}
sup {
/* Move the superscripted text up */
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.25em;
}</code></pre>
<p>출처 : <a href="https://gist.github.com/unruthless/413930">https://gist.github.com/unruthless/413930</a></p></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-46535639587422135932012-09-14T15:55:00.000+09:002012-09-14T15:55:11.723+09:00text-shadow<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트의 그림자 효과를 지정합니다.<br />
콤마(,)로 구분해서 여러 효과를 겹쳐서 표시할 수 있습니다. 먼저 지정한 효과가 앞에 표시됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-shadow0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>none</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-shadow</span><span style="color: black;">:</span> 2px 2px 3px <span style="color: black;">#666</span><span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.textShadow = "2px 2px #ff0000"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>none</dt>
<dd>그림자를 지정하지 않습니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/lengths.html">length</a></i>></dt>
<dd>2~3개의 값을 지정할 수 있으며, 순서대로 수평 옵셋, 수직 옵셋, 블러 입니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/colors.html">color</a></i>></dt>
<dd>그림자의 색상을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-48426211109962783912012-09-14T15:45:00.001+09:002012-09-14T15:45:37.756+09:00text-emphasis-position<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트 강조점의 위치를 지정합니다. 가로 쓰기 모드에서의 값과 세로 쓰기 모드의 값을 공백으로 구분해서 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-emphasis-position0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>above right</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-emphasis-position</span><span style="color: black;">:</span> <span style="color: black;">below left</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>above</dt>
<dd>텍스트 위에 표시합니다.</dd>
<dt>below</dt>
<dd>텍스트 아래에 표시합니다.</dd>
<dt>left</dt>
<dd>세로 쓰기 모드에서 텍스트의 왼쪽에 표시합니다.</dd>
<dt>right</dt>
<dd>세로 쓰기 모드에서 텍스트의 오른쪽에 표시합니다.
</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-83444080546723944972012-09-14T15:39:00.000+09:002012-09-14T15:39:34.830+09:00text-emphasis<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트의 강조점의 스타일과 색상을 지정하는 단축 프로퍼티 입니다. 스타일과 색상을 공백으로 구분해서 지정합니다. 생략된 값은 각각의 기본값이 적용됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-emphasis0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>currentColor</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-emphasis</span><span style="color: black;">:</span> filled circle <span style="color: black;">#f00</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/text-emphasis-style.html">text-emphasis-style</a></i>></dt>
<dd>스타일을 지정합니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/text-emphasis-color.html">text-emphasis-color</a></i>></dt>
<dd>색상을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-64446378976859244132012-09-14T15:31:00.000+09:002012-09-14T15:31:16.562+09:00text-emphasis-color<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
강조점의 색상을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-emphasis-color0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>currentColor</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-emphasis-color</span><span style="color: black;">:</span> <span style="color: black;">#fff</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/colors.html">color</a></i>></dt>
<dd>색상을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-86917854207017535602012-09-14T15:28:00.000+09:002012-09-14T15:28:33.690+09:00text-emphasis-style<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
요소의 텍스트에 지정할 강조점의 스타일을 설정합니다. 도형 앞에 filled 또는 open이 지정되지 않으면 filled인 것으로 간주됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-emphasis-style0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>none</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-emphasis-style</span><span style="color: black;">:</span> <span style="color: black;">filled circle</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>none</dt>
<dd>강조점을 적용하지 않습니다.</dd>
<dt>filled</dt>
<dd>단색으로 채웁니다. 도형 이름 앞에 지정 합니다.</dd>
<dt>open</dt>
<dd>도형의 속을 채우지 않습니다. 도형 이름 앞에 지정 합니다.</dd>
<dt>dot</dt>
<dd>•, ◦</dd>
<dt>circle</dt>
<dd>●, ○</dd>
<dt>double-circle</dt>
<dd>◉, ◎</dd>
<dt>triangle</dt>
<dd>▲, △</dd>
<dt>sesame</dt>
<dd>﹅, ﹆</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/strings.html">string</a></i>></dt>
<dd>문자를 강조점으로 사용합니다. 단 한글자만 지정해야 합니다.</dd></dl>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/TR/css3-text/text-emphasis-ruby.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.w3.org/TR/css3-text/text-emphasis-ruby.png" /></a></div>
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-48080895640149486102012-09-14T14:15:00.000+09:002012-09-14T14:15:37.886+09:00text-underline-position<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트의 밑줄 위치를 지정합니다. 부모 요소로부터 정의된 밑줄에는 적용되지 않습니다.<br />
below만 지정된 경우에는 left도 지정된 것으로 간주합니다. left 또는 right 만 지정된 때에는 below도 지정된 것으로 간주합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-underline-position0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>auto</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-underline-position</span><span style="color: black;">:</span> <span style="color: black;">alphabetic</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>auto</dt>
<dd>웹 브라우저가 자동으로 지정합니다.</dd>
<dt>alphabetic</dt>
<dd><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/TR/css3-text/underline-position-alphabetic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.w3.org/TR/css3-text/underline-position-alphabetic.png" /></a></div>
</dd>
<dt>below</dt>
<dd><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/TR/css3-text/underline-position-below.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="http://www.w3.org/TR/css3-text/underline-position-below.png" width="320" /></a></div>
</dd>
<dt>left</dt>
<dd><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/TR/css3-text/underline-position-left.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.w3.org/TR/css3-text/underline-position-left.png" /></a></div>
세로 쓰기 모드에서 왼쪽으로 지정합니다.</dd>
<dt>right</dt>
<dd><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/TR/css3-text/underline-position-right.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.w3.org/TR/css3-text/underline-position-right.png" /></a></div>
세로 쓰기 모드에서 오른쪽으로 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-58161690237318246692012-09-14T13:43:00.000+09:002012-09-14T13:43:16.046+09:00text-decoration-skip<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트 장식을 적용하지 않을 대상을 지정합니다. none 외의 값은 여러 개를 공백으로 구분해서 지정할 수 있습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-decoration-skip0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>object</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-decoration-skip</span><span style="color: black;">:</span> <span style="color: black;">none</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>none</dt>
<dd>아무 것도 제외하지 않습니다.</dd>
<dt>object</dt>
<dd>이미지나 인라인 블럭에는 적용하지 않도록 합니다.</dd>
<dt>spaces</dt>
<dd>공백 문자등에는 장식을 적용하지 않습니다.</dd>
<dt>edges</dt>
<dd>두 개의 이어진 각각의 장식이 하나로 붙어서 보이지 않도록 합니다.</dd>
</dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-22859158458694617942012-09-14T13:35:00.000+09:002012-09-14T13:35:18.151+09:00text-decoration<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트 장식을 지정하는 단축형 프로퍼티 입니다. 하나 이상의 속성을 공백으로 구분해서 나열합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#text-decoration" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#text-decoration0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>아니오</dd>
<dt>기본값</dt>
<dd>none</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-decoration</span><span style="color: black;">: </span>underline
<span style="color: #7f0055; font-weight: bold;">text-decoration</span><span style="color: black;">:</span> navy dotted underline<span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.textDecoration = "overline"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/text-decoration-line.html">text-decoration-line</a></i>></dt>
<dd>텍스트 장식 라인 종류를 지정합니다.</dd>
<dt><<a href="http://css.elex.pe.kr/2012/09/text-decoration-style.html"><i>text-decoration-style</i></a>></dt>
<dd>텍스트 장식 라인 스타일을 지정합니다.</dd>
<dt><<a href="http://css.elex.pe.kr/2012/09/text-decoration-color.html"><i>text-decoration-color</i></a>></dt>
<dd>텍스트 장식 색상을 지정합니다.</dd>
<dt>blink</dt>
<dd>텍스트가 깜빡이도록 합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com1tag:blogger.com,1999:blog-2916278782804513759.post-20803386627335472142012-09-14T13:27:00.000+09:002012-09-14T13:27:00.937+09:00text-decoration-style<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<a href="http://css.elex.pe.kr/2012/09/text-decoration-line.html">text-decoration-line</a> 프로퍼티로 지정한 장식의 스타일을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-decoration-style0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>아니오</dd>
<dt>기본값</dt>
<dd>solid</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-decoration-style</span><span style="color: black;">:</span> <span style="color: black;">wavy</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>solid</dt>
<dd>실선.</dd>
<dt>double</dt>
<dd>이중선.</dd>
<dt>dotted</dt>
<dd>점선.</dd>
<dt>dashed</dt>
<dd>점선.</dd>
<dt>wavy</dt>
<dd>물결선.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-20526354274203604642012-09-14T13:22:00.002+09:002012-09-14T13:22:29.046+09:00text-decoration-color<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<a href="http://css.elex.pe.kr/2012/09/text-decoration-line.html">text-decoration-line</a> 프로퍼티로 지정한 장식의 색상을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-decoration-color0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>아니오</dd>
<dt>기본값</dt>
<dd>currentColor</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-decoration-color</span><span style="color: black;">:</span> <span style="color: black;">#fff</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/colors.html">color</a></i>></dt>
<dd>색상을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-12785908325402490392012-09-14T13:18:00.001+09:002012-09-14T13:18:40.928+09:00text-decoration-line<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트의 라인 장식을 지정합니다. none 이외의 값은 여러 개를 함께 지정할 수 있습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-decoration-line0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>아니오</dd>
<dt>기본값</dt>
<dd>none</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-decoration-line</span><span style="color: black;">: </span><span style="color: black;">underline</span><span style="color: black;">;</span>
<span style="color: #7f0055; font-weight: bold;">text-decoration-line</span><span style="color: black;">: </span><span style="color: black;">underline overline</span><span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>none</dt>
<dd>텍스트에 줄을 긋지 않습니다.</dd>
<dt>underline</dt>
<dd>텍스트 아래에 줄을 긋습니다.</dd>
<dt>overline</dt>
<dd>텍스트 위에 줄을 긋습니다.</dd>
<dt>line-through</dt>
<dd>텍스트 가운데에 줄을 긋습니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-87363058492494157892012-09-14T12:49:00.000+09:002012-09-14T12:49:10.301+09:00text-indent<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
텍스트의 들여쓰기 간격을 지정합니다. each-line이나 hanging이 함께 지정되지 않으면 첫 줄에만 적용됩니다. 블록 컨테이너 요소에 적용할 수 있습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#text-indent" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-indent" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#text-indent0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>0</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-indent</span><span style="color: black;">: </span><span style="color: black;">5em</span><span style="color: black;">;</span>
<span style="color: #7f0055; font-weight: bold;">text-indent</span><span style="color: black;">: </span><span style="color: black;">5em each-line</span><span style="color: black;">;</span>
<span style="color: #7f0055; font-weight: bold;">text-indent</span><span style="color: black;">: </span><span style="color: black;">5em each-line hanging</span><span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.textIndent = "50px"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/lengths.html">length</a></i>></dt>
<dd>들여쓰기 간격을 길이 단위로 지정합니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/percentages.html">%</a></i>></dt>
<dd>컨테이너 블록의 너비에 대한 비율로 지정합니다.</dd>
<dt>hanging</dt>
<dd>CSS 3. 적용되는 라인을 반대로 적용합니다.</dd>
<dt>each-line</dt>
<dd>CSS 3. 강제 줄바꿈된 이후의 모두 첫 줄에도 들여쓰기가 적용됩니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-66619355809399614082012-09-14T12:34:00.000+09:002012-09-14T12:34:12.240+09:00letter-spacing<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
글자들 사이의 최소, 최대, 최적 간격을 지정합니다.<br />
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#letter-spacing" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#letter-spacing0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>normal</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">letter-spacing</span><span style="color: black;">: </span><span style="color: black;">3px</span><span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.letterSpacing = "10px"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>normal</dt>
<dd>현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/lengths.html">length</a></i>></dt>
<dd>길이 단위를 사용해서 간격을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com1tag:blogger.com,1999:blog-2916278782804513759.post-41206814116343746002012-09-14T12:30:00.000+09:002012-09-14T12:34:41.753+09:00word-spacing<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
단어들 사이의 최소, 최대, 최적 간격을 지정합니다.<br />
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#word-spacing" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#word-spacing0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>normal</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">word-spacing</span><span style="color: black;">: </span><span style="color: black;">30px</span><span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.wordSpacing = "10px"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>normal</dt>
<dd>현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.</dd>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/lengths.html">length</a></i>></dt>
<dd>길이 단위를 사용해서 간격을 지정합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-15755004309163740202012-09-14T10:46:00.000+09:002012-09-14T10:46:23.331+09:00text-justify<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<a href="http://css.elex.pe.kr/2012/09/text-align.html">text-align</a> 프로퍼티의 값이 justify인 경우에 정렬 방식을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-justify0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>auto</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-justify</span><span style="color: black;">: </span>inter-word<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>auto</dt>
<dd>웹브라우저가 자동으로 결정합니다.</dd>
<dt>none</dt>
<dd>정렬하지 않습니다.</dd>
<dt>inter-word</dt>
<dd>단어 사이의 공백 간격을 조절합니다.</dd>
<dt>inter-ideograph</dt>
<dd>단어 사이의 간격과 글자 사이의 간격을 조절합니다.</dd>
<dt>inter-cluster</dt>
<dd>단어 사이의 간격과 글자 사이의 간격을 조절합니다.
</dd>
<dt>distribute</dt>
<dd>단어 사이의 간격과 글자 사이의 간격을 동일하게 조절합니다.
</dd>
<dt>kashida</dt>
<dd>필기체 문자를 늘입니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-10052119706173204812012-09-14T10:31:00.000+09:002012-09-14T10:46:57.223+09:00text-align-last<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
마지막 줄의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#text-align-last0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>auto</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-align-last</span><span style="color: black;">:</span> right
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>auto</dt>
<dd><a href="http://css.elex.pe.kr/2012/09/text-align.html">text-align</a>의 값을 따라 정렬합니다.</dd>
<dt>start</dt>
<dd>시작 위치에 정렬합니다.</dd>
<dt>end</dt>
<dd>끝 위치에 정렬합니다.</dd>
<dt>left</dt>
<dd>왼쪽으로 정렬합니다.</dd>
<dt>right</dt>
<dd>오른쪽으로 정렬합니다.</dd>
<dt>center</dt>
<dd>가운데 정렬합니다.</dd>
<dt>justify</dt>
<dd><a href="http://css.elex.pe.kr/2012/09/text-justify.html">text-justify</a> 프로퍼티에 따라 정렬합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-18005623490040472702012-09-14T10:23:00.001+09:002012-09-14T10:47:25.490+09:00text-align<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
인라인 요소의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#text-align" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-align" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#text-align0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>start</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">text-align</span><span style="color: black;">: </span>right
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.textAlign = "right"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>start</dt>
<dd>CSS 3. 현재 라인 박스의 시작 위치에 정렬합니다.</dd>
<dt>end</dt>
<dd>CSS 3. 현재 라인 박스의 끝에 정렬합니다.
</dd>
<dt>left</dt>
<dd>왼쪽에 정렬합니다.</dd>
<dt>right</dt>
<dd>오른쪽에 정렬합니다.</dd>
<dt>center</dt>
<dd>가운데 정렬합니다.</dd>
<dt>justify</dt>
<dd><a href="http://css.elex.pe.kr/2012/09/text-justify.html">text-justify</a> 프로퍼티에 따라 정렬합니다.</dd>
<dt>match-parent</dt>
<dd>CSS 3. inherit과 유사하지만 start, end는 계산된 값이 사용됩니다.</dd>
</dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-18961364352693172322012-09-14T08:47:00.000+09:002012-09-14T08:47:56.778+09:00overflow-wrap<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
단어가 길어서 줄바꿈이 일어나는 경우에 단어를 나눌지 여부를 지정합니다. <a href="http://css.elex.pe.kr/2012/09/white-space.html">white-space</a> 프로퍼티가 자동 줄바꿈이 작동하도록 지정되어 있어야 적용됩니다.<br />
word-wrap은 overflow-wrap의 다른 이름입니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#overflow-wrap0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>normal</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">overflow-wrap</span><span style="color: black;">: </span>break-word<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>normal</dt>
<dd>줄바꿈이 허용된 곳에서만 줄바꿈을 합니다.</dd>
<dt>break-word</dt>
<dd>단어가 단누어질 수 있습니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-29125309129137101732012-09-14T08:40:00.000+09:002012-09-14T08:40:39.517+09:00hyphens<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
줄바꿈으로 단어가 나뉘어질 때 하이픈을 자동으로 삽입하는 방식을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#hyphens0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>manual</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">hypens</span><span style="color: black;">: </span>none<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>none</dt>
<dd>하이픈을 삽입하지 않습니다.</dd>
<dt>manual</dt>
<dd>HTML에서 소프트 하이픈 문자인 &shy;를 지정한 때에만 하이픈을 사용합니다.</dd>
<dt>auto</dt>
<dd>자동으로 처리합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-84205675295001675642012-09-14T08:27:00.000+09:002012-09-14T08:27:55.018+09:00word-break<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
줄바꿈을 적용할 때 단어를 나누는 규칙을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#word-break0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>normal</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">word-break</span><span style="color: black;">: </span>keep-all<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>normal</dt>
<dd>일반적인 규칙을 따릅니다.</dd>
<dt>keep-all</dt>
<dd>공백 이외에 서로 붙어있는 글자들을 한 단어로 붙여서 처리합니다.</dd>
<dt>break-all</dt>
<dd>문자 단위로 나뉘어질 수 있습니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-62087732880470077902012-09-14T08:12:00.000+09:002012-09-14T08:12:51.369+09:00line-break<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
요소 내부의 줄바꿈 규칙을 지정합니다. 주로 일본어 환경에서 사용됩니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#line-break1" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>auto</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">line-break</span><span style="color: black;">: </span>normal<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>auto</dt>
<dd>웹브라우저가 자동으로 결정합니다.</dd>
<dt>loose</dt>
<dd>줄바꿈 규칙을 최소화 합니다.</dd>
<dt>normal</dt>
<dd>일반적인 줄바꿈 규칙을 적용합니다.</dd>
<dt>strict</dt>
<dd>엄격한 줄바꿈 규칙을 적용합니다.</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0tag:blogger.com,1999:blog-2916278782804513759.post-22335861155211805262012-09-14T07:54:00.000+09:002012-09-14T07:56:10.454+09:00tab-size<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
탭(tab) 문자의 크기를 지정합니다. 음수는 지정할 수 없습니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/css3-text/#tab-size1" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>8</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">tab-size</span><span style="color: black;">: </span>4<span style="color: black;">;</span>
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt><<i><a href="http://css.elex.pe.kr/2012/09/integers.html">Integer</a></i>></dt>
<dd>탭 문자의 길이를 공백문자의 갯수로 지정합니다.</dd>
</dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com1tag:blogger.com,1999:blog-2916278782804513759.post-48353626500692876072012-09-14T07:48:00.000+09:002012-09-14T07:48:44.888+09:00white-space<div class="ad" style="background-color:#fff;border-radius: 5px; border: 1px solid #666; box-shadow: 3px 3px 1px 1px #444; float: right; margin: 0 0 0.76em 0.82em; padding: 3px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7196581333897022";
/* CSS 본문 */
google_ad_slot = "4669291549";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
공백 문자의 처리 방식을 지정합니다.<br />
<dl>
<dt>CSS Level</dt>
<dd><a href="http://www.w3.org/TR/CSS1/#white-space" target="_blank">CSS 1</a>, <a href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space" target="_blank">CSS 2</a>, <a href="http://www.w3.org/TR/css3-text/#white-space0" target="_blank">CSS 3</a></dd>
<dt>상속</dt>
<dd>예</dd>
<dt>기본값</dt>
<dd>CSS 2에서의 기본값은 normal입니다.<br />CSS 3에서는 기본값이 정의되지 않았습니다.</dd>
</dl>
</div>
<div style="clear: both;">
<br />
<h3>
사용법</h3>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><span style="color: #7f0055; font-weight: bold;">white-space</span><span style="color: black;">: </span>pre<span style="color: black;">;</span>
</code></pre>
<pre style="background-color: white; border-radius: 5px; border: 1px solid #666; box-shadow: 6px 6px 3px 1px #666; font-face: monospace; margin: 0.76em; padding: 0.82em;"><code><i>object</i>.style.whiteSpace = "pre"
</code></pre>
<br />
<h3>
속성</h3>
<dl>
<dt>normal</dt>
<dd>둘 이상의 연속된 공백은 하나로 합쳐집니다.<br />줄바꿈: 합침, 공백: 합침, 자동 줄바꿈: 사용.</dd>
<dt>pre</dt>
<dd>연속된 공백을 합치지 않습니다.<br />줄바꿈: 보존, 공백: 보존, 자동 줄바꿈: 안함.
</dd>
<dt>nowrap</dt>
<dd>여러 개의 공백을 하나로 합치지만 자동 줄바꿈 기능을 사용하지 않습니다.<br />줄바꿈: 합침, 공백: 합침, 자동 줄바꿈: 안함.
</dd>
<dt>pre-wrap</dt>
<dd>여러 개의 공백을 하나로 합치지 않지만 자동 줄바꿈 기능은 사용합니다.<br />줄바꿈: 보존, 공백: 보존, 자동 줄바꿈: 사용.
</dd>
<dt>pre-line</dt>
<dd>연속된 공백은 합쳐지고 자동 줄바꿈 기능도 사용합니다. 강제 줄바꿈은 유지됩니다.<br />줄바꿈: 보존, 공백: 합침, 자동 줄바꿈: 사용.
</dd></dl>
<br />
<br /></div>Elexhttp://www.blogger.com/profile/04776810249062811247noreply@blogger.com0