-
Calculator 만들기) 2. css 스타일 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 22. 19:37
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 data-previous-operand class = "previous-operand"></div> <div data-current-operand class="current-operand"></div> </div> <button data-all-clear class="span-two">AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>*</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button data-equals 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); } .span-two { grid-column: span 2; } .output { grid-column: 1 /-1; /*전체를 다 쓰도록 설정*/ background-color: rgba(0, 0, 0, .75); display: flex; align-items: flex-end; justify-content: space-around; /*양쪽 끝으로 이동해서 모양을 짓도록*/ flex-direction: column; /*수직한 모양으로 설정*/ padding: 10px; word-wrap: break-word; word-break: break-all; } .output .previous-operand { color:rgba(255, 255, 255, .75); font-size: 1.5rem; } .output .current-operand { color:white; font-size: 2.5rem; }사진으로 보면,
디자인은 완성되었으나 버튼은 눌리지 않는 상태 'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글
Rock-Paper-Scissors 만들기) 1. HTML, CSS 완성하기 (0) 2021.01.24 Calculator 만들기) 3. Javascript 완성하기 (0) 2021.01.22 Calculator 만들기) 1. 기본 html, button 디자인 만들기 (0) 2021.01.21 Blooger Website) 8. 애니메이션 추가하기 (0) 2021.01.09 Blooger Website) 7. 반응형 웹사이트로 만들기 (0) 2021.01.09