[CSS] 텍스트 에 대해 알아보자.

텍스트에 적용하는 CSS 속성

HTML문서에서는 아무래도 텍스트가 가장 많은 비중을 차지합니다. HTML태그는 텍스트의 스타일 표현에 한계가 있으므로 반드시 CSS를 익혀서 텍스트의 스타일을 지정하여야 합니다. 텍스트의 스타일을 지정하기 위한 속성들은 아래와 같습니다. 속성 속성값 설명 color red, #FF0000 텍스트 색상 direction ltr, rtl 텍스트 방향 line-height 150% 줄 간격 letter-spacing -0.1px 글자 간격 text-align left, right, center, justify 텍스트 정렬 text-decoration none, underline, overline, line-through, blink 텍스트 장식 text-indent 20px 들여쓰기 text-transform none, capitalize, uppercase, lowercase 대소문자 지정 word-spacing 1px 단어 간격   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은 단어 사이의 간격을 지정합니다.