본문 바로가기

교육/[Codeit]웹 퍼블리싱

텍스트 색 지정

반응형

h1태그의 텍스트의 색을 변경하려면 스타일태그 사용한다. 

<style>
  h1 {
    color: orange;
  }
  
</style>

구글에 css color 검색하면 색 이름이 나온다.

좀 더 디테일한 색을 적용하고싶다면
htmlcolorcodes.com 과 같은 사이트를 사용한다.

RGB는 레드 그린 블루의 약자이다. 이 비율에따라 색이 결정된다.
RGB를 적용한 태그는

<style>
  h1 {
    color: rgb(97, 249, 107);
  }
  
</style>

 

혹은 hex값을 사용하여

 

<style>
  h1 {
    color: #61F96B;
  }
  
</style>

 


헥스값은 16진법으로 되어있다. 
16진법 61은 10진법 97, 16진법 F9는 10진법 249, 16진법 6B는 10진법 107이다.


색상에 투명도를 적용할때는 hex코드 6글자 뒤에 FF를 추가-가장불투명 / 00추가-투명

 

 

 

정리

텍스트의 색을 지정해주기 위해서는 color 속성을 사용하면 되는데요. CSS에서 색을 표현하는 방식이 세 가지가 있습니다.

색 이름

CSS에서 정해준 색 이름 중 하나를 쓰는 방법이 있습니다. 모든 색이 있지는 않지만, 무려 140개의 색이 대부분 브라우저에서 지원된다고 하네요!

 

RGB 값

모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있습니다. 이 표현 방식이 바로 'RGB'입니다. 이런 사이트에서 원하는 색을 찾아보세요.

 

HEX 값 (16진법)

HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식입니다. 83는 16진법으로 53이고, 237는 16진법으로 ED이고, 65는 16진법으로 41입니다. 따라서 rgb(83, 237, 65)는 #53ED41과 같은 거죠.

728x90
반응형

'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글

가운데 정렬이 안 돼요  (0) 2021.03.01
몇가지 텍스트 스타일링  (0) 2021.02.28
크롬 개발자 도구, 도움되는 웹 사이트  (0) 2021.02.17
코멘트  (0) 2021.02.17
어떤방식으로 css를 써야할까?  (0) 2021.02.17