목록그라데이션 배경 (1)

Life is connecting the dots .

[CSS] 그라데이션 배경만들기

이번주에 HTML, CSS, JS를 사용해서 슬라이더를 만들었는데, 슬라이더를 좌우로 움직이면 범위에 따라서 가격이 변경되는 기능이고, 범위에 따른 슬라이더 바의 색상을 채우기 위해 CSS의 linear-gradient() 속성을 처음 사용해 보게 되었다. linear-gradient를 사용하면 두 가지 이상의 색상을 사용해서 점진적으로 전환하여 그라데이션 이미지를 만들 수 있게 해 준다. 색상이 시작되는 방향, 색상이 차지하는 비율, 색상이 나아가는 방향(각도)을 정할 수 있고 어떻게 정하냐에 따라 멋진 그라데이션 효과를 줄 수 있다. 내가 만든 슬라이더는 두 가지 색상의 구분만 필요하여 각 색상을 퍼센트로 구분해 주었다. 그럴 때는 다음과 같이 비율을 절반씩만 채워서 초기 상태로 만들고, 슬라이더를 ..
Programming/CSS 2023. 8. 26. 00:42
이전 Prev 1 Next 다음