CSS 텍스트 스타일: color text-decoration text-transform

CSS 텍스트 스타일: color text-decoration text-transform

  앞에서는 글꼴과 관련된 스타일을 배워보았습니다. 이번에는 글자의 색깔, 장식, 효과 등을 지정해주는 텍스트 스타일을 배워보겠습니다.

 

 

1. color

  - color 속성을 사용하면 글자 색을 지정할 수 있습니다.

  - 선택자 { color: 색상; } 의 형식으로 사용합니다.

  - 주로 세 가지 방법으로 색상을 지정해줍니다.

  - 첫 번째 방법은 색상의 이름을 써주는 것입니다. 위 예시에서 .blue { color: blue; }로 작성된 부분이 그것입니다. 파란색으로 색상을 지정해 준 것입니다.

  - 두 번째 방법은 rgb값을 써주는 것입니다. 위 예시에서 .red { color: rgb{255, 0, 0); }로 작성된 부분이 그것입니다. 빨간색으로 색상을 지정해 준 것입니다.

  - rgb는 뒤에 오는 ( )괄호 안의 숫자가 차례대로 빨간빛, 초록빛, 파란빛의 양을 나타냅니다. 숫자를 조절하면서 빨간빛, 초록빛, 파란빛을 적절히 섞는 것이지요. 0이 최소로, 255가 최대로 많은 양을 섞은 것입니다. rgb(255, 0, 0)은 빨간빛만 최대로 섞고, 초록빛·파란빛은 섞지 않은 것입니다. 따라서 rgb(255, 0, 0)는 빨간빛 원색을 표현해줍니다.

  - 세 번째 방법은 HEX값을 써주는 것입니다. 위 예시에서 .yellow { color: #ffff00; }로 작성된 부분이 그것입니다. 노란빛으로 색상을 지정해 준 것입니다.

  - HEX값은 16진수 표기법으로 빨간빛(red), 초록빛(green), 파란빛(blue)의 조합을 나타냅니다.

  - #000000은 어떤 빛도 섞지 않았기 때문에 검정빛으로, #ffffff은 모든 빛을 섞었기 때문에 흰빛으로 표현됩니다.

  - 굉장히 복잡해 보이지요? 저걸 어떻게 이해하고 모두 기억할까요?

  - 물론 모두 이해하고 기억하면 좋지만 그럴필요는 없습니다.

  - Google에 컬러피커(Color Picker)를 검색해봅니다. 그곳에서 원하는 색깔을 골라 HEX 값이나, rgb 값을 복사해 넣어주면 됩니다.

 

 

2. text-decoration

  - text-decoration 속성을 사용하면 텍스트에 줄을 긋거나 없앨 수 있습니다.

  - 선택자 { text-decoration: 속성값; } 의 형식으로 사용합니다.

  - 속성값으로 none을 주면, 밑줄을 표시하지 않습니다. 텍스트에 링크를 걸면 자동으로 밑줄이 그어집니다. 이 때 text-decoration: none을 사용하면 그 밑줄을 없앨 수 있습니다.

  - 속성값으로 underline을 주면, 밑줄을 표시해줍니다.

  - 속성값으로 overline을 주면, 윗줄을 표시해줍니다.

  - 속성값으로 line-through를 주면, 취소선을 표시해줍니다.

 

 

3. text-transform

  - text-transform 속성을 사용하면 텍스트를 대·소문자로 변환해줄 수 있습니다.

  - none은 기본값입니다. 쓴대로 나옵니다.

  - capitalize는 첫 번째 글자를 대문자로 변환해줍니다.

  - uppercase는 모든 글자를 대문자로 변환해줍니다.

  - lowercase는 모든 글자를 소문자로 변환해줍니다.