<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #14 - CSS Property Changer</title>
  </head>
  <body>
    <div class="wrapper">
      <!-- 수직 이동 -->
      <div class="controls">
        <h3 class="controls-heading">Y 위치</h3>
        <div class="container">
          <div class="input-container vertical">
            <input type="range" id="position-y" min="0" max="500" value="0" />
            <label for="position-y">
              <span>0</span>
              <span>500</span>
            </label>
          </div>
        </div>
      </div>

      <!--수평 이동 -->
      <div class="controls">
        <h3 class="controls-heading">X 위치</h3>
        <div class="container">
          <div class="input-container horizontal">
            <label for="position-x">
              <span>0</span>
              <span>1000</span>
            </label>
            <input type="range" id="position-x" min="0" max="1000" value="0" />
          </div>
        </div>
      </div>

      <!-- 크기 -->
      <div class="controls">
        <h3 class="controls-heading">크기</h3>
        <div class="container">
          <div class="input-container horizontal">
            <label for="size">
              <span>0</span>
              <span>2</span>
            </label>
            <input type="range" id="size" min="0" max="2" step="0.1" />
          </div>
        </div>
      </div>

      <!-- 모양 -->
      <div class="controls">
        <h3 class="controls-heading">모양</h3>
        <div class="container center">
          <select id="shape-select">
            <option value="1">네모</option>
            <option value="2">원</option>
          </select>

          <button id="ok-btn">확인</button>
        </div>
      </div>

      <!-- RGBA -->
      <div class="controls">
        <h3 class="controls-heading">RGBA 색깔</h3>
        <div class="container rgba-container">
          <input type="range" min="0" max="255" id="rgba-r" value="0" /><label
            for="rgba-r"
            >r</label
          >
          <input type="range" min="0" max="255" id="rgba-g" value="0" /><label
            for="rgba-g"
            >g</label
          >
          <input type="range" min="0" max="255" id="rgba-b" value="0" /><label
            for="rgba-b"
            >b</label
          >
          <input
            type="range"
            min="0"
            max="1"
            step="0.01"
            id="rgba-a"
            value="1"
          /><label for="rgba-a">a</label>
        </div>
      </div>
    </div>

    <div class="container">
      <div id="block"></div>
    </div>
    <!-- --------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  width: 70%;
  margin: 25px auto 0px;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.controls {
  width: 200px;
  height: 200px;
  background: #444;
  color: #fff;
}

h3 {
  margin: 25px 15px;
  font-size: 18px;
  text-align: center;
}

.vertical {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
}

.vertical input {
  transform: rotate(90deg);
  width: 75px;
}

.vertical label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 75px;
}

.horizontal {
  width: 100px;
  margin: 40px auto;
}

.horizontal input {
  width: 100px;
}

.horizontal label {
  width: 100px;
  display: flex;
  justify-content: space-between;
}

.center {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 40px auto;
}

#shape-select {
  padding: 5px 10px;
  border: none;
  outline: none;
}

#ok-btn {
  margin-top: 20px;
  padding: 5px 10px;
  background-color: white;
  outline: none;
  border: none;
  cursor: pointer;
}

.rgba-container {
  width: 100px;
  margin: 0 auto;
}

.rgba-container input {
  width: 80px;
  margin: 5px auto;
}

.rgba-container label {
  margin-left: 10px;
}

.container {
  margin-top: 20px;
  position: relative;
}

#block {
  width: 150px;
  height: 150px;
  background-color: #000000;
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 40px;
}

let blockEl = document.querySelector("#block");
let verticalPosition = document.querySelector("#position-y");
let horizontalPosition = document.querySelector("#position-x");
let blockSize = document.querySelector("#size");
let shapeSelector = document.querySelector("#shape-select");
let okBtn = document.querySelector("#ok-btn");
//색깔.
let rgbaR = document.querySelector("#rgba-r");
let rgbaG = document.querySelector("#rgba-g");
let rgbaB = document.querySelector("#rgba-b");
let rgbaA = document.querySelector("#rgba-a");
let rgbaContainer = document.querySelector(".rgba-container");
let rgbaInputs = rgbaContainer.querySelectorAll("input");

// 수직 제어
verticalPosition.addEventListener("change", function () {
  blockEl.style.top = verticalPosition.value + "px";
});

// 수평 제어
horizontalPosition.addEventListener("change", function () {
  blockEl.style.left = horizontalPosition.value + "px";
});

// 크기 제어
blockSize.addEventListener("change", function () {
  blockEl.style.transform = "scale(" + blockSize.value + ")";
});

// 모양 제어
okBtn.addEventListener("click", function () {
  let shapeOption = shapeSelector.value;
  if (shapeOption === "1") {
    blockEl.style.borderRadius = "0";
  } else if (shapeOption === "2") {
    blockEl.style.borderRadius = "50%";
  }
});

// 색 제어
for (let i = 0; i < rgbaInputs.length; i++) {
  rgbaInputs[i].addEventListener("change", function () {
    blockEl.style.backgroundColor =
      "rgba(" +
      rgbaR.value +
      "," +
      rgbaG.value +
      "," +
      rgbaB.value +
      "," +
      rgbaA.value +
      ")";
  });
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.