오늘은 어제부터 이틀간 페어프로그래밍 활동으로 계산기 목업을 만들어보았다.
틀만 잘 잡으면 디자인은 얼추 하면 되겠지 하는 내 생각에 뒷통수라도 치듯.. 계산기를 디자인하는데 걸리는 시간이 레이아웃 작업보다 4배는 더 걸렸던 거 같다. 아무래도 동기들과 작년 기수 선배분들의 작업물을 보고 내 작업물을 보다보니 많이 부족함을 느끼기도 했고 살짝 부끄러웠던 거 같기도 했다.. 그래서 어제 정규 세션이 끝나고 잠깐의 휴식 후 구조부터 다시 차근차근 시작해나갔다. 디자인 또한 생각이 나는대로 메모장에 적어두고 하나씩 내가 생각한 디자인의 배경을 골라보았다. 그렇게 몇시간 동안 찾아본 결과 또한 .. 찾지 못하였다... 그래서 대충 배경색을 하늘색으로 설정해두고 잠에 든 거 같다.
그렇게 오늘이되고 9시부터 페어분과 다시 계산기 목업을 만들게 되었다. 페어분은 확실히 디자인 감각이 뛰어 나신 거 같다는 생각이 들었고 결과물도 완벽했다 .
나는 또다시 배경 지옥에 빠지게 되었고 화면 공유를 통해 작업을 진행하고 있었는데 천사같은 페어분께서 배경 디자인을 추천해주셨고 정말 놀랍게도 내가 생각한 이미지와 딱 맞는 배경을 공유해주셨다. 덕분에 계산기 목업 과제는 잘 끝낼 수 있었던 거같다.
완성된 결과물
짜잔!!
계산기 디자인을 그림 느낌의 컨셉을 잡았기 때문에 배경 또한 그림으로 된 배경을 추가하였고 마치 책상 위에서 계산기를 두들기며 계산을 하는 모습을 1인칭 시점으로 표현하고 싶었다. 또한 나중에 자바스크립트를 활용하여 기능까지 추가가 된다면 가운데 공책에 사용자가 입력한 숫자와 결과가 뜰 수 있게 또한 지우개를 추가하여 공책에 써진 숫자들을 모두 지울 수 있게도 만들어 볼 것이다. 계산기 색상은 오래 볼 수있도록 눈이 부담되지 않은 따뜻한 색감으로 선택하였고 버튼 정렬은 flexbox 속성을 사용하여 버튼을 정렬해주었다. 계산기 몸통부분을 부모요소로 두고 자식요소로 숫자가 표시되는 부분, 취소버튼 부분, 숫자,기호판 부분 3가지로 나누었고, 숫자 기호판 부분 또한 flexbox를 활용해 정렬해주었다.
핵심적인 CSS속성으로는 뒷 배경과 어우러질 수 있도록 계산기에 그림자를 준 것과 또한 마우스가 버튼에 올라갔을 때 색이 변하는점, 버튼을 클릭했을 때 버튼이 눌리도록 한 점을 핵심으로 두었다.
사실 결과만 보면 모두 완성한 것 같지만 미완성 부분으로는 반응형으로 만들지 못해 매우 아쉬움이 남는다.
반응형으로 제작하는 부분 또한 페어분께서 알려주셔서 나중에 한번 도전해봐야 할 거 같다 !!
수정해야 할 부분은 1. 화면이 줄어들 시 자연스럽게 배치는 유지하면서 줄어들게 하기 (배경, 계산기 )2. 계산기와 공책부분 간격 맞추기 이번 주말에 이 점을 수정보완해 볼 것이다.
코드 첨부
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계산기 목업</title>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="calculator">
<div id="display">
<div id="show">123+456</div>
</div>
<div id="undo">
<div id="codestates">
codestates_BJB
</div>
<button id="undobtn" class="sign">
<i class="fi fi-rr-delete" id="delete"></i>
</button><!-- //아이콘이나 이미지 -->
</div>
<div id="numberboard">
<div id="first" class="board">
<button id="ac" class="sign">C</button>
<button id="bracket" class="sign">()</button>
<button id="percent" class="sign">%</button>
<button id="division" class="sign">÷</button>
</div>
<div id="second" class="board">
<button id="seven" class="number">7</button>
<button id="eight" class="number">8</button>
<button id="nine" class="number">9</button>
<button id="multi" class="sign">x</button>
</div>
<div id="third" class="board">
<button id="four" class="number">4</button>
<button id="five" class="number">5</button>
<button id="six" class="number">6</button>
<button id="minus" class="sign">-</button>
</div>
<div id="fourth" class="board">
<button id="one" class="number">1</button>
<button id="two" class="number">2</button>
<button id="three" class="number">3</button>
<button id="plus" class="sign">+</button>
</div>
<div id="fifth" class="board">
<button id="ddzero" class="number">
00
</button>
<button id="zero" class="number">0</button>
<button id="dot" class="sign">.</button>
<button id="result" class="sign">=</button>
</div>
</div>
</div>
</div>
<div id="result">
<div >12+34=36 <br>
123+456=579</div>
</div>
</body>
</html>
CSS
@font-face {
font-family: 'WandohopeR';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/WandohopeR.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
border: 0px;
box-sizing: border-box;
font-family: 'WandohopeR';
color: #000;
}
body{
display: flex;
/* justify-content: center; */
align-items: center;
height: 100vh;
overflow: hidden;
background-image: url(./back.jpg);
background-size: 100% 100%;
}
/* #container{
} */
.calculator {
margin-left:20%;
width: 300px;
height: 500px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: rgb(24,72,104);
border-radius: 10%;
padding: 20px;
box-shadow: -15px 15px 5px rgb(241,142,49);
}
#display{
flex-grow:2;
text-align: right;
display: flex;
flex-direction: column;
}
#show{
background-color: hwb(0 91% 2% / 0.985);
text-align: right;
font-size:40px;
padding:10px;
margin:15px;
margin-top:30px;
border-radius: 15px;
box-shadow: 5px 5px hsl(203, 63%, 14%);
border: 2px dotted whitesmoke;
font-weight: 900;
}
#undo{
flex-grow:1;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
}
#numberboard{
flex-grow:7;
display: flex;
flex-direction: column;
}
.board{
flex-grow:1;
display: flex;
align-items: center;
height: 40px;
}
.sign{
width:35px;
padding:5px;
margin:5px;
flex-grow: 1;
/* background-color: rgb(24,72,104); */
border-radius: 10%;
font-size:22px;
font-weight: 900;
box-shadow: -6px 6px hsl(203, 63%, 14%);
/* box-shadow: 5px 5px 5px #e63030ca; */
background-color: hsl(0, 0%, 88%);
transition-duration: 0.3s;
}
.number{
width:35px;
padding:5px;
margin:5px;
flex-grow: 1;
background-color:rgb(243,243,218) ;
border-radius: 10%;
font-size:22px;
font-weight: 900;
box-shadow: -6px 6px hsl(203, 63%, 14%);
/* box-shadow: 5px 5px 5px #e63030ca; */
transition-duration: 0.3s;
}
#fifth{
margin-bottom: 10px;
}
button:active{
margin-left:7px;
margin-top:7px;
box-shadow: none;
/* background-color: hsl(205, 66%, 82%); */
}
#undobtn{
flex-grow:1;
}
#codestates{
flex-grow:1;
}
#codestates{
font-size:28px;
text-align: left;
margin:10px;
color:#bbbbbb;
text-shadow: 3px 3px black;
}
#delete{
display: block;
padding-top:5px;
}
button:hover{
/* background-color: hwb(16 0% 0% / 0.944); */
background-color: rgb(241,95,80);
}
#deco{
position: absolute;
left: 65%;
top:30%;
}
#deco img{
width: 600px;
}
#result div{
margin-left:240px;
width:400px;
height: 400px;
text-align: center;
font-size:24px;
/* background-color:rgb(241,237,226); */
}
'코드스테이츠44기 프론트엔드' 카테고리의 다른 글
| [코드스테이츠 44기 프론트엔드 7일차 회고록] 조건문,반복문,함수에 대해 (0) | 2023.02.21 |
|---|---|
| [코드스테이츠 44기 프론트엔드 6일차 회고록] javascript 타입과 변수 (0) | 2023.02.20 |
| [코드 스테이츠 44기 프론트엔드 4일차 회고록] Flexbox로 레이아웃 잡기 (0) | 2023.02.16 |
| [코드스테이츠 44기 프론트엔드 3일차 회고록] CSS에 대해 - 1 (0) | 2023.02.15 |
| [코드스테이츠 44기 프론트엔드 2일차 회고록] HTML의 기초부터 심화까지 (0) | 2023.02.14 |
