나아가는 길에 발자국을 찍어보자

[타이핑 페이지 만들기_4] 배경 색도 랜덤이었으면 좋겠다라고 말하는 미대생 본문

Projects/Font-page(미대생 졸전 도와주기)

[타이핑 페이지 만들기_4] 배경 색도 랜덤이었으면 좋겠다라고 말하는 미대생

NAWIN 2020. 11. 25. 17:54
반응형

기능을 하나씩 만들고 있던 중...

미대생이 배경색과 폰트색을 바꾸고 싶다는 이야기를 했다.

추가로 새로고침이 될 때마다 색이 바뀌었으면 좋겠다고 한다.

처음에 간단한 기능인줄알았다. 실제로도 간단하다. 다만 나는 #의 중요성을 몰랐다......

 

 

RGB값으로 배경색과 폰트색을 정한 객체배열을 선언해서 화면이 렌더링 될때마다 랜덤값으로 인덱스를 생성해 보여주면 새로고침될때마다 색이 랜덤으로 바뀌게 하면 된다고 생각했다.

실제로 저렇게 동작한다.

 

 

body부분 배경색과 폰트컬러에는 #을 붙이지 않아도 컬러가 적용이 되길래

textarea에도 같은 방식으로 컬러값을 주었는데 적용이 안되더라......이걸로 이틀을 골머리를 앓았다.

제이쿼리로 접근도해보고 자바스크립트로 접근도해보고 직접 값을 줘보고 아무리해도 <textarea>의 컬러값이 바뀌지가 않는것이다... 구글링을 열심히 해봐도 다들 접근하는 방법의 코드만 주어질뿐 넣는 값에 대해선 말하지 않아서 나는 내가 접근을 못해서 컬러값이 안변하는 줄알았다.

 

 

하지만 콘솔로 찍어보면 분명히 제대로 값이 들어있는데 왜 컬러에 넣으면 적용이안될까... 하는 고민을 엄청 나게 하고있던 중.....

미대생이 옆에서 #을 붙여볼까? 라고 말했다.

그리고 오...그런가 #을 붙여볼까 해서 붙였더니 적용이 되더라ㅜㅜㅜㅜㅜ

 

 

오늘의 배움 : 컬러가 적용이 안된다...? 그럼 #을 붙여보자. 샾 # 샵 # 샾 # 샵 # 샾 # 샵 #

 

 

<구현>

  • 랜덤으로 적용할 컬러들 객체 생성. 객체 배열 이용.

( 처음부터 저 변수들 앞에 #을 붙였으면 코드가 더깔끔해졌을텐데..)

 

<script>
var letters=[{bgcolor:'009884',font:'FFE261'},{bgcolor:'005528',font:'DE6B28'},{bgcolor:'6EC8EB',font:'D4592B'},{bgcolor:'531916',font:'62C6F0'},{bgcolor:'FED36F',font:'A13A3B'},{bgcolor:'B4D2C1',font:'BC1664'},{bgcolor:'4C2859',font:'F1D338'},{bgcolor:'3981C0',font:'F3E935'},{bgcolor:'F19E46',font:'3471B6'}];

let idx =  Math.floor(Math.random() * letters.length); // 컬러는 랜덤으로 인덱스를 생성하여 정한다.
</script>

 

 

  • 랜덤으로 구한 인덱스를 이용해 <body> 배경와 폰트색 바꾸기

document.bgColor =letters[idx].bgcolor;
document.fgColor=letters[idx].font;

결과 : 너무나 잘 바뀐다.

 

 

 

  • <textarea> 나 <input> 태그속에 입력하는 폰트 css는 따로 지정을 해줘야했다.
    (<body> 에 지정했다고 해서 같이 적용되지 않았다.)

    • 기존 코드 (== 적용이 안되던 코드)

      var text=document.getElementsByTagName("textarea");
for(var i=0;i<text.length;i++)text[i].style.color= letters[idx].font;

이러한 사태가 발생한다....

하지만 *샾 # 샵 # * 을 붙이면

 

 

  • 해결 코드

    var text=document.getElementsByTagName("textarea");
for(var i=0;i<text.length;i++)text[i].style.color='#'+letters[idx].font;

이렇게 적용이 된다!!!

 

 

 

모두모두 샾 # 을 붙이세요오오오

반응형
저작자표시

'Projects > Font-page(미대생 졸전 도와주기)' 카테고리의 다른 글

[3차 미팅] 코딩 친구의 훼방 2탄 : 화면크기를 왜 줄여 보는거야  (0) 2020.12.10
[타이핑 페이지 만들기_5] 코딩친구의 훼방 1탄 : 불다 하지마:(  (0) 2020.12.10
[ 타이핑 페이지 만들기_3 ] <textarea> 상하좌우 가운데 정렬 && 폰트 사이즈 자동 조절  (0) 2020.11.25
[타이핑 페이지 만들기_2] 마우스를 움직이면 폰트가 바뀐다고  (0) 2020.11.24
[2차 미팅] 요구사항이....변했다고...? 새로 만들어야 한다고..?  (0) 2020.11.24
'Projects/Font-page(미대생 졸전 도와주기)' Related Articles more
Comments