주니어 기초 코딩공부/CSS, HTML 기초
CSS 이미지와 그라데이션 효과 맛보기
jju_developer
2023. 1. 6. 20:28
728x90
안녕하세요 JJU_DEVELOPER입니다.
이번시간에는 CSS 이미지와 그라데이션 효과 맛보기에 대한 설명입니다~!
목차
09-1 배경색과 배경 범위 지정하기
09-2 배경 이미지 지정하기
09-3 그러데이션 효과로 배경 꾸미기
09-1 배경색과 배경 범위 지정하기
속성 | 설명 |
background-color | 배경색 지정 |
background-clip | 배경색이나 이미지를 어디까지 적용할지 지정 |
background-image | 배경 이미지 지정 |
background-repeat | 배경 이미지의 반복 방법을 지정 |
background-position | 배경 이미지의 위치 지정 |
background-origin | 배경 이미지를 배치할 기준 지정 |
background-attachment | 배경 이미지를 문서에 고정 |
background | 하나의 속성으로 배경 스타일을 한꺼번에 지정 |
background-size | 배경 이미지의 크기 조절 |
09-2 배경 이미지 지정하기
background-image: url(이미지경로);
이때 url() 괄호 안에 띄여쓰기 없이 바로 경로를 입력하셔야합니다~!
이미지를 배경으로 썼으니, 나중에 서버에 올리실 때 경로 그대로 이미지도 위치해야 한다는 것을 잊지 마세요.
09-3 그러데이션 효과로 배경 꾸미기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
li {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px;
}
#div1 {
background: rgb(100, 0, 83);
background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
}
#div2 {
background: darkgreen;
background: radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
}
#div3 {
background: darkgreen;
background: radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
}
#div4 {
background: darkgreen;
background: radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
}
</style>
</head>
<body>
<ul>
<li id="div1"></li>
<li id="div2"></li>
<li id="div3"></li>
<li id="div4"></li>
</ul>
</body>
</html>
728x90