색 조합으로 그라데이션을 만들어보자

https://koreanraichu.tistory.com/426

색 조합 확인 페이지를 만들어보자

여기서 대충 Two color combinnaton 비슷한 걸 만들어봤는데…

 

사실 색깔이 여러개 있으면 그라데이션 한번쯤 넣어보고 싶지 않음? 에이~ 해보면 좋지만 그게 돼요? 예, CSS에서는 됩니다. 그럼 진짜로 되나 해보자.

---

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/gradient/linear-gradient

linear-gradient() - CSS: Cascading Style Sheets | MDN

 

https://velog.io/@yoojs1205/linear-gradient-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98

linear-gradient: 그라데이션

---

일단 예전에 색 조합 확인 페이지 만들었던 소스를 그대로 가져왔다. 입력하고 버튼, 그리고 입력한 색깔을 출력하는 건 같은데 두 색깔을 그라데이션으로 만들거라서 요소 중 글자가 빠지고 div만 남게 된다.

 

<div class="color-view">
	<div class="color-div1"></div>
	<div class="color-div2"></div>
	<p class="color-value1"></p>
	<p class="color-value2"></p>
</div>

그래서 내용물이 이렇게 된다.

 

const colorDiv1 = document.querySelector('.color-div1');
const colorDiv2 = document.querySelector('.color-div2');
const colorInsert1 = document.querySelector('#colorInput1');
const colorInsert2 = document.querySelector('#colorInput2');
const colorValue1 = document.querySelector('.color-value1');
const colorValue2 = document.querySelector('.color-value2');
const colorButton = document.querySelector('.colorbutton');
var regex = /^(?:[0-9a-f]{3}){1,2}$/i;

자바스크립트도 이전과 달리 두 줄 빠졌는데, 색 조합 페이지의 div 안에 있는 텍스트들을 뺐다. 없는데 갖고오라하면 에러떠요...

 

.color-div1, .color-div2 {
    width: 500px;
    height: 350px;
    margin: 5px;
    padding: 5px;
    border-radius: 10px;
}

그리고 본문이 빠졌는데 div 높이가 없으면 div가 짜부되기때문에 높이 속성을 줬다.

 

colorButton.addEventListener('click', () => {
    if (colorInsert1.value != "" && colorInsert2.value != "") {
        colorDiv1.style.backgroundImage = `linear-gradient(0.25turn, ${"#" + colorInsert1.value}, ${"#" + colorInsert2.value})`
        colorDiv2.style.backgroundImage = `linear-gradient(0.25turn, ${"#" + colorInsert2.value}, ${"#"+ colorInsert1.value})`
        colorDiv1.style.border = `1px solid ${"#" + colorInsert1.value}`
        colorDiv2.style.border = `1px solid ${"#" + colorInsert1.value}`
        colorValue1.innerText = `background color: ${"#" + colorInsert1.value}/contents color: ${"#" + colorInsert2.value}`;
        colorValue2.innerText = `background color: ${"#" + colorInsert2.value}/contents color: ${"#" + colorInsert1.value}`;
    } else if (!regex.test(colorInsert1.value) || !regex.test(colorInsert2.value)) {
        alert ('유효한 색상값이 아닙니다! ');
    } else {
        alert('두 칸을 전부 채워주세요! ');
    };
});

정말 많은 일이 있었지만 If문을 봅시다. 정말 의외로 그라데이션을 넣을 때는 백그라운드 컬러 말고

 

background: linear-gradient(#e66465, #9198e5);

이런 식으로 백그라운드로 주거나 백그라운드 '이미지'로 준다. 그리고 애초에 입력 받을 때 #을 빼고 받기때문에 색 조합 확인할때도 그랬지만 백틱을 쓰더라도 앞에 #을 붙여줘야 적용이 제대로 된다. 내 경험담임… 적용 안돼서 뭐야 버그인가 했는데 샾 빠져서 안된거였어…

 

그러면 어떻게 나오냐고요?

이렇게 나온다. 그라데이션이 누운 것 같다고요? 정상입니다! 방향 지정 안 하면 디폴트로 누워서 나옵니다!

 

사실 내가 위에서 설명 안 한 부분이 있는데 소스 찾은 사람? if문에 있습니다. 그렇죠, 잘 보면 border가 있는데… 이게 처음에 그라데이션을 검정이랑 흰색으로 했더니 쟤네 간격때문에 잘 안보이는겁니다. 그래서 테두리도 첫번째로 입력한 색으로 그려달라고 한 거임.

 

누운 그라데이션도 넣어봤다. 

colorDiv3.style.backgroundImage = `linear-gradient(to right, ${"#" + colorInsert1.value}, ${"#" + colorInsert2.value})`

그라데이션은 디폴트값이 서있는거지 방향 지정은 할 수 있다.