<header>
  <h1>๐Ÿ… <b>ํ† ๋งˆํ† </b> ์–‘์‹</h1>
</header>

<section>
  <label>
    <input type="radio" name="contact" value="email" checked />
    <span>์ด๋ฉ”์ผ</span>
  </label>
</section>

<section>
  <fieldset>
    <label>
      <input type="checkbox" name="contact" value="email" checked />
      <span>์ด๋ฉ”์ผ</span>
    </label>

    <label>
      <input type="checkbox" name="contact" value="phone" />
      <span>์ „ํ™”</span>
    </label>
  </fieldset>
</section>

<section>
  <label><span>์˜จ๋„</span> <input type="range" name="temperature" value="30"></label>
</section>

<section>
  <div aria-busy="true" aria-describedby="progress-bar">
    <!-- ๋กœ๋”ฉ ์ค‘ ... -->
  </div>
  <progress id="progress-bar" aria-label="Content loadingโ€ฆ"></progress>
 </section>
:root {
  --brand: tomato;
  accent-color: var(--brand);
}

b {
  color: var(--brand);
}

progress {
  height: 30px;
}

span {
  font-size: 1.2em;
  vertical-align: middle;
}

fieldset {
  display: flex;
  gap: 1em;
  border: none;
  margin: 0;
  padding: 0;
}

header {
  padding: 8px 16px;
}

section {
  padding: 8px 16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.