본문 바로가기

Smart

뉴이스트w 공식 색상(색깔) 웹에서 css 그라데이션 적용 방법

 

오늘 소개해드리는 내용은 뉴이스트w와 러브의 공식 색상(색깔)을 웹에 적용하는 방법에 대한 포스팅입니다. 


뉴이스트w의 공식 색상(색깔)은 잘 알려져있듯이 

딥틸 Deep Teal(#00313C)과 비비드핑크 Vivid Pink(#E31C79) 컬러가 대각선으로 그라데이션 되어 있는데요. 


보통 포토샵이나 일러스트에서 그라데이션 적용하는 방법은 쉽지만 웹상에서 표현하려면 css를 적용시켜야 한답니다. 

웹에서 그라데이션을 적용시키려면 아래 코드가 핵심인데요.


background: linear-gradient(to bottom right, #00313C, #E31C79); /* 배경 그라데이션 */


위 코드가 웹에서 그라데이션을 적용시키는 코드이며 왼쪽 위 딥틸 Deep Teal(#00313C)에서 오른쪽 아래로 비비드핑크 Vivid Pink(#E31C79) 색상(색깔)을 대각선으로 그라데이션 시킨 것입니다. 결과물은 아래에 적용시킨 html과 css를 참고하시면 되겠네요.


Nuest ㅣ Gradation

See the Pen BrxEaN@parkgun) on CodePen.


어렵지 않죠?

그러고 보니 이번 뉴이스트 더블유 단독 콘서트 조명에서 공식 색상들이 많이 나왔던 것 같아요.

 




그럼 이상으로 뉴이스트w 공식 색상(색깔) 웹에서 css 그라데이션 적용 방법에 대한 포스팅을 마칩니다.