• 회원가입
  • 로그인
  • 구글아이디로 로그인

[text] CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = color속성, 상속O)

목차

  1. color 예제 - 글자 색상 변경
  2. color 정의
  3. color 구문

 

color 예제 - 글자 색상 변경

[방법1]
 
<style>
h1 {color: red;}
</style>
 
<h1>홈짱닷컴 (homzzang.com)</h1>
 

[방법2]
 
아래처럼, 줄 바꿔 표현해도 됨. 
대개, 여러 속성을 함께 사용할 땐 이렇게 줄을 바꾸는 방식으로 표현.
이렇게 줄을 바꿔 적을 때에도 반드시 속성값 뒤에 ; (세미콜론) 붙여야 함.
단, 속성이 하나 뿐이거나, 맨 마지막에 온 속성일 경우엔 적지 않아도 됨.
 
<style>
h1 {
     color: red;
}
</style>

<h1>홈짱닷컴 (homzzang.com)</h1>



[방법3] 
 
태그 요소 안에서 글자 색깔 지정하려면 아래처럼 하면 됨. (인라인 스타일)
<h1 style="color: red;">홈짱닷컴 (homzzang.com)</h1>

 

결과보기

 

color 정의

 

특정 태그 요소의 글자 색깔 지정.

 


 

1.

  • 가독성을 위해서 텍스트색상과 대비되는 배경색도 함께 지정 권장.
  • 주의: text-color 이런 속성은 존재 X.
  • transition: color 0.3s ease; 추가 시, 은은하게 색깔 변경.

 

2.

  • 기본값 : 미지정
  • 상속여부 : O
  • 애니효과 : O
  • CSS버전 : CSS1
  • JS구문 : object .style.color = "#0000FF"

 

3.

모든 브라우저 지원.

 

4. 공식 매뉴얼

https://developer.mozilla.org/en-US/docs/Web/CSS/color

 

 

color 구문

 

selector{color: 속성값;}

 


[속성값]

 

속성값으로 올 수 있는 것들은 여러 종류지만, 주로 아래 방식 중 하나 사용.
  
1-1. 
색상명 입력 방식 : red (빨강)
 
1-2. 
Hexadecimal color입력 방식 : #FF0000 (빨강)      색상코드 표 보기
 
1-3. 
RGB 입력 방식 : rgb(255,0,0) (빨강)

https://homzzang.com/b/css-275

 

1-4.  

부모 요소의 색상값 상속 경우 안 적어도 되나, inherit 적어 명시 가능.

 
<style>
div {color: red;}
h1 {color: inherit;}
</style>
 
<div>
   <h1>홈짱닷컴 (homzzang.com)</h1>
</div>
  

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012