텍스트 - color / direction / backgroud-color / line-height / letter-spacing / decoration / indent / word-spacing

CSS 텍스트 color

color 속성을 이용하여 텍스트의 색상을 지정할 수 있습니다. <p style="color:red">이 문단은 붉은색으로 지정됩니다.</p> 이 문단은 붉은색으로 지정됩니다. 한 문단 전체에 지정하지 않고 일부에만 색상을 지정할려면 <span>태그를 사용하여 지정하면 됩니다. <p>문단 전체의 색을 지정하지 않고 <span style="color:red">일부에만</span> 색을 지정할 수 있습니다.</p> 문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다. 테이블 안에도 사용이 가능합니다. <table> <tr>     <td style="color:red">이 셀안의 텍스트트 붉은색으로 지정됩니다.</td> </tr> </table> 이 셀안의 텍스트트 붉은색으로 지정됩니다. 하이퍼 링크의 색상을 지정할 수도 있습니다. <style type="text/css"> a {color:red} a:hover {color:green} </style> <p><a href="http://www.hoemjjang.com">홈짱닷컴</a>은 홈페이지 제작을 위한 가이드 역할을 합니다.</p>

CSS 텍스트 direction

directon 속성을 사용하면 글자의 방향을 지정할 수 있습니다. <p style="direction: ltr">direction 속성값을 ltr로 지정한 문단</p> <p style="direction: rtl">direction 속성값을 rtl로 지정한 문단</p> 속성값은 ltr(left to right), rtl(right to left) 두가지 중 하나를 사용하면 됩니다. direction 속성값을 ltr로 지정한 문단 direction 속성값을 rtl로 지정한 문단

CSS 텍스트 backgroud-color

backgroud-color 속성을 사용하면 배경색을 지정할 수 있습니다. <p style="background-color:yellow;">문단의 배경색을 yellow로 지정</p> 문단의 배경색을 yellow로 지정 color 속성과 마찬가지로 문단의 일부에만 배경색을 지정할려면 <span>태그를 사용하면 됩니다. <p>문단의 <span style="background-color:yellow;">일부분의</span> 배경색을 yellow로 지정</p> 문단의 일부분의 배경색을 yellow로 지정 테이블에도 배경색을 지정하는 경우가 많습니다. <table border="1"> <tr>     <td style="background-color:yellow;">background-color</td> </tr> <tr>     <td>테이블의 배경색을 지정하는데 사용하는 속성입니다.</td> </tr> </table> background-color 테이블의 배경색을 지정하는데 사용하는 속성입니다.

CSS 텍스트 line-height

라인의 높이를 지정합니다. 화면상에서 확인하기 쉽게 문단에 배경이미지를 적용해 보겠습니다. <p style="line-height: 10px; background-color:gray;">라인의 높이를 10픽셀로 지정</p> <p style="line-height: 30px; background-color:gray;">라인의 높이를 30픽셀로 지정</p> 라인의 높이를 10픽셀로 지정 라인의 높이를 30픽셀로 지정 그러나 라인의 높이라기 보다는 줄간격으로 해석하는게 좋습니다. 배경색을 지정하지 않는 경우 leight-height를 10픽셀로 지정하는건 별 의미가 없습니다. 한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋습니다. 아래 예제는 줄사이의 간격을 확인하기 위해서 문단의 width를 200픽셀로 좁게 만들어 보았습니다. <p style="width:200 ;">라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다.</p> <p style="width:200 ; line-height:140%;">이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다.</p> 아래의 문단은 leight-height를 140%로 지정하였습니다. 위의 문단과 비교해서 줄 사이의 간격이 넓으므로 가독성에 도움이 된다는 사실을 알 수 있습니다. 라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다. 이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다.

CSS 텍스트 letter-spacing

letter-spacing 속성은 글자 사이의 간격을 지정합니다. 한글의 경우 이 간격을 조금 좁혀주면 괜찮습니다. <p>일반적인 문장</p> <p style="letter-spacing:-2px">글자사이의 간격을 좁힌 문장</p> <p style="letter-spacing:3px;">글자사이의 간격을 넓힌 문장</p> 일반적인 문장 글자사이의 간격을 좁힌 문장 글자사이의 간격을 넓힌 문장

CSS text-align

text-align 속성은 텍스트의 정렬을 지정합니다. <p style="text-align:left">왼쪽 정렬입니다.</p> <p style="text-align:right">오른쪽 정렬입니다.</p> <p style="text-align:center">가운데 정렬입니다.</p> <p style="text-align:justify; width:200">자동 줄바꿈시 오른쪽 경계선 부분이 정리됩니다. 이 부분은 자동 줄바꿈이 되어야 효과를 확인할 수 있습니다. 그래서 문단의 width 속성을 200픽셀로 좁혀보았습니다.</p> text-align의 속성갑으로는 left, right, center, justify 이 4가지를 사용할 수 있습니다. 왼쪽 정렬입니다. 오른쪽 정렬입니다. 가운데 정렬입니다. 자동 줄바꿈시 오른쪽 경계선 부분이 정리됩니다. 이 부분은 자동 줄바꿈이 되어야 효과를 확인할 수 있습니다. 그래서 문단의 width 속성을 200픽셀로 좁혀보았습니다.

CSS text-decoration

text-decoration 속성을 사용하면 텍스트를 몇가지 형태로 꾸밀 수 있습니다. <p style="text-decoration:underline">underline 속성값이 적용된 예문입니다.</p> <p style="text-decoration:overline">overline 속성값이 적용된 예문입니다.</p> <p style="text-decoration:line-through">line-through 속성값이 적용된 예문입니다.</p> <p style="text-decoration:blink">blink 속성값이 적용된 예문입니다.</p> underline 속성값이 적용된 예문입니다. overline 속성값이 적용된 예문입니다. line-through 속성값이 적용된 예문입니다. blink 속성값이 적용된 예문입니다. blink 속성값은 인터넷익스플로러(IE)에서는 효과가 나타나지 않습니다. 글자가 깜박이는 효과인데 파이어폭스(FireFox)에서는 제대로 나타납니다. blink 속성값을 확인하실려면 파이어폭스를 설치하고 확인하면 됩니다.

text-decoration 속성값을 하이퍼링크의 스타일을 지정하는데 많이 사용합니다. 기본적으로 하이퍼링크는 underline 속성값이 지정된 상태입니다. 그래서 이 underline을 없애는 경우가 많습니다. <style type="text/css"> a:link { text-decoration: none;} a:visited { text-decoration: none;} a:active { text-decoration: none;} a:hover {text-decoration:underline;} </style> <a href="http://www.homejjang.com">홈짱닷컴</a>은 초보자를 위한 홈페이지 제작가이드입니다.

CSS text-indent

text-indent 속성은 들여쓰기 효과를 지정합니다. 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 합니다. <p>일반적인 문단입니다.</p> <p style="text-indent:20px;">20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.</p> 일반적인 문단입니다. 20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.

CSS word-spacing

word-spacing 속성은 단어 사이의 간격을 지정합니다. <p>일반적인 문단입니다.</p> <p style="word-spacing:10px;">word-spacing 속성값으로 10픽셀을 지정한 문단입니다. letter-spacing이 글자사이의 간격을 지정한다면, word-spacing은 단어 사이의 간격을 지정합니다.</p> 일반적인 문단입니다. word-spacing 속성값으로 10픽셀을 지정한 문단입니다. letter-spacing이 글자사이의 간격을 지정한다면, word-spacing은 단어 사이의 간격을 지정합니다.

※출처 : http://www.homejjang.com/