무료 퍼센트 백분율 계산기 (블로그스팟)

by쇼핑하다 • • 2 min read
0

백분율은 일상 생활에서 자주 사용되는 중요한 개념 중 하나입니다. 세일 가격, 시험 점수, 금융 거래 등 다양한 상황에서 백분율을 활용할 수 있습니다. 이번 글에서는 백분율 계산의 기본 개념과 이를 활용한 다양한 계산 방법에 대해 알아보겠습니다. 또한, 이를 쉽게 계산할 수 있는 HTML 백분율 계산기를 함께 소개합니다.

블로그스팟 퍼센트 백분율 계산기


 
전체 금액에서 몇 퍼센트는 얼마인지 계산값으로 표시 합니다.
전체금액  원에서 퍼센트  %에 대한 계산 금액 원입니다.
전체 금액의 일부 금액에 해당하는 값을 퍼센트로 표시 합니다.
전체금액  원에서 일부 금액  원는 퍼센트  %입니다.
기준값이 변경값으로 변화시 얼마큼 증가/감소했는지 계산합니다.
기준값 이(가) 변경값 로 바뀌면 증가값 %입니다.
기준값에서 일정 비율로 증가/감소한 결과를 계산합니다.
기준값 의 비율값 % 하면 변경값 입니다.
 
전체 금액에서 몇 퍼센트가 할인되면 나머지 금액은 얼마인지 계산합니다.
전체 금액 에서 할인율 % 를 적용하면 나머지 금액 원입니다.

1. 백분율의 기본 개념

백분율(%)은 전체에 대한 비율을 나타내는 방법입니다. 백분율은 전체를 100으로 나눈 값으로, 백분율이 높을수록 전체에서 차지하는 비율이 크다는 것을 의미합니다.

예를 들어, 전체 값이 100일 때 20%는 20을 의미합니다. 이는 전체 값의 20%가 20이라는 것을 나타냅니다.

2. 백분율 계산 방법

전체 값에서 특정 비율을 계산하는 방법

전체 값에서 특정 비율(%)에 해당하는 값을 계산하려면 전체 값에 비율을 곱한 후 100으로 나누면 됩니다.

공식: 일부 값 = 전체 값 × 비율 / 100

예시: 전체 값이 200이고 비율이 15%일 때, 일부 값은 200 × 15 / 100 = 30입니다.

특정 값이 전체 값의 몇 퍼센트인지 계산하는 방법

특정 값이 전체 값의 몇 퍼센트인지 계산하려면 특정 값을 전체 값으로 나눈 후 100을 곱하면 됩니다.

공식: 비율 = (특정 값 / 전체 값) × 100

예시: 전체 값이 200이고 특정 값이 30일 때, 비율은 (30 / 200) × 100 = 15%입니다.

값이 변경되었을 때의 증가/감소 비율 계산 방법

값이 변경되었을 때의 증가 또는 감소 비율을 계산하려면 변경된 값에서 기준 값을 뺀 후 기준 값으로 나눈 뒤 100을 곱하면 됩니다.

공식: 변경 비율 = ((변경된 값 - 기준 값) / 기준 값) × 100

예시: 기준 값이 200이고 변경된 값이 250일 때, 증가 비율은 ((250 - 200) / 200) × 100 = 25%입니다.


