JavaScript를 사용하는 RGBA 색상 생성기

안녕하세요 여러분! 이 블로그에서는 JavaScript를 사용하여 RGBA 색상 생성기를 만드는 방법을 설명하겠습니다. 이것은 HTML과 CSS를 포함한 단계별 가이드가 될 것입니다. 시작합시다 🚀.

Coding Torque에서 놀라운 웹 개발 프로젝트 받기

HTML 부분을 다루겠습니다.

우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.

이제 HTML<head> 태그에서 멋진 글꼴 CDN을 가져오겠습니다. fontawesome은 웹사이트의 아이콘에 사용되는 라이브러리입니다.
우리는 복사 아이콘을 사용했습니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는 Poppins 글꼴에 대한 코드입니다. <head> 태그에 아래 코드를 붙여넣습니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

아래 HTML 코드에는 슬라이더와 출력 상자를 포함하는 클래스 이름이 'card'인 <div>가 있습니다. 슬라이더 내부에는 '범위' 유형의 레이블 태그와 입력 태그가 있습니다. <input> 태그에도 최소 및 최대 제한이 있습니다.
출력 상자에는 RGBA 값인 출력과 RGBA 값을 복사하는 복사 버튼이 있습니다.

<div class="card">
    <div class="sliders">
        <label for="red">Red</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="red">
        <label for="green">Green</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="green">
        <label for="blue">Blue</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="blue">
        <label for="alpha">Aplha</label>
        <input type="range" min="0.1" max="1.0" step="0.1" value="1" oninput="generateRGBA()" id="alpha">
    </div>
    <div class="output-box">
        <div class="output" id="output">rgba(0,0,0,1)</div>
        <div class="copy-btn" onclick="copy()"><i class="fas fa-copy"></i></div>
    </div>
</div>

다음은 최종 HTML 코드입니다.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>RGBA Color Generator - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="card">
        <div class="sliders">
            <label for="red">Red</label>
            <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="red">
            <label for="green">Green</label>
            <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="green">
            <label for="blue">Blue</label>
            <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="blue">
            <label for="alpha">Aplha</label>
            <input type="range" min="0.1" max="1.0" step="0.1" value="1" oninput="generateRGBA()" id="alpha">
        </div>
        <div class="output-box">
            <div class="output" id="output">rgba(0,0,0,1)</div>
            <div class="copy-btn" onclick="copy()"><i class="fas fa-copy"></i></div>
        </div>
    </div>

</body>

</html>

지금까지 출력

CSS 부분을 이해하자

아래 CSS 코드에서.

head 태그에서 가져온 글꼴 Poppins에 대해 * 선택자를 선언합니다.

먼저 너비, 테두리 반경, 패딩 등의 간단한 속성이 있는 카드가 있습니다.

다음으로 간단한 CSS 속성을 사용하여 output-box>output>copy-btn 스타일을 지정했습니다.

/* 1 */
* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2 */
.card {
    width: 15rem;
    border-radius: 10px;
    overflow: hidden;
    background: #1f2937;
    padding: 30px 20px;
}

.sliders {
    display: flex;
    flex-direction: column;
}

/* 3 */
.output-box {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 1rem;
}

.output {
    border: 2px solid;
    padding: 6px 20px;
}

.copy-btn {
    cursor: pointer;
    padding: 12px;
    background: #111827;
}

지금까지 출력

마지막으로 JavaScript 부분

아래 자바스크립트 코드에는 generateRGBA() 및 copy() 두 가지 기능이 있습니다.
RGBA 색상을 생성하는 generateRGBA() 함수가 있습니다. 함수에서 빨강, 녹색, 파랑 및 알파의 4가지 색상 입력 변수를 선언했습니다. 함수가 호출될 때마다 각 요소의 값을 가져와 변수에 저장합니다. 다음으로 출력 변수를 선언하고 출력 div를 가져옵니다. 다음으로 자바스크립트 문자열 리터럴을 사용하여 출력 텍스트를 설정합니다. 다음으로 사용자가 입력한 값에 따라 출력 div의 배경을 설정합니다.

 const generateRGBA = () => {
    let red = document.getElementById("red").value;
    let green = document.getElementById("green").value;
    let blue = document.getElementById("blue").value;
    let alpha = document.getElementById("alpha").value;
    let output = document.getElementById("output");

    output.innerText = `rgba(${red}, ${green}, ${blue}, ${alpha})`
    output.style.background = `rgba(${red}, ${green}, ${blue}, 
    ${alpha})`
}

const copy = () => {
    let output = document.getElementById("output");

    navigator.clipboard.writeText(output.innerText)
    alert('Copied')
}

Reference

이 문제에 관하여(JavaScript를 사용하는 RGBA 색상 생성기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/piyushpatil1243/rgba-color-generator-using-javascript-1op0

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript를 사용하는 RGBA 색상 생성기

HTML 부분을 다루겠습니다.

다음은 최종 HTML 코드입니다.

지금까지 출력

CSS 부분을 이해하자

지금까지 출력

Reference

좋은 웹페이지 즐겨찾기