[JavaScript] #1.2 Styles part Two (#코딩공부)

https://youtu.be/bxeC0BYm8Y0

---

<복습>

https://wook-2124.tistory.com/99

[JavaScript] #1.1 Styles part One (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

<코드기록>

<!-- .(class)controls 안에 Fill, Save button 만들기 -->
<div class="controls_btns">
<button id="jsMode">Fill</button>
<button id="jsSave">Save</button>
</div>

/* style.css 꾸미기 */
.controls {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls .controls_btns {
    margin-bottom: 30px;
}
/* all: unset으로 초기화 시킨 뒤 여러가지 설정을 만짐
 button:active는 button을 누르게 되면 active(동적)으로 움직이는 것을 뜻함 */
.controls_btns button {
    all: unset;
    cursor: pointer;
    background-color: white;
    padding: 5px 0px;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
  }
  
  .controls_btns button:active {
    transform: scale(0.98);
  }

<!-- Fill과 Save 버튼 위에 Brush의 크기를 조절해줄 range(범위창)을 만들기 -->
<!-- default(기본값 value) 2.5부터 시작해서 min(최소) 0.1부터 max(최대) 5.0까지 
  0.1의 step(by step)으로 움직이는 input range 완성 -->
<div class="controls_range">
<input
  type="range"
  id="JsRange"
  min="0.1"
  max="5.0"
  value="2.5"
  step="0.1"
/>
</div>

---

1. Fill, Save Button 만들기

div controls_btns 안에(>) #jsMode와(+) #jsSave 2개의 button을 만들었다.

 

이 코드를 작성하면 <div class="controls_btns">안에(>) <button id="jsMode>와(+) <button id="jsSave> button 2개가 만들어질 것이다. 

 

button명을 Fill과 Save로 하면 오른쪽에 보이는 것처럼 button이 만들어진다.

---

2. CSS로 Button 꾸미기

.(class)controls 전체를 display: flex로 행(row)으로 display하고, flex-direction: column으로 각각의 button을 column(열)로 구분했다. 그리고 align-items: center로 item들을 center로 모았다.

 

.(class)controls_btns 안에 있는 button을 all: unset으로 초기화시킨 뒤 cursor를 갖다대면 pointer로 보이게 하고, background-color는 white, 그리고 padding, width, border-radius를 만진 뒤, text-align: center로 text를 가운데로 놓았다.

 

그리고 box-shadow로 뒤에 음영이 보이게끔 설정하고, text-transform: uppercase로 text가 uppercase(대문자)로 표시되게 한 뒤, font-weight, font-size까지 설정했다.

---

3. Brush의 크기를 조절할 Range창 만들기

Fill과 Save button 위에 Brush의 크기를 조절해줄 range(범위창)을 가장 상위 class인 <div class="controls">안에 <div class="controls_range">를 만들고 input:range를 선택하면

 

<input type="range">가 만들어진다. 그리고 그 뒤에 <id="JsRange">라고 명명한다.

 

button과 마찬가지로 밑에 style.css에서 Fill, Save button과 margin-bottom으로 20px만큼 띄워줬다.

 

그 결과 Brush의 크기를 조절할 수 있는 range가 깔끔하게 만들어졌다.

 

<input>에 min, max, value, step으로 default(기본값, value)를 2.5로, min(최소) 0.1부터 max(최대) 5.0까지 0.1의 step(by step)으로 brush의 크기를 조절할 수 있는 range를 설정했다.

 

---

※ 코로나19 조심하세요!!!!