06
22

.1 버튼에 쓸 수 있는 CSS

button:hover {
  background-color: #fff385;
  color: black;
  box-shadow: 2px 2px 5px gray;
}
/* 마우스를 올렸을때 줄 수 있는 효과. 위의 경우 색을 바꿔주고, 그림자를 줘서 버튼 느끼을 살린다. */

button:active {
  transform: scale(0.9);
}
/* 버튼을 눌렀을 때 줄 수 있는 효과. 크기를 조금 작게 만들어서 눌리는 듯한 느낌을 준다. */
  • 위의 예시처럼 버튼에 3D 느낌의 애니메이션 효과를 줄 수 있다.

폰트는 nanumsquare 이 깔끔하고 좋은것 같다. 하지만 많이 얇다. bold와 함깨라면 문제 없다.
계산기 기능 구연을 완벽하게 하려다가 다른 공부를 많이 하지 못 했다. 뭔가 많이 중간에 꼬인 느낌이다.
사이드 이펙트가 굉장히 많은 것 같다.
(결과 버튼을 계속 누른다거나...
연산자 버튼 이후 다시 숫자를 나오게 하는 부분이라거나...)

내일 다시 하나씩 처리해 볼 생각이다.

COMMENT