[CSS] placeholder의 글자 폰트, 색 등등 꾸미기

간단한 회원가입 폼을 간단하게 꾸미려고 body에 폰트를 적용했는데

 

input 칸의 placeholder로 넣은 문구에는 적용이 되지 않았다.

 

더불어 button과 select의 문구들까지 !

 

그래서 input에 placeholder로 적힌 글자에 스타일을 적용하는 법을 찾아보았다 😀

 

input - placeholder 스타일 적용 방법

@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
body { font-family: 'SUITE-Regular';}
input::placeholder { font-family: 'SUITE-Regular'; color: rgb(255, 215, 222);}
button { width: 100px; height: 33px; border: none; background-color: rgb(255, 239, 242);
    box-shadow: 2px 2px 5px rgb(212, 212, 212); font-family: 'SUITE-Regular';}
select { width: 100px; height: 33px; border: none;
    box-shadow: 2px 2px 5px rgb(212, 212, 212); font-family: 'SUITE-Regular';}

 

정말 간단하게 input::placeholder {속성} 으로 꾸며줄 수 있었다.

 

color 등등 모두 이 안에서 꾸며주면 된다 👍🏻

 

select와 button에도 따로 폰트를 적용해주면 간단하게 바꿀 수 있다 :D

 

변경이 완료되었다 😊