2. CSS(Cascading Style Sheets language)


2.4 텍스트간의 설정

  앞의 2.3에서는 텍스트 자체를 표기하기 위한 방법과 관련된 속성들의 종류들을 본 것이고, 이번장에서는 텍스트 간의 간격이나, 정렬방식등에 대한 것에 대해서 알아본다.

  • letter-spacing / letterSpacing : 글자간의 간격으로 normal과 숫자로 직접 지정할 수 있다. 숫자로 지정시에는 지정할때는 cm, mm, in, pt, pc, px, em, ex와 같은 단위를 사용할 수 있다.

  • word-spacing / wordSpacing : 단어간의 간격으로 normal과 숫자로 직접 지정할 수 있다. 숫자로 지정시에는 지정할때는 cm, mm, in, pt, pc, px, em, ex와 같은 단위를 사용할 수 있다.

  • line-height / lineHeight : 줄간의 간격을 지정한다.
    * 지정하는 방법으로는 normal과 사이즈를 직접지정하거나, 백분율로 지정할수 있다. 사이즈를 지정할때는 cm, mm, in, pt, pc, px, em, ex와 같은 단위를 사용할 수 있다.

  • text-align / textAlign : 수평 정렬방식을 지정한다.
    * 속성값 : left, right, center, justify(폭에 맞춰 고르게 정렬한다.)

  • text-indent / textIndent : 한 문단에서 첫 글자를 얼마나 들여쓸지를 지정한다. 지정할때는 cm, mm, in, pt, pc, px, em, ex와 같은 단위를 사용할 수 있다.

  • text-justify / textJustify : 한줄을 표기함에 있어서 화면에 맞도록 조절하도록 지정할 수 있다.
    * 속성값 : auto(default), distribute(Line에 맞게), distribute-all-lines, inter-cluster, inter-ideograph, inter-word, kashida, newspaper

  • text-decoration / textDecoration : 기본 글자에 여러가지 효과들을 추가할 수있다.
    * 속성값 : none, underline(밑줄), overline(윗줄), line-through(지워진효과), blink(깜빡임)
    하이퍼 링크가 될때 나타나는 밑줄을 없애려면, 다음과 같이 하면 된다.
    <a href="test.html" style="text-decoration: none"> Link </a>

  • vertical-align / verticalAlign : 수직 정렬 방식을 지정한다.
    • Baseline : 기준 정렬
    • Sub : 상대적으로 아래쪽에 정렬
    • Super : 상대적으로 위쪽에 정렬
    • Text-top : 글자를 기준으로 위쪽에 정렬
    • Text-bottom : 글자를 기준으로 아래쪽에 정렬
    • Middle : 소문자 x 높이 만큼 수직적으로 정렬한다.
    • Top : 가장 위에 있는 요소에 맞추어 정렬한다.
    • Bottom : 가장 아래에 있는 요소와 맞추어 정렬한다.
    • % (Percentage) : 양수, 음수, 퍼센트값등을 이용해서 직접 명시할 수도 있다.

  • text-transform / textTransform : 지정된 문자를 변환하는데, 대문자, 소문자, 첫문자만을 대문자로 바꿀수 있다.
    * 속성값 : none, capitalize, uppercase, lowsercase

  • text-underline-position / textUnderlinePosition : 밑줄이 그어지는 위치를 지정할 수 있다.
    * 속성값 : below(default, 밑줄), above(위)

- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master