CSS

[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)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인