각 버튼에 대한 핸들러 구현
각 버튼에 대한 핸들러를 구현할 때 생각보다 고려할점이 많았다.
-
연산자를 연속으로 클릭할 경우를 고려
-
decimal을 연속으로 클릭할 경우 고려
-
아이폰 계산기 방식이기 때문에 처음으로 오는 연산자 이후의 연산자 입력시 계산하는 경우 고려
-
숫자 연산자 숫자 순서로 오게끔 고려
css 적용
grid, button 가상요소, shadow를 해보고 싶어 학습 후 적용해보았다.
결과물
새로 알게된 내용
HTML, BODY 100%
<head>
<style>
.container {
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
위와 같이 height: 100%는 생각처럼 동작하지 않는다.
이럴 경우 body, html에 height: 100%를 주면 해결된다. body만 하지않는 이유는 body 또한 부모의 html 기준으로 100%를 하기 때문에 html까지 적용시켜줘야한다.
<head>
<style>
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
<div class="container">Hello</div>
</body>
하지만 html과 body에 height: 100%를 적용하여도 가로, 세로에 여백이 생긴다.
이는 body 태그의 기본 margin 때문이다. body 뿐만 아니라 몇몇의 태그에는 기본적인 default값이 적용되어 있기 때문에 태그의 기본값을 초기화 해주는 css reset이 존재한다.
우리는 이 문제를 해결하기 위해 아래 코드를 추가해주면 된다.
body {
margin: 0;
}
height: 100%이외에도100vh를 이용해서 해결할 수 있는 방법이 존재한다.
- %는 부모 요소의 길이에 영향
- vw, vh는 뷰포트의 길이에 영향
:active, :focus
:active는 사용자가 활성화한 요소(버튼 etc.)를 나타낸다.
(즉, 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미)
:focus는 사용자가 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다.(
아래코드를 통해 계산기에서 버튼을 포커스 시 또는 active시에 애니메이션을 주기위해 사용하였다.
button {
transition: filter .3s;
}
button:active,
button:focus {
filter: brightness(140%);
}table요소가 아닌 grid속성 이용
6 x 4 grid를 만든 후 equal sign(result) 셀과 0 button에 대한 셀을 다음과 같은 코드를 통해 병합하였다.
.calcalator-buttons {
display: grid;
gap: 2px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
}
.result {
grid-row: 3 / span 3;
grid-column: 4 / 5;
}
button[value="0"] {
grid-row: 5 / 6;
grid-column: 1 / span 2;
}equal sign(result)를 예시로 설명해보면
grid-row: 3 / span 3는 row를 기준으로 3번째 부터 3개의 셀을 병합한다는 의미고 이는 곧 grid-row: 3 / 6으로도 쓸 수 있다.
그리고 grid-column: 4 / 5는 column을 기준으로 4번째 부터 5번째까지의 셀을 병합한다는 의미이다. (여기서 column은 기존의 한칸이랑 같다고 생각하며 생략해주면 의도와 다른 방향으로 셀이 이동한다.)
🎈 해당 관련 코드는 github에서 참조할 수 있다.
