5일차. 계산기 목업 CSS 응용

 

계산기 컨셉: 네온 사이버 펑크. 뒤에 달리는 자동차에 붙어있을것 같은, 번쩍거리는 계산기를 만들고 싶었다. 

움짤을 올리고 싶은데 안 올라가네...원래 배경이 막 움직인다. 

버튼의 정렬 방법: 

우선 계산창 부분과 타자 영역을 각각 다른 div로 묶어 class 배분하고, flex-direction:column; 으로 방향을 세워줬다. 이후 flex-grow:1, flex-grow:3 하여 차지 비율을 1:3으로 나눈 뒤 아래 버튼들은 각 줄마다 div로 묶어주었다. 또 이 줄 묶음들을 flex와 justify-content: space-evenly를 사용하여 위아래로 균등 배분한 뒤, 맨 아래쪽 0버튼은 row5에서 first-child로 선택해서 flex-basis를 40%로 다른 버튼의 두 배쯤 되게 늘려주었다.

우측의 연산 버튼들도 숫자 버튼처럼 같은 디자인으로 만들었다가, 영 보기가 싫어서 다시 사각으로 만들었다. 그 덕분에 맨 밑줄은 어차피 버튼 사이즈를 윗줄과 맞출 수 없게 되고 말았다. 

 

사용된 핵심 css속성: 
1. 반투명한 유리 효과. 
backdrop-filter: saturate(180%) blur(15px); 
backdrop-filter은 배경으로 아래 깔리는 이미지를 블러 처리해주는 반투명한 느낌을 준다.

filter:blur; 은 자기자신에게 블러 처리를 하는 것이고, backdrop-filter은 배경에 효과를 주는 기능. 사실 blur만 해도 되지만, 어두칙칙해지기 때문에 나는 saturate로 180%를 주어 채도를 높여 네온의 효과를 주었다. 100% 이하는 채도가 낮아지고 100%이상 200%이하는 채도가 높아진다.
유리 효과를 더 잘 보여주기 위해 background을 움직이는 gif 파일로 설정했다. 

2. 버튼 그라데이션 효과.

:active; 를 설정해서 눌렀을 때도 바뀌도록 적용, 금속질의 광택을 표시하기 위해 deg는 처음 0으로 했다가 140으로 바꾸었다. 대각선의 그라데이션이 3중으로 나타난다.

background: linear-gradient(140deg, #f4529b, #eaa2bc, #ea6fab);

3. 버튼의 발광 효과
발광 키보드(게임용)처럼 버튼 아래에서 네온 빛이 나오는 효과를 주었다. 이 효과에는 box-shadow를 사용했는데, 원래 그림자 효과를 내지만 box-shadow: 0px 3px 5px rgba(255, 241, 254, 0.5);로 했더니 어두운 색이 아닌 백색 그림자가 생겨서 빛이 나는 것처럼 보인다. 
또한 text에도 자체 발광이 가능한 효과를 넣었다. 
text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 11px #fff, 0 0 22px #0fa, 0 0 22px #0fa; 로 텍스트에 흰색 그림자를 여러 겹 겹쳐 쌓아 빛이 번지는 느낌이 나도록 했다. 여러 겹 쌓은 이유는 하나만 넣는 것보다 여러 단계로 색을 주는 것이 더 진짜 네온사인처럼 보이기 때문이다. 특히 가장 바깥 후광은 녹색광으로 주어서 사실감을 더했다.

4. 버튼을 누르는 효과

transform을 사용하여 scale이 0.98로 줄어들고 약간 아래로 내려가도록 translateY(1px);주어 버튼이 눌리는 효과를 주었다. 또 transition-duration을 0.1s 주어서 조금 더 부드럽게 눌리도록 하였다.

0.3s 이상 주지 않은 이유는, 딸깍 눌리는 듯한 투박한 효과를 원했기 때문이다.

button:active {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0px 3px 22px 1px rgba(0, 0, 0, 0.34);
  text-shadow: 0 0 9px #fff, 0 0 21px #fff, 0 0 42px #0fa;
  transition-duration: 0.1s;
}

5. 내부 그림자 효과로 오목하게 만듬. 

기본적으로 box-shadow는 다음과 같은 요소를 지닌다. 

box-shadow: offset-x(양수는 그림자가 우측, 음수는 좌측), offset-y(양수는 하단, 음수는 상단), blur-radius(숫자가 커지면 그림자가 더 흐려짐), spread-radius(숫자가 커지면 그림자가 커짐), color(색상 지정);

그리고 그 외에도 inset을 지정하면 내부로 오목한 그림자가 생긴다.

최종적으로  box-shadow: inset 0px -2px 5px rgba(156, 9, 167, 0.8)이런 식이다. 

또 그림자에서 inset, outset 타입 두 가지를 동시에 적용하기 위해서는 , 를 구분자로 사용해서 inset 내부 그림자를 앞에, outset 외부 그림자를 뒤쪽에 적용할 수 있다. 
ex) box-shadow: inset 0 0 5px blue, 0 0 10px green;
이러면 내부 그림자와 외부 그림자가 같이 생김.

