수학 계산식 질문드립니다.
본문
특정수에대한 최소,최대값을 구하려고합니다.
예를 들어 -50을 넣으면 -50,50
50을 넣어도 -50,50
음수를 넣으면 그게 최소값이 되고, 해당값 x -1이 최대값이 되고
양수를 넣으면 그게 최대값이 되고, 해당값 x -1을 하면 최소값이 되게 하려는데요.
이거 계산식을 어떻게 해야할까요?css에서 calc()로 계산해야해서 if문은 못씁니다.
사칙연산으로만 계산이 될까요?
답변 2
다음과같이 해 볼 수 있을 것 같습니다.
/* 최소값이 음수, 최대값이 양수인 경우 */
.element {
width: calc(-1 * var(--input-value));
}
/* 최소값이 입력값, 최대값이 입력값의 -1을 한 경우 */
.element {
width: var(--input-value);
height: calc(-1 * var(--input-value));
}
이렇게 단순한 사칙연산으로만 계산하는 경우, 특정 숫자 범위를 동적으로 처리하려면 JavaScript를 사용하는 것이 더 효과적일 수 있을 것 같네요~
JavaScript를 사용하여 동적으로 계산하고, 계산 결과를 CSS 변수에 할당하여 calc() 함수에서 사용하는 방법도 고려할 수 있을 것 같습니다.
무엇 때문에 이런 계산이 필요한가요?
css clamp에 쓸려고합니다
<div style="--test-mt:30" >
<style>
.test{
margin-top:clamp(최소값,별도의계산,최대값)
}
</style>
--test-mt에 양수만 들어오면 아래처럼 하면되는데요. 음수일때까 문제라서요
clamp(calc(var(--test-mt)*-1px),별도의계산,calc(var(--test-mt)*1px))
음수가 안 나오게 하는
방법이 있지 않을까요
답변을 작성하시기 전에 로그인 해주세요.