○ 그라데이션을 사용한 패턴 생성
그라데이션을 사용하면 여러 가지 무늬를 가진 패턴을 생성하는 것도 가능합니다. 실제로 사용성이 높지 않은 기술이니 대략 이런 형태로도 사용이 가능하다, 정도 알고 넘어가시면 충분합니다.
우선 앞서 배웠던 선형 / 원형 그라데이션은 반복 사용이 가능한 속성입니다. 이때 사용하는 속성이 repeating-linear-gradient 그리고 repeating-radial-gradient입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, red 20px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, #ccc 10%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
이를 그라데이션 형태가 아니라, 완벽한 솔리드 컬러 타입의 패턴으로 변경한다면 다음과 같이 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
참고로 상위의 노란색과 붉은색 패턴의 경우, 노란색과 붉은색 패턴이 전체 40px이고 yellow / yellow 20px / red 20px / red 40px의 순서대로 배치되어 이러한 구조가 형성된다고 생각하시면 됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 6. 고급 선택자(1) - 연결 선택자 2 (0) | 2023.05.24 |
|---|---|
| [CSS] 6. 고급 선택자(1) - 연결 선택자 1 (0) | 2023.05.20 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 (0) | 2023.05.15 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 (0) | 2023.05.13 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 (0) | 2023.05.10 |
