코드스테이츠 부트캠프 프론트엔드 44기
Section 1 Unit 4 : [HTML/CSS] 활용 2일차
1. 개발 과정
이번 페어 활동의 주제는 '계산기 목업'(Mock-Up)을 만들라는 것. 참고로 '목업'이기 때문에 실제 계산 기능 구현은 안 해도 된다. HTML과 CSS로 껍데기만 만들면 된다.
"어떻게 만들면 좋을까?" 하고 구글에 🔍[계산기 디자인]을 검색해본 결과 내 맘에 쏙 드는 디자인을 하나 발견했다.
…그러나 육각형 그리드를 구현하기 힘들어서 일찍 손절했다. (절대 포기가 아니다)
그 뒤로 꽤 고민하던 중 💥스파크💥가 내 뇌리를 스쳤다.
그래! 게임보이처럼 생긴 계산기를 만들자!
2. Figma
Figma로 만든 초안 겸 설계도.
솔직히 정석대로 만든 건지 잘 모르겠다. 이틀 벼락치기로 공부해서 어찌어찌 만든 거라……
확실히 파워포인트로보다 편하긴 한데, 익숙해지려면 꽤 시간이 걸릴 것 같다.
3. CSS
3.1. '그라데이션' 쉽게 만들기
여기서 Before와 After를 다시 한 번 비교해보자. 오른쪽이 좀 더 입체적으로 보이지 않는가? 왼쪽에 어두운 그라데이션을, 오른쪽에 밝은 그라데이션을 넣어 음영 효과를 내서 그렇다.
그럼 그라데이션을 어떻게 넣을까? 쉽게 넣는 방법이 있다.
CSS Gradient
https://cssgradient.io/
이 사이트를 이용해서 간편하고 알기 쉽게 그라데이션을 만들 수 있었다.
3.2. '그림자' 쉽게 만들기
CSS Scan : Beautiful CSS box-shadow examples
https://getcssscan.com/css-box-shadow-examples
이 사이트의 이용 방법은 다음과 같다.
- 사이트에 들어가면 수많은 그림자 예시들이 쭉 나열되어 있다.
- 마음에 드는 거 하나를 클릭한다.
- Copied! 라고 뜨면서 CSS 코드가 복사된다.
그리고 밑의 사이트는 (아까 설명한 CSS Gradient와 비슷하게) 각종 슬라이더를 조정해서 box-shadow 코드를 생성한다. 실제로 써보진 않았지만, 맘에 드는 그림자를 만들고 싶은 사람에게 충분히 도움이 될 것이다.
3.3. 반응형 웹 구현하기
나는 CSS의 모든 길이 단위에 vh를 사용했다.
width/height, border, border-radius, box-shadow, padding/margin, transform: translate(), 심지어 font-size에까지 vh를 써서 규격을 전부 통일시켰다.
그 결과 (Ctrl + 마우스 스크롤 따위로) 화면을 확대/축소하든 창을 줄이든/늘리든 상관없이, 형태가 변형되지도 않고 창 밖으로 계산기가 삐져나가지도 않는 완벽한 결과물을 도출해냈다.
3.3.1 그런데 왜 vh인가?
vh란, 브라우저 창 화면(viewport)의 세로 길이를 기준으로 한 '상대 단위'를 말한다. (예를 들어 50vh면 화면 세로 길이의 절반 길이, 100vh면 화면 세로 길이 그 자체가 된다.)
-
[화면을 확대/축소할 경우]
확대하든 축소하든 창 화면의 세로 길이는 변하지 않기 때문에, vh 값이 그대로 유지되어 콘텐츠가 변형되지 않는다. -
[창을 가로로 늘일/줄일 경우]
가로 길이(vw)만 변화할 뿐, 창의 세로 길이에는 아무런 영향을 받지 않는다. 때문에 vh 값이 그대로 유지되어 콘텐츠가 변형되지 않는다. -
[창을 세로로 늘일/줄일 경우]
창을 세로로 늘이면 vh도 같이 늘어나고, 줄이면 vh도 같이 줄어든다. 이 둘은 1:1 비례 관계다. 때문에 콘텐츠는 원형을 유지하며 크기만 변화한다.
3.4. 애니메이션 구현하기
오른쪽 상단에 달린 저 사이드 버튼은. 전원 켜기 겸 리셋 버튼이다.
참고로 누르는 형식이 아니라 슬라이드 형식이다. 때문에 '사용자가 슬라이드 키를 올리고, 손을 떼면 키가 제자리로 내려오는' 그런 스타일의 애니메이션을 구현할 필요가 있었다.
이러한 애니메이션을 사용하고 싶을 때 사용하는 CSS 키워드가 바로 animation, @keyframes이다.
#switch:active {
animation: slide-anim 0.5s forwards; /* 슬라이드 애니메이션 적용 */
}
@keyframes slide-anim {
0% {
transform: translate(0, -20vh);
}
50% {
transform: translate(0, -25vh);
}
100% {
transform: translate(0, -20vh);
}
}원래는 한 번 클릭하면 한 번 왕복하는 애니메이션을 만들려고 했다. 근데 그렇게 하기 위해서는 JavaScript 없이는 안 되는 모양이다. Pure CSS로 만들고 싶었는데… OTL
결국 울며 겨자 먹기로 :active를 사용했다. 여기서 :active란 마우스를 꾹 누르고 있는 도중에 발생하는 선택자를 말한다.
그래서 마우스를 클릭(누르고 바로 떼고)만 하면 애니메이션이 동작하려다 말아버린다.
4. 실제 계산 기능 구현하기
GameBoy Calculator
https://waypil.github.io/gameboy-calculator/
2023년 2월 23일. 게임보이 계산기 목업에 JavaScript를 적용, 드디어 진짜로 계산이 되는 계산기가 되었다! 호스팅은 GitHub Pages를 사용하였다.
언젠가 밑에 있는 버그들을 모두 수정하고, 키보드로 숫자/연산자 입력이 가능하도록 개량하고 싶다. 근데 시간이 나려나…?
4.1. Issues & Bugs
4.1.1. Operators pressed when perand is blank
숫자보다 사칙연산 버튼이 먼저 입력됨.
4.1.2. ▶ is not center on Naver Whale Brower
크롬 기반의 웨일 브라우저에서 ▶ 글자가 가운데 정렬이 안 되게 보임.
4.1.3. Reset button dosen't work sometimes at the top-right side
우상단에 달려 있는 리셋 버튼이 안 먹일 때가 있음.
<오늘의 한마디>
역시 난 생방송보다는 녹화 방송 체질