발전시키고 싶은 부분: 
1. 엔터 누르면 계산기 본체가 진동하거나 번쩍거리게 하고 싶다. 
2. 버튼 누를 때 소리나는 효과도 ㅋㅋ 
3. 버튼에 hover시켰을 때 좌측에서 우측으로 네온바가 빠싱~ 날아가게 하는 네온 효과 넣고 싶음! 이건 css로 가능할 것 같은데.

4.야간 모드 넣어서 낮 모드에선 얌전하던 계산기가 배경 바뀌면 씽씽 달리게 하고 싶다. 야간모드 미디어쿼리로 설정이 가능.

https://giphy.com/search/neon
여기가 gif가 많더라... 

 

 

다른 분들 발표 들으면서 흥미로웠던 점!! 나중에 다른 곳에 적용해보게 더 공부해 볼 것.

• clip-path: 검색하면 일일이 안 만들어도 구글에서 도형에 맞는 코드를 보여준다. 이건 그냥 shadow 가 아니라 drop-shadow로 넣어야 한다. 
• radial gradiant로 가운데가 원형인 그라데이션을 줄 수 있다.
• 미디어쿼리로 화면의 max-width 따라서 이것저것 바뀌게 할 수 있다.
• label로 다른 아이콘을 걸어놓고 투명한 checkbox를 뒤에 배치해서 체크에 따라 다크모드로 전환 효과... 
• 뉴모피즘 스타일.(흰 종이 같은 스타일. 디자인 타입. 유사체로 글라스모피즘도 있음) https://youtu.be/1d1X6DkIg3M
• flex-grow는 basis가 먼저 할당된 공간만큼 가져간 뒤, 이제 남은 여백을 얼마만큼의 비율로 가져갈 것인가를 말한다(실시간 줌에서 알려주신 건데 이거 헷갈렸는데 이제 알겠음). 즉 basis가 기본이고 그 뒤에 grow가 작동. 

 

... 누가 작업물에 베이퍼 웨이브 느낌 좋다고 댓글 달아주셔서 맘이 따사로워짐 ㅇ.ㅇ:: 히히... 사실 베이퍼 웨이브가 뭔지 몰라서 뒤늦게 검색해봤는데, 딱 그 감성이 맞구나! 피드백은 사랑이다.

 

 

ERROR!

글자 오른쪽 정렬이 안 되던 문제 -> flex 써서 세로 중앙에 오게 align-items: center;로 맞췄는데 그러니까 text-align: end; 가 안 먹는 현상이 발생했다. flex내에서 해결해야 할 것 같아서 고민하다가 flex 요소 우측 정렬을 검색해보고 해결. 자식 요소들을 flex의 끝으로 보내기 위해선 justify-content: flex-end를 쓰면 됨. 
+ 또 하나의 팁은 margin-left: auto; 이걸 자식 요소가 가져도 우측으로 붙는다고 함....

왜 row5의 first-child가 선택이 안 되지? -> css는 앞에 클래스 더 많이 붙은 요소부터 적용되는 걸 까먹음. 

 

미묘하게 입체감이 덜하던 버튼 -> 과제 제출하고 나서 다시 손을 좀 봤다. inner shadow가 가능한 걸 모를 때 만든 버튼이라 다시 손 봐서 아래쪽에 그림자가 지게 해줌. 볼록함이 좀 더... 살아났나?