-
Calculator 만들기) 1. 기본 html, button 디자인 만들기HTML & CSS & JAVASCRIPT 2021. 1. 21. 19:57
javascript 기본 예제로 생각한 calculator 만들기
유튜브의 강의를 보고 따라하기로 했다.
https://www.youtube.com/watch?v=j59qQ7YWLxw
1. index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link href="styles.css" rel ="stylesheet"> <script src = "script.js" defer> </script> </head> <body> <div class = "calculator-grid"> <div class = "output"> <div class = "previous-operand"></div> <div class="current-operand"></div> </div> <button class="span-two">AC</button> <button>DEL</button> <button>÷</button> <button>1</button> <button>2</button> <button>3</button> <button>*</button> <button>4</button> <button>5</button> <button>6</button> <button>+</button> <button>7</button> <button>8</button> <button>9</button> <button>-</button> <button>.</button> <button>0</button> <button class="span-two">=</button> </div> </body> </html>2. styles.css
*, *::before, *::after { box-sizing: border-box; font-family: Arial, sans-serif ; font-weight: normal; } body { padding: 0; margin: 0; background: linear-gradient(to right,#ffa585,#ffeda0); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px,auto) repeat(5,100px); } .calculator-grid > button { cursor: pointer; font-size: 2rem; border: 1px solid white; outline: none; background-color: rgba(255, 255, 255, .75); } .calculator-grid > button:hover { background-color: rgba(255, 255, 255, .9); }사진으로 보면,
배경에 그라데이션 주고, 버튼 그리드 생성 
마우스를 가져다 대면 커서 모양이 바뀌고, 배경색이 좀더 밝은색으로 바뀐다. 'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글
Calculator 만들기) 3. Javascript 완성하기 (0) 2021.01.22 Calculator 만들기) 2. css 스타일 완성하기 (0) 2021.01.22 Blooger Website) 8. 애니메이션 추가하기 (0) 2021.01.09 Blooger Website) 7. 반응형 웹사이트로 만들기 (0) 2021.01.09 Blooger Website) 6. footer 섹션 만들기 (0) 2021.01.09