[JavaScript] CSS in Javascript, 클릭할 때마다 색상 다르게 출력하기

빨강(Red), 초록(Green), 파랑(Blue)의 3색을 섞어 색상을 표기하는 방식을 RGB 가산혼합이라고 한다.

 

그리고 이러한 색상 코드를 표기할 때는 우리가 일반적으로 알고 있는 색상코드(예를 들어 #00000부터 #ffffff까지), 이런 식으로 표기하게 된다. 여기서 #은 색상코드라는 것을 나타내는 기호이며, # 뒤의 두글자는 빨간색의 정도, 중간 두글자는 초록색의 정도, 마지막 두글자는 파란색의 정도를 나타낸다. 

 

각각의 숫자는 0~255까지로 표현되며 16진수로 표현되기에 00~ff까지 존재할 수 있는 것이다.

 

나는 이 점을 이용해서 클릭 시 색상이 지속적으로 변할 수 있게끔 코드를 작성해 보았다!

아직 자스린이라 이보다 훨씬 좋은 코드가 있을 수도 있지만 나중의 내가 봤을 때 당당히 더 좋은 성능으로 개선할 수 있었으면 좋겠다 ☺️

 

// Function that makes randomized color.
function makeRandomColor(){
  r = Math.floor(Math.random()*255+1).toString(16)
  g = Math.floor(Math.random()*255+1).toString(16)
  b = Math.floor(Math.random()*255+1).toString(16)
  rgb = r+g+b
  return rgb
}

// Function that changes text color when h2 is clicked
function clickHeadTwo(){
  headerTwo.style.color='#'+makeRandomColor();
}
headerTwo.addEventListener('click',clickHeadTwo);

1. 우선 makeRandomColor라는 함수를 만들어 r,g,b를 각각 0~255사이의 숫자에서 뽑고 16진수로 변환할 수 있도록 각각을 지정하고 r,g,b는 toString()함수로 str type이므로 r+g+b는 6개의 숫자가 붙은 문자열이 될 것이다.

여기서 Math 내장함수를 처음 활용해 보았다. 사실 프로그래밍 언어들 내장함수는 다 거기서 거기인 것 같다..  그래도 어려운 함수들ㅠ

- Math.floor() : ()안의 숫자를 내림

- Math.ceil() : ()안의 숫자를 올림

- Math.round() : ()안의 숫자를 반올림

- Math.random() : 0~1안의 숫자를 랜덤추출

- number.toString(radix) : radix(0~36사이의 정수)를 지정하고 그에 맞게 숫자를 문자열로 반환 https://opentutorials.org/course/50/135

 

2. clickHeadTwo함수를 만들어 document요소의 color를 지정해준다. 앞에 #이 붙어야 색상코드이므로 '#'을 꼭 붙여주어야 한다.

 

끗