CSS Font 및 문단 모양

 Font 및 문단 모양

■ white-space

   white-space 는 해당 요소의 공백 처리 방법을 결정한다. (pre 태그 대용)

 

   normal : 띄어쓰기와 줄바꿈을 모두 통합.

   nowrap : 띄어쓰기를 통합. 줄바꿈은 보존.

   pre : 모두 보존.

■ word-wrap

   1byte 문자열이 공백 없이 등장하는 경우 모든 브라우저들은 이를 하나의 단어로 해석하기 때문에 개행하지 않는다. 이것을 강제로 개행할 수 있다. 모든 브라우저가 이 속성을 지원한다.

   값 : normal | break-word

  예 : word-wrap:break-word; 

■ text-overflow

   말줄임(문자열의 폭에 넘친 경우 넘친 부분을 ...으로 표시 한다.)

   IE는 IE 6 버전부터 지원하고 있다. Firefox 브라우저는 7.0 부터 지원한다. 이 속성은 display 속성이 inline-block 또는 block을 지닌 요소에 적용할 수 있다. white-space:nowarp; overflow:hidden 속성을 함께 사용해야 한다.

   값 : clip | ellipsis | ellipsis-word | inherit

     clip은 단순히 엘리먼트 테두리에서 글자가 잘리게 된다.

     ellipsis는 테두리에 닿을 정도가 되면 text-overflow-ellipsis 속성에 정해준 string이 표시된다. 기본값은 "... "

     ellipsis-word는 테두리에 닿을 마지막 단어에서 자르게 된다. 

     text-overflow-mode의 값이 ellipsis일 때 들어갈 string을 정할수있다. url을 지정하여 이미지를 삽입할 수 도 있다. string을 넣을때는 엘리먼트의 폰트크기와 동일하게 된다.(uri | text | inherit)

  예 : text-overflow:ellipsis;

■ font-family

  화면에 나타나는 글씨의 종류 설정. 시스템 내 폰트 이름 중 하나 사용

  값 : 글꼴

  Scripting : object.style.fontFamily [ = sFamily ] 

  

  예 : p {font-family:굴림}

         p {font-family : 굴림, arial} /* 굴림 글꼴이 존재하지 않으면 에리얼 글꼴 사용 */

■ font-style

  폰트의 스타일 지정

  값 : normal, italic, oblique

  

  예 : h1 {font-style:italic}

■ font-weight:값

  폰트의 굵기를 지정

  값 : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

  

  예 : h1 {font-weight:bold}

■ font-size:값

  원하는 폰트의 크기를 지정하며, 변수로는 x-small, small, large등이 있지만 기본적으로 숫자를 많이 사용한다.

  값

   절대 값 : 포인트(pt), 센티미터(cm), 픽셀(px), 인치(in), x-small, small, medium, large, x-large, xx-large

   상대 값 : larger, smaller, 퍼센트 값

  스크립트 : this.style.fontSize

■ font-variant:small-caps | normal

  폰트 변이로 font를 작은 대문자(small-caps) 이나 normal로 지정 한다.

  

  예 : h3 {font-variant: small-caps;}

        .font5 {font-variant: small-caps;}

■ font

  간략하게 폰트의 여러 특성을  한 번에 지정 할 수 있는데 지정하는 순서는 바뀌면 않아야 되고 순서는 font{font-style font-variant font-weight font-size/line-height font-family ;} 이며 빈칸으로 구분 되고  값은 생략 될 수 있다.

  

  예 : p {font: italic normal bold 12pt/14pt 궁서,'Courier New';}

        .font12 {font: bold 12pt/14pt Helvetica,sans-serif;}

■ color 

  color 속성을 이용하여 텍스트의 색상을 지정

  값 : #RGB 또는 색상

  스크립트 : this.style.color='색상';

■ direction 

   글자의 방향을 지정(문단 모양 지정)

   속성값은 ltr(left to right), rtl(right to left) 두가지 중 하나를 사용

<p style="direction: ltr">direction 속성값을 ltr로 지정한 문단</p>

<p style="direction: rtl">direction 속성값을 rtl로 지정한 문단</p> 

■ backgroud-color 

   배경색을 지정

<p style="background-color:yellow;">문단의 배경색을 yellow로 지정</p> 

■ line-height 

   라인의 높이를 지정

   값 : pt 또는 %

<p style="line-height: 10px; background-color:gray;">라인의 높이를 10픽셀로 지정</p>

■ letter-spacing

   글자 사이의 간격을 지정

   값 : normal 또는 길이

<p>일반적인 문장</p>

<p style="letter-spacing:-2px">글자사이의 간격을 좁힌 문장</p>

<p style="letter-spacing:3px;">글자사이의 간격을 넓힌 문장</p> 

■ text-align

   텍스트의 정렬을 지정

   값 : left, right, center, justify

<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-decoration

  텍스트를 몇가지 형태로 꾸밀 수 있다.

  속성값 : none, underline(밑줄), overline(윗줄), line-through(문자 가운데를 관통하는 줄), blink(깜박임, 파이어폭스만 가능)

<p style="text-decoration:underline">underline 속성값이 적용된 예문입니다.</p>

<p style="text-decoration:overline">overline 속성값이 적용된 예문입니다.</p>

<p style="text-decoration:line-through">line-through 속성값이 적용된 예문입니다.</p>

■ text-indent

   들여쓰기 효과를 지정

   값 : 숫자 또는 백분율

<p>일반적인 문단입니다.</p>

<p style="text-indent:20px;">20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.</p> 

■ word-spacing

   단어 사이의 간격을 지정

   값 : normal 또는 길이

<p>일반적인 문단입니다.</p>

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

■ vertical-align:값

  수직 정렬 방식 지정

  값

    baseline : 문자의 기초 선에 맞추어 정렬.

    top : 상단에 정렬

    middle : 문자의 중앙을 기초 선으로 해서 정렬.

    bottom : 하단에 정렬

    sub : 아래첨자 Subscript

    super  : 윗 첨자 Superscript

    text-top : 문자의 윗선을 기초 선으로 해서 정렬.

    text-bottom : 문자의 밑 선을 기초 선으로 해서 정렬.

    백분율 : 문자 높이의 백분율로 기초선 결정.

<style type="text/css">

sup {vertical-align:super; font-size:14; color:#0000ff;}

</style>

  보통글자와 글자 ^super 지정

■ text-transform:값

   텍스트를 대소문자로 변환

   값 : none, capitalize, uppercase, lowercase

        capitalize : 각 단어의 첫 글자를 대문자로 바꾼다.

        uppercase : 모든 글자를 대문자로 바꾼다.

        lowercase : 모든 글자를 소문자로 바꾼다.

■ first-letter 

   문장에서 첫 번째 글자의 스타일 적용

   형식 : [element]:first-letter {sRules }

   <style type="text/css">

        p.double:first-letter{font:bold 200%; color:tomato;text-decoration: underline;} 

        /*p tag에만 적용되는 double 클래스를 지정하고, :first-letter 가상 element 사용*/

    </style>

    <p class="double">문장 중에서 첫 번째 글자를 다루는 가상 element입니다.  

        첫 번째 글자에 가상 클래스를 적용해서 css property 들을 지정합니다. 

        문장의 첫 번째 글자만 영향을 받고 나머지 글자들은 영향을 받지 않습니다.</p>