<HTML5+CSS3>텍스트 스타일

여기서 텍스트 스타일은 글자들과 단어들 그리고 문단에서 사용되는 스타일 입니다.

direction 속성

-텍스트의 쓰기 방향을 지정합니다.

ex) direction : 속성 값 ;

ex) h3 {direction : rtl ; } ->제목을 오른쪽에서 왼쪽으로 표시

 

속성 값

(1) ltr :기본 값으로 왼쪽에서 오른쪽으로 텍스트 표시

(2) rtl :오른쪽에서 온쪽으로 텍스트 표시

 

text-align속성 – 텍스트 정렬하기

-문단의 텍스트 정렬 방법을 지정하는 속성이다. 속성 값은 left,right,center,justify(양쪽)에 맞춰 정렬하게 된다. 부모 요소의 값을 상속한다

ex) text-align : 속성 값 ;

다음 예는 memo라는 클래스 이름을 가진 요소의 텍스트를 가운데로 정렬하도록 지정한 것

ex) .memo { text-align:center ; }

 

text-shadow속성 – 텍스트에 그림자 효과 추가하기

-텍스트를 좀 더 입체적으로 보이게 한다. 선명하게할 수 있다. 기본형에 있는 순서대로 각각의 값을 입력한다.

ex) text-shadow : h-shadw 값 v-shadow 값 blur 값 color 값;

 

속성 값

(1)h-shadow : 그림자의 가로 옵셋 거리 양수:오른쪽 음수:왼쪽 그림자

(2)v-shadow : 그림자의 세로 옵셋 거리 양수:아래쪽 음수:위쪽 그림자

(3)blur : 그림자가 번지는 정도 (생략가능)

(4)color : 그림자 색상 지정 16진수 rgb

 

ex) h1　｛text-shadow : 2px 2px 2px black ; }

 

%일반적으로 그림자 색상은 한 가지로 표시하지만, 둘 이상의 그림자 색상을 사용하면 더 화려함. 그림자 영역을 여러 개 지정

 

text-decoration 속성 – 텍스트에 줄 표시하기

-이 속성을 이용하면 텍스트에 밑줄을 긋거나 가로지르는 줄을 표시할 수 있다.

기본적으로 나타나는 텍스트 링크의 밑줄을 없앨 때 주로 사용

ex)text-decoration: 속성값 ;

 

속성 값

(1)none : 밑줄 표시 X

(2)underline : 밑줄 표시 (O)

(3)overline : 영역 위로 선을 그린다.

(4)line-through :영역을 가로지르는 선을 그린다.

 

ex) 모든 텍스트 링크의 밑줄을 없애도록 지정한 것입니다.

a {text-decoration:none ; }

 

% 번외 )class= .   id= # 으로 스타일을 불러와 지정한다.

text-indent 속성 – 텍스트 들여쓰기

-문단의 첫 글자를 얼마나 들여쓸지 지정한다. 값은 크기 값이나 백분율을 사용한다. (앞에 공백이 생김)

ex)p {text-indent:10px} ->텍스트 단락의 첫 글자를 10px만큼 들여씀

 

text-transform 속성 – 텍스트 대 소문자 변환하기

-텍스트를 대문자 혹은 소문자로 변환합니다. 영문자에만 적용됩니다.

 

속성 값

(1)capitalize : 시작하는 첫 번째 글자를 대문자로 변경

(2)uppercase : 모든 글자를 대문자로 변환

(3)lowercase : 모든 글자를 소문자로 변환

(4)none : 변환하지 않습니다.