HTML 및 Bootstrap을 사용하는 RGB 색상 선택기

4762 단어 webdevhtmlbeginners
오늘은 HTML과 Bootstrap을 이용하여 RGB color picker를 만들어 보았습니다. 나름 재미있었고 개발 10분만에 완료했습니다.

라이브입니다DEMO

이 데모를 구축하는 데 사용된 기술


  • HTML
  • CSS(인라인)
  • 부트스트랩 5
  • 자바스크립트(몇 줄)

    • 코드 조각



    코드를 보고 싶다면 코드 스니펫의 링크가 있습니다.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Color Chooser</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-color: black;">
    <header>
        <h1 class="text-center my-4 font-monospace text-white">RGB COLOR PICKER</h1>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div id="result" class="shadow rounded col-md-4 d-flex justify-content-center p-5 my-5" style="background-color: rgb(127,127,127);">

            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">RED</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">GREEN</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange2" oninput='OutputIdGreen.value = customRange2.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdGreen">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">BLUE</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange3" oninput='OutputIdBlue.value = customRange3.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdBlue">127</output>
            </div>
        </div>
    </div>

    <script>

        function changebackground(){
            document.getElementById('result').style.backgroundColor = 'rgb(' + document.getElementById("OutputIdRed").value + ',' + document.getElementById("OutputIdGreen").value + ',' + document.getElementById("OutputIdBlue").value + ')';
        }
    </script>
</body>
</html>


    이 데모에서 배울 핵심 사항


  • 부트스트랩 클래스
  • javascript를 사용하지 않고 스크롤 값을 표시합니다.

    • 그래서 코드를 확인했다면,

    <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
<output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>


    여기에서는 사용자가 선택한 스크롤 값을 보여줍니다. 이를 위해 oninput 필드를 사용하고 출력 필드에서 사용자가 선택한 값을 설정했습니다.

    결론:
    오늘 우리는 사용자가 RGB 값을 기반으로 실제 색상을 볼 수 있는 작은 데모를 만들었습니다. 우리는 HTML과 부트스트랩을 사용하여 데모를 만들었습니다. 또한 10분 이내에 개발된 이 작은 데모에서 배울 수 있는 핵심 사항을 다루었습니다😀. 당신이 그것을 좋아하고 오늘 새로운 것을 배우기를 바랍니다.

    트위터에도 유용한 콘텐츠를 게시하고 있습니다. 그래서 너희들은 거기에서 나를 따라갈 수 있습니다.
    Gold-Language - 버전 1.02; 지금 밖으로!
    Cron 대안으로서의 Systemd 타이머

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage