문제
풀이
HTML
<div></div>CSS
radial-gradient로 편하게 만들었어요.
* {
box-sizing: border-box;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #0A4756;
}
div {
width: 240px;
height: 240px;
background: radial-gradient(
circle, #5A9F48 50px, #0A4756 0px
) 50% 50% / 120px 120px no-repeat #5A9F48;
border-radius: 50%;
}1. radial-gradient(circle, #5A9F48 50px, #0A4756 0px)
background-image 값이에요.
중심에서 반지름 50px까지는 연두색 원을 만들어주고, 그 이후는 어두운 남색으로 바꿔줘요.
2. 50% 50%
background-position 값이에요.
width, height이 240px의 공간의 정중앙에 이 연두 원을 위치시켜요.
3. / 120px 120px
background-size 값이에요.
그라디언트의 실제 크기를 240px x 240px에서 120px × 120px로 축소해요.
흰색은 그라디언트의 실제 크기를 이해하기 쉽기 위해 임의로 설정했습니다.
실제 그라디언트의 색은 초록색이에요.
-
240px x 240px
-
120px × 120px
점선의 크기가 div의 크기이고 흰 사각형이 120px × 120px로 축소된 그라디언트의 실제 크기에요.
4. no-repeat
background-repeat 값이에요.
no-repeat을 사용하지 않으면 120px × 120px로 축소되면서 생긴 그리디언트와 div값 사이에 그리디언트가 반복되어 생겨나게 돼요.
-
repeat
-
no-repeat
5. #5A9F48
background-color 값이에요.
그라디언트가 적용되지 않는 나머지 영역의 배경색을 연두색으로 설정해주면 50px의 연두색 원, 초록색 사각형의 그리디언트, 연두색 사각형의 div가 보이게 돼요.
6. border-radius: 50%
마지막으로 div를 둥글게 만들어 주면 완성이에요.
