본문 바로가기
vita_Programing

CSS Text color : 기본적인 사용법과 다양한 색상 적용 예제

by lemonvita 2023. 11. 4.
728x90
반응형

 

 

CSS Text color

기본적인 사용법과 다양한 색상 적용 예제

 

 

 

728x90

 

 

안녕하세요, 웹 개발자 여러분,

이번 포스팅은 프런트엔드 웹개발에서 필수인 CSS에서 중요한 요소인 'color의 속성에 대해 쉽게 알아보도록 하겠습니다.

 

텍스트 색상 설정 - CSS color 

CSS에서는 웹페이지의 배경색을 변경하기 위해 'color' 속성을 사용합니다.

이 속성은 웹페이지의 텍스트 색상을 설정하거나, 변경할 수 있으며 텍스트 이미지가 배치된 요소의 색상을 설정하는데도 사용됩니다.

 

 

 

CSS color 기본 사용법

CSS color의 기본 사용법은 다음과 같습니다.

 

selector {
  color: color;
}

 

이때, 'selector'는 색상을 변경하고자 하는 요소를 선택하는 부분이며, 'color'는 원하는 색상을 지정하는 부분입니다.

'color'는 이름(예: red, blue), RGB, RGBA, HEX 등 다양한 형식으로 지정할 수 있습니다.

 

 

 

CSS color 색상 적용 예제

다양한 색상을 적용하는 예제를 살펴보겠습니다.

 

1. 이름으로 색상 적용하기

body {
  color: red;
}

 

 

2. RGB로 색상 적용하기

body {
  color: rgb(255, 0, 0);
}

 

 

3. RGBA로 색상 적용하기

body {
  color: rgba(255, 0, 0, 0.3);
}

 

 

4. HEX로 색상 적용하기

body {
  color: #ff0000;
}

 

 

이렇게 다양한 방법으로 CSS color를 통해 웹페이지 요소의 텍스트 색상을 다양하게 변경할 수 있습니다.

웹페이지의 디자인에 맞게 색상을 잘 선택하여 사용하시면 되겠습니다.

 

 

 

마무리

이번 포스팅은 지난 background-color에 이어 CSS의 color에 대해 알아보았습니다. 이를 통해 웹페이지의 텍스트 색상을 자유롭게 변경할 수 있습니다. 다음에는 다른 CSS 속성에 대해 알아보도록 하겠습니다. 감사합니다.




728x90
반응형