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

[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 - 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속성 = 유니코드비디속성…
list CSS - list-style 속성 ★ - 리스트 스타일 일괄 (= 리스트마커 = list-style속성 =…
list CSS - list-style-type 속성 ★ - 리스트 스타일 타입 (= 리스트 마커 종류 = 리스트스타…
list CSS - list-style-image 속성 - 리스트 스타일 이미지 (= 리스트 마커 이미지 = list…
list CSS - list-style-position 속성 ★ - 리스트 스타일 위치 (= 리스트 마커 위치 = …
box CSS - margin 속성 ★ - 바깥여백 (= margin속성 = 마진속성) ※ (margin병합 = 마…
box CSS - margin-top 속성 - 바깥여백상단 (= margin-top속성 = 마진탑속성 = 마진톱속성…
box CSS - margin-right 속성 - 바깥여백우측 (= margin-right속성 = 마진라이트속성)
box CSS - margin-bottom 속성 - 하단바깥여백 (= 하단마진, 아래쪽마진 = margin-bott…
box CSS - margin-left 속성 - 요소의 왼쪽 바깥 여백 (= 바깥 좌측 여백 = 좌측마진 = 왼쪽마…
5/25
목록
찾아주셔서 감사합니다. Since 2012