CSS에서 그라디언트 사용법: 초보자를 위한 가이드

 

CSS에서 그라디언트를 사용하면 여러 색을 부드럽게 섞은 멋진 배경을 만들 수 있어요.

지금부터 그라디언트를 만드는 방법과 쉽게 코드를 생성할 수 있는 사이트까지 소개할게요!

1. 선형 그라디언트(Linear Gradient)

선형 그라디언트는 한 줄로 색이 변하는 방식이에요. 아래 코드를 보면, 파란색에서 초록색으로 위에서 아래로 변하는 배경이 만들어져요.

background: linear-gradient(blue, green);

방향 설정하기

색이 변하는 방향도 정할 수 있어요. 예를 들어, 왼쪽에서 오른쪽으로 색이 변하게 하려면 이렇게 작성해요.

background: linear-gradient(to right, blue, green);

2. 반복 그라디언트(Repeating Gradient)

반복되는 그라디언트를 만들 수도 있어요. 그라디언트가 일정한 간격으로 반복돼서 독특한 패턴을 만들어요.

background: repeating-linear-gradient(blue, green 20%);

3. 방사형 그라디언트(Radial Gradient)

방사형 그라디언트는 원형으로 색이 퍼져나가는 방식이에요. 중심에서 바깥으로 색이 변해요.

background: radial-gradient(circle, yellow, red);

이 코드는 가운데서 노란색이 빨간색으로 바뀌는 원형 그라디언트에요.

4. 그라디언트를 쉽게 만들 수 있는 사이트: CSS Gradient

CSS로 그라디언트를 만들 때, 코드를 직접 작성하지 않고도 쉽게 만들 수 있는 사이트가 있어요! 바로 CSS Gradient라는 사이트예요.

이 사이트에서 원하는 색을 선택하고, 그라디언트 방향이나 색 배합을 조정할 수 있어요.

그러면 자동으로 CSS 코드를 만들어 주기 때문에 그 코드를 복사해 바로 사용하면 돼요. 정말 편리하죠!

5. 이미지 위에 그라디언트 넣기

이미지 위에 그라디언트를 추가해서 이미지가 더 멋져 보이게 할 수 있어요. 그라디언트와 이미지를 겹치는 방법은 간단해요.

background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(0, 255, 0, 0.5)), url('image.jpg');
background-size: cover;

• rgba(0, 0, 255, 0.5)는 파란색의 반투명 효과를 나타내요. 숫자 0.5는 투명도를 의미해요.
• url('image.jpg')는 배경 이미지예요. 이미지 위에 반투명한 그라디언트가 덮여서 이미지가 살짝 흐려지면서 색이 바뀌는 효과를 낼 수 있어요.
• background-size: cover;는 이미지를 화면 크기에 맞게 꽉 차게 해줘요.

예시

background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url('your-image.jpg');
background-size: cover;

이 코드를 사용하면 빨간색에서 파란색으로 변하는 그라디언트가 이미지 위에 덮여요.

그라디언트의 투명도를 조정해서 이미지가 보이게 하거나 더 강하게 덮을 수 있어요.

정리

1. 선형 그라디언트와 방사형 그라디언트로 다양한 배경을 만들 수 있어요.
2. CSS Gradient 사이트에서 간편하게 그라디언트 코드를 생성할 수 있어요.
3. 이미지 위에 그라디언트를 넣어서 더 멋진 디자인을 만들 수 있어요.

이제 그라디언트를 자유롭게 사용해 멋진 배경을 만들어 보세요! 궁금한 점이 있으면 언제든 물어보세요 😊

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