[웹개발] CSS 텍스트 제어하기

안녕하세요

로로봉입니다 : )

오늘은 CSS를 이용해 텍스트를 제어해보도록 하겠습니다.

CSS는 웹 페이지 내에서 텍스트의 색상, 글자체, 정렬, 크기 등 다양한 부분을 속성으로 설정하도록 제공합니다.

---

1) 글자색

글자색은 color 속성으로 설정합니다. color 속성에 설정할 수 있는 값은 걸러명, 색상표 값, RGB 값이 있습니다.

// 컬러명으로 글자색 설정
p{color:red;}

// 색상표 값으로 글자색 설정
p{color:#ff0000;}

// RGB 값으로 글자색 설정
p{color:rgb(255,0,0);}

---

2) 폰트

CSS는 글자체, 크기, 폰트 스타일 등 폰트와 관련된 속성들을 설정할 수 있습니다.

스타일 명	기능
font-family	글자체를 설정합니다.
font-size	글자 크기를 설정합니다. 크기 값의 단위는 픽셀(px), 퍼센트(%), em이 있습니다. 1em은 16px의 크기를 가집니다.
font-style	글자에 스타일을 설정합니다.설정 값으로 normal, italic, oblique 이 있습니다.
font-weight	글자의 두께를 설정합니다.설정 값으로 normal, bold 가 있습니다.

 

---

3) 정렬

텍스트를 수평으로 정렬하는 속성은 text-align 입니다.

스타일 명	기능
text-align:right	오른쪽 정렬
text-align:center	가운데 정렬
text-align:left	왼쪽 정렬

---

4) 데코레이션

text-decoration 속성은 텍스트에 밑줄이나 관통한 줄(취소선)을 추가해 줍니다.

스타일 명	기능
text-decoration:overline	상단 줄
text-decoration:line-through	관통한 줄 (취소 선)
text-decoration:underline	하단 줄

 

좋아요♥ + 구독 부탁드립니다 : )