답변 2개
채택된 답변
+20 포인트
2년 전
다음과같이 해 볼 수 있을 것 같습니다.
</p>
<p>/* 최소값이 음수, 최대값이 양수인 경우 */
.element {
width: calc(-1 * var(--input-value));
}</p>
<p>/* 최소값이 입력값, 최대값이 입력값의 -1을 한 경우 */
.element {
width: var(--input-value);
height: calc(-1 * var(--input-value));
}
이렇게 단순한 사칙연산으로만 계산하는 경우, 특정 숫자 범위를 동적으로 처리하려면 JavaScript를 사용하는 것이 더 효과적일 수 있을 것 같네요~
JavaScript를 사용하여 동적으로 계산하고, 계산 결과를 CSS 변수에 할당하여 calc() 함수에서 사용하는 방법도 고려할 수 있을 것 같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<div style="--test-mt:30" >
<style>
.test{
margin-top:clamp(최소값,별도의계산,최대값)
}
</style>
--test-mt에 양수만 들어오면 아래처럼 하면되는데요. 음수일때까 문제라서요
clamp(calc(var(--test-mt)*-1px),별도의계산,calc(var(--test-mt)*1px))