[CSS3] #2. 텍스트를 표현하는 다양한 스타일

 

텍스트와 관련된 스타일

 

텍스트 스타일 속성

• color : 글자색을 지정합니다.
• text-decoration : 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정합니다.
• text-transform : 텍스트 전체, 또는 첫 글자를 대문자로 표시합니다.
• text-shadow : 텍스트에 그림자를 추가합니다.
• letter-spacing : 글자 사이의 간격을 지정합니다.
• word-spacing : 단어 사이의 간격을 지정합니다.
• text-align : 텍스트 정렬 방법을 지정합니다.
• line-height : 줄 간격을 조절합니다.

 

 

text-align 속성

 

text-align 속성은 텍스트 정렬 방법을 지정하는 속성이다.

속성값으로 center를 주면 텍스트가 가운데로 정렬된다.

 

text-align속성의 속성값

• center : 가운데로 정렬된다.
• right : 오른쪽으로 정렬된다.
• left : 왼쪽으로 정렬된다.

 

---

 

line-height 속성

 

line-height속성은 줄 간격을 조절한다.

속성값으로는 px(픽셀)이 올수도 있고, %가 올수고 있고, em이 올수도 있다.
글자크기의 1.5배를 지정하고 싶으면 150% 또는 1.5라고 써주면 된다.

 

---

 

text-decoration 속성

 

 

text-decoration속성의 속성값

• underline : 밑줄을 긋는다.
• overline : 텍스트의 위에 줄이 생긴다.
• line-through : 취소선이 그어진다.
•  none : 링크의 밑줄을 없앤다.

 

 

text-decoration:underline; 사용 예

---

 

text-shadow 속성

 

text-shadow 속성은 텍스트에 그림자 효과를 준다.

 

text-shadow를 지정할때는
그림자의 가로거리, 세로거리, 번지는 정도, 그림자색상을 속성값으로 지정해주면 된다.

 

 

 

---

 

목록 스타일

 

 

list-style-type 속성 / list-style 속성

 

리스트에 스타일을 줘서 불릿을 조절할 수 있다.

 

list-style: none; 불릿을 없앤다.

list-style: upper-alpha;  대문자 알파벳으로 바꾼다.

 

 

---

표 스타일 

 

caption-side 속성

표 제목은 <caption>태그를 이용해 캡션으로 표시한다. 이때 기본적으로 캡션은 표의 위쪽에 표시되지만 
caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다.

 

 

 

 

border속성과 border-collapse속성

표의 테두리를 표현할 때 사용한다.