<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>์ ํ/์ํ ๊ทธ๋ผ๋ฐ์ด์
</title>
</head>
<style>
div {
display: inline-block; /* inline์ผ๋ก๋งํ๋ฉด width height ๊ฐ ์๋จน์ */
width: 500px;
height: 300px;
border-radius: 10px;
}
.grad1{
background-color: blue;
/* (0,0)์ด ๊ธฐ์ค์ด๋, ์ค๋ฅธ์ชฝ ๋ฐ์ผ๋ก blue์์ white๋ก ๊ทธ๋ผ์ด์ธํธ ๋ง๋ค์ด๋ผ */
background: linear-gradient(to right bottom, lightblue, lightgoldenrodyellow);
}
.grad2{
background-color: green;
/* deg: ๊ฐ๋. 45deg => 45๋ => ์ค๋ฅธ์ชฝ ์ ๋ฐฉํฅ */
background: linear-gradient(45deg, lightpink, mediumpurple);
}
.grad3{
background-color: red;
/* 30% ์์น์ ์์ ์ค์ง์ ์ ์ง์ ํ๋ค */
background: linear-gradient(to bottom, yellowgreen,lightgoldenrodyellow 50%, aquamarine);
}
/***********************************************/
.rad1{
background-color: mediumpurple;
/* ํ์ํ์ผ๋ก ํฐ์, ๋
ธ๋์, ๋นจ๊ฐ์์ผ๋ก ๋ฐ๋๋ ์ํ ๊ทธ๋ผ๋ฐ์ด์
*/
background: radial-gradient(white, lightyellow, indianred);
}
.rad2{
background-color: mediumpurple;
/* ์ํ์ผ๋ก ํฐ์, ๋
ธ๋์, ๋นจ๊ฐ์์ผ๋ก ๋ฐ๋๋ ์ํ ๊ทธ๋ผ๋ฐ์ด์
*/
background: radial-gradient(circle ,white, lightyellow, indianred);
}
.rad3{
background-color: mediumpurple;
/*
closest-side : ๊ทธ๋ผ๋ฐ์ด์
์ค์ฌ์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์ธก๋ฉด์ ๋ฟ์ ๋๊น์ง
closest-corner: ๊ทธ๋ผ๋ฐ์ด์
์ค์ฌ์์ ๊ฐ์ฅ ๊ฐ๊น์ด ๊ผญ์ง์ ์ ๋ฟ์ ๋๊น์ง
farthest-side: ๊ทธ๋ผ๋ฐ์ด์
์ค์ฌ์์ ๊ฐ์ฅ ๋ฉ๋ฆฌ ๋จ์ด์ง ์ธก๋ฉด์ ๋ฟ์ ๋๊น์ง
farthest-corner: ๊ทธ๋ผ๋ฐ์ด์
์ค์ฌ์์ ๊ฐ์ฅ ๋ฉ๋ฆฌ ๋จ์ด์ง ๊ผญ์ง์ ์ ๋ฟ์ ๋๊น์ง
*/
background: radial-gradient(closest-side, white, lightyellow, palevioletred);
}
.rad4{
/* 20%์์ ์์ํด์ ํฐ์์์ ํ๋์์ผ๋ก ๋ฐ๋๋ ์ํ ๊ทธ๋ผ๋ฐ์ด์
*/
/* ๊ฐ์ด๋ฐ์์ ์์ํ๋ ๊ฒ์ด ์๋๋ผ ์ค์ฌ ์์น๋ฅผ ์ง์ ํ ์ ์๋ค. */
background: radial-gradient(circle at 20% 20%, ghostwhite, cornflowerblue);
}
/*************************************************************/
.pat1{
background: repeating-linear-gradient(yellow, palevioletred 50px, palevioletred 20px, darkred 20px);
}
.pat2{
background: repeating-linear-gradient(black, black 20px, white 20px, white 40px);
}
</style>
<body>
<section>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
</section>
<section>
<div class="rad1"></div>
<div class="rad2"></div>
<div class="rad3"></div>
<div class="rad4"></div>
</section>
<section>
<div class="pat1"></div>
<div class="pat2"></div>
</section>
</body>
</html>
