728x90
반응형
안녕하세요. ^-^
오늘은 배경색을 하나가 아닌
그라데이션으로 깔아 볼까 합니다.
버튼에도 쓰이고 배경색도 쓰이고
쓰임새가 참 다양하답니다.
먼저 [ html ] 코드 보여드릴게요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<p>그라데이션 배경을 만들어 봐요!!</p>
</div>
</body>
</html>
|
cs |
[ html ] 코드는 무척 간단하죠?
[ css ]도 무척이나 간단하답니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:url(cat.jpg) no-repeat center center;
background-size:cover;
}
.box{
width:500px;
height:200px;
margin:40px auto;
background:linear-gradient(120deg, #6D5AFB 0%, #E9183F 100%);
text-align:center;
border-radius:10px;
}
.box p{
line-height:200px;
color:#ffffff;
}
|
cs |
짠~~ 아주 간단하죠?
여기에서 아주 중요한 부분은
background:linear-gradient입니다.
선형 그라데이션을 표현해 줍니다.
그리고 (120deg, #6D5AFB 0%, #E9183F 100%)
이 부분도 아주 중요해요.
120deg는 각도를 의미합니다. 120도로 실행하면
아래와 같이 나옵니다.
90deg로 바꾸면 아래와 같이 출력이 되죠.
아주 쉽죠? 첫 번째 색이 0% 두 번째 색이 100%이기 때문에
처음 지정한 색과 마지막에 지정한 색이 고루고루
그라데이션이 되어서 나오게 됩니다.
728x90
한 가지 배경색만 깔기 단조로웠는데
이렇게 만드니까 너무 좋은 거 있죠
버튼 만들 때 쓰면 참 좋아요.
다음 포스팅에서는 그라데이션 배경색에
테두리는 예쁘게 주는 방법을 포스팅해볼게요.
이렇게 글을 쓰고 나니 저도 코딩하기 편해졌어요.
늘 찾아보기 바빴는데
많이 쓰는 것들 위주로 나만의 라이브러리를
만드는 기분이에요.
코딩을 배우시는 여러분들께 조금이나마
도움이 되었으면 좋겠습니다.
금요일 밤이네요.
모두 행복한 밤 보내세요
728x90
반응형
'코딩 어린이의 노트' 카테고리의 다른 글
| 그라데이션 박스에 투명 테두리 넣어주기 (0) | 2023.02.12 |
|---|---|
| 원형 그라데이션 배경색을 만들어 보자 (0) | 2023.02.11 |
| 배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |
| 배경이미지의 채도를 조절해요 (0) | 2023.02.01 |
| CSS 배경이미지만 투명하게 만들 (1) | 2023.01.27 |