Hezzi

For my own study record

계산기 만들기- 1

Updated:

Categories:

Tags: , ,

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

목업

  1. 초안

​ 원래 생각했던 계산기 모양은 이거였는데

​ 왼쪽에 기본계산기는 나중에 구현해야 할 기능이 많아서 모양은 쉬울 것 같은데

​ 나중을 위해서 조금 패스해야겠다 생각하고

​ 아이폰 계산기는 모양도 기능도 쉬워보였는데 0을 만드는게 조금 어려워보였음

​ 근데 0보다 =을 더 강조해야할 것 같아서 내 방식대로 수정해보기로 함.

HTML

  1. 최상위 클래스로 calculator 만든 후

    아래에 버튼 기능을 클래스로 만들고 열(row) 별로 정리하기 위해서 열마다 클래스를 지정해줌,

    1
2
3
4
5
6
7

      <div class="calculator">
 	 <div class="calculator__buttons">
 		 <div class="row first">
 			<button class= "clear b">AC</button>
       <button class="operator b">+/-</button>
       <button class="operator b">%</button>
       <button class="operator a">/</button>

  2. 출력되는 부분은 내가 생각하기에는 변경될 일이 없을 것 같아서 id로 지정함. 그리고 input type으로 키보드로 입력할 수 있어야하지 않나,,,? 싶어서 text로 해주었음

    1

     <input id="print" type="text" placeholder="0">

  3. enter는 색깔과 크기를 다르게 지정해주려고 class를 계속 추가해줌..

    1
2
3
4
5

       <div class="last fifth">
     <button class="number">0</button>
     <button class="decimal">.</button>
     <button class="enter a eq">=</button>
   </div>

CSS

  1. 완성작

  2. HTML에 CSS 파일 연결

    1
2
3
4
5
6

     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>calculator</title>
     <link rel="stylesheet" href="style.css">
 </head>

  3. 계산기 크기 및 정렬

    처음에 계산기가 전체 화면이면 좀 그러니까 크기랑 body 부분 먼저 설정해줌.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

        
 body {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }
    
 .calculator {
     width: 350px;
     height: 500px;
     background-color: rgb(236, 210, 234);
     border-radius: 5%;
 }

  4. 출력창

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

     #print {
     width: 98%;
     height: 25%;
     margin: 3.5px;
     box-sizing: border-box;
     display: flex;
     padding-right: 20px;
     padding-top: 30px;
     border: none;
     border-radius: 30px;
     font-size: 2.5em;
     font-weight: 900;
     color: black;
     background-color: rgb(243, 234, 245);
     justify-content: flex-end;
     text-align: right;
 }
    1. 출력창의 왼쪽에서 출력해야해서 justify-content: flex-end; text-align: right; 정렬을 오른쪽으로 부터하게 설정해둠.
    2. 근데 너무 오른쪽 박스 끝에서 출력되서 padding-right 설정으로 띄워둠
    3. 동그란화면과 큰 글씨체를 위해서 font-weight 과 border-radius 설정함.
  5. 버튼

    1. 버튼은 열별로 정렬 할 수 있게 flex-direction: row; 으로 설정

      1
2
3
4
5
6
7
8
9
10
11
12
13
14

       .row {
     display: flex;
     flex-direction: row;
     margin-bottom: 1px;
 }
        
 .first,
 .second,
 .third,
 .fourth,
 .fifth {
     height: 65px;
        
 }

    2. 위에 있는 연산자와 오른쪽 연산자의 색상을 다르게 설정하기 위해 따로 커스텀

      1. 연산자 1
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

              
 .a { 
     width: 24%;
     font-size: 2em;
     background-color: rgb(166, 100, 219);
     box-shadow: 0.5px 0.5px 0.5px 0.5px gray;
     color: white;
     margin: 0.3px;
     padding: 0px;
     border-radius: 50px;
     border: none;
 }
        
 .operator.b, .clear.b{
        
     width: 24%;
     font-size: 2em;
     background-color: rgba(162, 39, 219, 0.288);
     color: rgb(250, 250, 250);
     box-shadow: 0.5px 0.5px 0.5px 0.5px gray;
     margin: 0.3px;
     padding: 0px;
     border-radius: 50px;
     border: none;
        
 }
  6. 상단 버튼 추가

    1. 다하고 나서 추가로 위에 버튼 해보고 싶었는데 클래스랑 어떻게 설정해야되는지 몰라서 혼자 막 시도하다가 결국 해냄…!

      1
2
3
4
5
6

              
         <div id="top">
             <img class="exit" src="https://img.icons8.com/?size=100&id=23537&format=png&color=000000"/>
             <img class="minsize" src="https://img.icons8.com/?size=100&id=23538&format=png&color=000000" style="height: 18px;"/>     
             <img class="icon" src="https://img.icons8.com/?size=100&id=3qbbkYx6F2FY&format=png&color=000000"style="height: 18px;"/>
         </div>  

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

       #top {
     width: 98%;
     height: 5%;
     display: flex;
     flex-direction: row-reverse;
     margin-top: 3px;
 }
        
 .exit {
     flex-basis: 10px;
     background-color: transparent;
     width: 15%;
     height: 72%;
     margin-right: 2%;
     margin-left: 2%;
        
 }
        
 .minsize {
     flex-basis: 0.1px;
     background-color: transparent;
     margin-left: 2%;
 }
        
 .icon {
     flex-basis: 20px;
     background-color: transparent;
 }
        
 #top>img {
     box-shadow: 0.5px 0.5px 0.5px darkslateblue;
 }
        
 #top>img:active {
     box-shadow: none;
 }

      기능 구현도 안되고 클릭조차 되지 않고 목업만 만든거지만 윗줄에 닫기랑 최소화버튼 만듬…ㅎㅎ

      그림자도 추가해서 입체감있게 만들었다.

  7. 버튼 추가기능

    그리고 클릭은 안되지만 버튼에 커서 갔다대면 변화하게끔 hover 기능도 추가해주었음

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

         
 .number:hover,
 .decimal:hover {
     background-color: #d4d4a7;
     box-shadow: none;
 }
    
 .operator.a:hover {
     background-color: #7ec455;
 }
    
 .enter:hover,
 .operator.b:hover, .clear.b:hover {
     background-color: #ffb732;
 }

comment

개발자 도구창이 있어서 잘몰라도 F12 눌러서 버튼 갖다대보고 이것 저것 시도했더니
오래걸려도 목업까지는 만들 수 있었던것 같다. 사실 Selector는 기본적인 것만 알고 flex도
배웠으니까 한번 써보자 하고 썼는데 아직 완벽하게 이해하지는 못한 것 같다
CSS 잘하고 싶어서 이것 저것 선택해보고 요소도 넣어봤는데 자꾸 추가가 안되길래
왜그런가 했는데 상위 클래스에서 구현해야했거나 상위에 이미 다른 걸 설정해서 안되었던 것이 많았다..!!! github.io로 블로그 만들고 싶어서 프론트 배우기만을 기대했는데
이정도면..노력이 더 필요할 것 같다. 언제 블로그 이사하지…? 무튼 나 자신 힘내보자.

html-css 카테고리 내 다른 글 보러가기

Leave a comment

최근 글 10 개 :)