블로그스팟 퍼센트 백분율 계산기 소스

 <div style="background-color: white; border-radius: 10px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; margin-bottom: 20px; padding: 20px;">

        <div>전체 금액에서 몇 퍼센트는 얼마인지 계산값으로 표시 합니다.</div>

        <div>

            전체금액&nbsp;<input id="total1" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" />&nbsp;원에서&nbsp;<span style="color: red;"><b>퍼센트</b></span>&nbsp;<input id="rate1" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> %에 대한&nbsp;<b><span style="color: #3d85c6;">계산 금액</span></b>&nbsp;<input id="part1" readonly="" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" />원입니다.

        </div>

    </div>


    <div style="background-color: white; border-radius: 10px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; margin-bottom: 20px; padding: 20px;">

        <div>전체 금액의 일부 금액에 해당하는 값을 퍼센트로 표시 합니다.</div>

        <div>

            전체금액&nbsp;<input id="total2" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" />&nbsp;원에서 

            <span style="color: red;"><b>일부 금액</b></span>&nbsp;<input id="part2" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" />&nbsp;원는&nbsp;<span style="color: #3d85c6;"><b>퍼센트</b></span>&nbsp;<input id="rate2" readonly="" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> %입니다.

        </div>

    </div>


    <div style="background-color: white; border-radius: 10px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; margin-bottom: 20px; padding: 20px;">

        <div>기준값이 변경값으로 변화시 얼마큼 증가/감소했는지 계산합니다.</div>

        <div>

            기준값 <input id="base1" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> 이(가) 

            <b><span style="color: red;">변경값</span></b> <input id="new1" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> 로 바뀌면 

            <b><span style="color: #3d85c6;">증가값</span></b> <input id="change1" readonly="" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> %입니다.

        </div>

    </div>


    <div style="background-color: white; border-radius: 10px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; padding: 20px;">

        <div>기준값에서 일정 비율로 증가/감소한 결과를 계산합니다.</div>

        <div>

            기준값 <input id="base2" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> 의 

            <b><span style="color: red;">비율값</span></b> <input id="rate3" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> % 

            <select id="operation" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px;">

                <option value="increase">증가</option>

                <option value="decrease">감소</option>

            </select>

            하면 <b><span style="color: #3d85c6;">변경값</span></b> <input id="new2" readonly="" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> 입니다.

        </div>

    </div>&nbsp;<div style="background-color: white; border-radius: 10px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; padding: 20px;">

        <div>전체 금액에서 몇 퍼센트가 할인되면 나머지 금액은 얼마인지 계산합니다.</div>

        <div>

            전체 금액 <input id="total3" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> 에서 

            <span style="color: red;"><b>할인율</b></span> <input id="discountRate" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" /> % 를 

            적용하면 <b><span style="color: #3d85c6;">나머지 금액</span></b>&nbsp;<input id="remainingAmount" readonly="" style="border-radius: 5px; border: 1px solid rgb(204, 204, 204); font-size: 1em; padding: 10px; text-align: center; width: 80px;" type="text" value="0" />원입니다.

        </div>

    </div>


    <div style="margin-top: 20px; text-align: center;">

        <button onclick="resetInputs()" style="background-color: #007bff; border-radius: 5px; border: none; color: white; cursor: pointer; font-size: 1em; padding: 10px 20px;">초기화</button>

    </div>


    <script>

        function formatNumber(num) {

            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        }


        function calculate() {

            // 첫 번째 계산기

            const total1 = parseFloat(document.getElementById('total1').value.replace(/,/g, '')) || 0;

            const rate1 = parseFloat(document.getElementById('rate1').value.replace(/,/g, '')) || 0;

            const part1 = Math.floor(total1 * (rate1 / 100));

            document.getElementById('part1').value = formatNumber(part1);


            // 두 번째 계산기

            const total2 = parseFloat(document.getElementById('total2').value.replace(/,/g, '')) || 0;

            const part2 = parseFloat(document.getElementById('part2').value.replace(/,/g, '')) || 0;

            const rate2 = Math.floor((part2 / total2) * 100) || 0;

            document.getElementById('rate2').value = formatNumber(rate2);


            // 세 번째 계산기

            const base1 = parseFloat(document.getElementById('base1').value.replace(/,/g, '')) || 0;

            const new1 = parseFloat(document.getElementById('new1').value.replace(/,/g, '')) || 0;

            const change1 = Math.floor(((new1 - base1) / base1) * 100) || 0;

            document.getElementById('change1').value = formatNumber(change1);


            // 네 번째 계산기

            const base2 = parseFloat(document.getElementById('base2').value.replace(/,/g, '')) || 0;

            const rate3 = parseFloat(document.getElementById('rate3').value.replace(/,/g, '')) || 0;

            const operation = document.getElementById('operation').value;

            let new2;

            if (operation === 'increase') {

                new2 = Math.floor(base2 * (1 + (rate3 / 100)));

            } else {

                new2 = Math.floor(base2 * (1 - (rate3 / 100)));

            }

            document.getElementById('new2').value = formatNumber(new2) || 0;


            // 다섯 번째 계산기

            const total3 = parseFloat(document.getElementById('total3').value.replace(/,/g, '')) || 0;

            const discountRate = parseFloat(document.getElementById('discountRate').value.replace(/,/g, '')) || 0;

            const remainingAmount = Math.floor(total3 * (1 - (discountRate / 100))) || 0;

            document.getElementById('remainingAmount').value = formatNumber(remainingAmount);


            // Update formatted input values

            document.getElementById('total1').value = formatNumber(total1);

            document.getElementById('rate1').value = formatNumber(rate1);

            document.getElementById('total2').value = formatNumber(total2);

            document.getElementById('part2').value = formatNumber(part2);

            document.getElementById('base1').value = formatNumber(base1);

            document.getElementById('new1').value = formatNumber(new1);

            document.getElementById('base2').value = formatNumber(base2);

            document.getElementById('rate3').value = formatNumber(rate3);

            document.getElementById('total3').value = formatNumber(total3);

            document.getElementById('discountRate').value = formatNumber(discountRate);

        }


        function resetInputs() {

            document.getElementById('total1').value = '0';

            document.getElementById('rate1').value = '0';

            document.getElementById('total2').value = '0';

            document.getElementById('part2').value = '0';

            document.getElementById('base1').value = '0';

            document.getElementById('new1').value = '0';

            document.getElementById('base2').value = '0';

            document.getElementById('rate3').value = '0';

            document.getElementById('total3').value = '0';

            document.getElementById('discountRate').value = '0';

            calculate();

        }


        document.querySelectorAll('input').forEach(input => {

            input.addEventListener('input', calculate);

        });


        document.querySelectorAll('select').forEach(select => {

            select.addEventListener('change', calculate);

        });


        calculate(); // 초기 계산

    </script>

4.94 / 169 rates
  • 네이버 카페 공유
  • 카카오톡 메시지

댓글 쓰기

다음 이전