CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 2 (8)

CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 2 (8)

오늘은 CSS3의 여덟번째 내용으로 CSS 스타일 속성 중 어제 못다한 

텍스트 속성에 관련되어 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

4. 텍스트 변환

텍스트 변환 입니다.

텍스트의 변환은 이전 포스팅에 표에 나와 있듯이

text-transfor 속성을 사용하는데 이러한 속성은 아래와 같이 값이

여러 가지가 있습니다.

<text-transfor 사용법>

위 text- transform 속성은 위와 같이 none, capitalize, inherit, lowercase, uppercase

등 값이 있으며 이러한 값은 아래와 같습니다.

<text-transfor 속성 값>

1. none : 기본 값으로 적용이 되지 않았다는 뜻

(쓰지 않는것과 동일 함)

2. capitalize : 각 단어의 첫번쨰 문자만 대문자로 변경

3. uppercase : 모든 문자를 대문자로 변경 합니다.

4. lowercase : 모든 문자를 소문자로 변경 합니다.

5.  inherit : 상위 객체의 값을 그대로 상속 받아 적용시킵니다.

5. 텍스트 그림자

텍스트 그림자 입니다.

이 내용 또한 이전 포스팅 표에 나와 있는 내용으로 텍스트에 그림자를 넣는 속성인데

이러한 속성은 text-shadow 라는 속성을 사용 합니다.

<text-shadow 속성 사용법>

text-shadow 속성 사용법은 위와 같이 사용자가 입력하고 싶은

색상(16진수, 10진수, 이름 등)을 입력하여 그림자 색상을 정하고 그 다음

3px : 그림자의  x 방향 이동 거리, 6px : 그림자의 y방향 이동 거리

9px : 그림자의 흐림 정도를 기입 합니다.

여기까지 텍스트 속성의 변환, 그림자 관련 속성을

알아 보았으며 이 다음 포스팅 부터는 css 박스모델에 관련된

내용에 대해서 조금씩 알아 보도록 하겠습니다. ^^

이상 CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 - 2  (8)에 

관련된 포스팅을 마치도록 하겠습니다.