🏁 계산기 만들기(2/3)

🏁 계산기 만들기(2)

기존에 있던 계산기에서 히스토리를 보여주고 싶다는 생각이 들어서
이런저런 시도를 해보았다

스크롤 하단에 고정시키기

🤔 새로운 히스토리가 쌓일 때 스크롤이 하단에 고정됐으면 좋겠음!

이걸 만들기 위해서 우선 스크롤이 y에 생겨야돼서
overflow-y: auto를 해주고 스크롤 하단에 고정하는걸 찾다
이 블로그를 보고 display를 넣어야 되는구나 를 깨달음!
그래서 display:flex 넣고 wrap-reverse, row-reverse 으로
새로고침해도 스크롤이 하단에 고정되게 하였다.

<!--display 안에 history 와 current 값으로 구분-->
<div class="display">
   <div class="history">
       <span>123+12=135</span>
       <span>234-12=222</span>
       <span>12,345*123=1,518,435</span>
       <span>147-14=133</span>
       <span>159+15=174</span>
       <span>11/10=1.1</span>
   </div>
   <div class="current">
       <p>123-12 =</p>
       <p>111</p>
   </div>
</div>

/* history 스크롤 하단 고정 위해 넣은 코드 */
overflow-y: auto; 
display:flex;
flex-direction: row;
flex-wrap: wrap-reverse;
--------------
/* - 스크롤 y축으로 만들기
   - history에 있는 컨텐츠들 flex 로 정렬
   - 가로정렬로 해야 span 들이 옆에 붙을 것
   - wrap-reverse 로 해서 하단부터 시작이라고 알려줘서
     추후에 진짜 history가 쌓일때는 html 코드 상 위에서 쌓이게 해야됨 */

스크롤에 스타일 넣기

🤔 다른 os에서 볼 때도 mac os 처럼 깔끔한 스크롤 느낌이였으면 좋겠다

위에 같은 생각이 들어서 아래 요소들을 사용해 스크롤바에 배경색과 모양을 변경했다.

::-webkit-scrollbar : 스크롤 바 전체
::-webkit-scrollbar-thumb : 스크롤 바 막대 부분
::-webkit-scrollbar-track : 스크롤 바 배경(?)

태그 앞, 뒤에 컨텐츠 추가하기

🤔 히스토리 내역들을 구분할 수 있는 구분점이 있어야 할텐데,,,

이거는 진짜 javascript로 간단하게 구현 가능하지만
지금은 css만 사용해서 계산기를 만드는거니까! (라는 변명)
히스토리 내역들이 쌓일텐데 그들을 구분하기 위해서
각 span 뒤에 , 를 붙여라를 하기 위해 ::after 를 사용했다.
(앞에 붙이려면 ::before 을 사용하면 됨)
그렇게 넣은 , 의 색이 회색이여서 천단위 숫자에 찍히는 콤마랑 비슷해 구분이 어려웠다🤢
그때 스터디원 아름님의 아이디어로 컬러를 넣고, 추후에 ; 이게 좋겠다는 생각이 들어서 변경ㅎ

.display .history>span::after{
	content:';';
	margin-right:0.5rem;
	color:#1886FF;
}

히스토리 스크롤 위에 blur 넣기

🤔 스크롤 영역 상단에 blur 느낌을 줘서 뚝 끊기는 느낌을 없애고 싶은데,,

이게 정말 오래걸렸다..😭😭
처음에는 absolute 쓰기 싫어서 그거 말고 다른거!! 를 찾다가
결국 돌아온 position: absolute ,,ㅎ,,
근데 이걸 어디에 띄우지??? 생각하다가 아 맞다 ::after
그런데 자꾸 width 가 안맞거나 위치가 안맞거나,,
도대체 이유가 뭐지 하고있을 때 스터디 다른분이 설명해주시는 걸 듣고
아 맞다 relative!!
absolute 쓰는데는 relative 가 같이 쓰여야 된다는 걸 잊고 있었다.
오늘일로 더 안 잊을 것 같은 느낌이랄까
( position: absolute 를 쓰기 위해서는 어디를 기준으로 띄울지를 알려줘야 하기 때문에 기준을 잡을 position: relative 를 기준 요소에 넣어줘야 한다.)

그렇게 넣어준 css
(아랫부분에도 ::after 사용해서 넣어주었다)

.display::before {
	content:'';
	display: flex;
	width:300px;
	height:1rem;
	top:15px;
	right:26px;
	position:absolute;
	background: linear-gradient(to top, #eeeeee50, #eeeeee10, #eeeeee);
}

그렇게 수정된 애증의 계산기

버튼에 hover 와 active도 추가했다