✅ TIL
커비 코드 리팩토링 & 디자인 완료
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>계산기</title>
<link rel="stylesheet" href="index.css" />
</head>
<img src="./img/object.png" alt="계산기" />
<body>
<div class="calculator">
<div class="calculator_display">0</div>
<main>
<div class="numberline5">
<button class="btn-erase">C</button>
<button class="btn-plus-minus">+/-</button>
<button class="btn-per">%</button>
<button class="btn-slash">/</button>
</div>
<div class="numberline4">
<button class="btn7">7</button>
<button class="btn8">8</button>
<button class="btn9">9</button>
<button class="btn-star">*</button>
</div>
<div class="numberline3">
<button class="btn4">4</button>
<button class="btn5">5</button>
<button class="btn6">6</button>
<button class="btn-minus">-</button>
</div>
<div class="numberline2">
<button class="btn1">1</button>
<button class="btn2">2</button>
<button class="btn3">3</button>
<button class="btn-plus">+</button>
</div>
<div class="numberline1">
<button class="btn0">0</button>
<button class="btn-dot">.</button>
<button class="btn-result">=</button>
</div>
</main>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
border: 0px;
box-sizing: border-box;
font-family: monospace, cursive;
color: black;
}
img {
height: 100vh;
width: 50%;
position: absolute;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url("./img/kirby.gif") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.calculator_display {
border-radius: 1vw;
justify-content: center;
text-align: end;
color: white;
font-size: 3.5vw;
display: flex;
flex-direction: column;
height: 12vh;
width: 100%;
padding: 10%;
flex: 40 1 0;
}
main {
height: 48vh;
width: 100%;
justify-content: center;
align-items: center;
padding: 5%; /* TODO. padding %로 다뤄보기*/
border-radius: 20px;
margin-top: 1vh;
}
.numberline5,
.numberline4,
.numberline3,
.numberline2,
.numberline1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5%;
margin-top: -1vh;
}
.calculator {
width: 30vw;
height: 65vh;
padding: 1%;
position: absolute;
border-radius: 10vh;
}
.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6,
.btn7,
.btn8,
.btn9,
.btn0,
.btn-dot,
.btn-plus,
.btn-minus,
.btn-star,
.btn-slash,
.btn-plus-minus,
.btn-per,
.btn-plus-minus,
.btn-result,
.btn-erase {
background-color: rgba(250, 217, 222, 0.8);
width: 14vh;
height: 5vh;
font-size: 1.3vw;
border-radius: 3vw;
padding: 1%;
font-weight: bold;
cursor: pointer;
flex: 1 1 auto;
margin: 2%;
}
.btn-erase,
.btn-plus-minus,
.btn-per {
color: red;
}
✅ ToDo
1. 기존 커비 컨테이너 뜯어서
section 마다 수치를 각각 주는 방식 ->
전체를 display:flex로 잡고 flex-grow 값을 주어서 갈끔하게 비율 조절
2. 쿼리셀렉터로 버튼 이어주면서 이번 주 금요일 진도 나가기
🔥 4.19일 추가 TIL
오늘 새벽, 위 ToDo를 완전히 부셨다.
공부량이 많아 얻어낸 것들을 정리해보겠다.
1. 계산기 전체를 flex, column 방향으로 입히고,
디스플레이와 패드열 부분도 마찬가지로 flex, column을 주면
flex 를 이용하여 화면을 자동으로 조절할 수 있게 만들 수 있음
2. 전체 틀인 부모의 개념과 안에 구성 요소인 자식들은
서로 각자 다르게 생각해야하며, 자식은 디테일하게 %, vh,vw로 값을 준다.
justify-content: center;
align-items: center;
// 부모에게 할당, 자식한테 줄 필요 없음3. 브라우저 가로 최대, 세로 최소로 했을 때 커비가 삐져나옴
-> 버튼들의 margin % 때문에 버튼이 커비 밑으로 삐져나오는 거였음
-> 추가로 계산기 전체 틀이나 패드열 줄 안에 패딩 값을 너무 많이주면 깨지고,
버튼 개인 패딩, 마진 값을 너무 많이 주면 화면 밖으로 이탈한다.
이 과정을 토대로 전체적인 컨테이너의 구조에 많이 익숙해질 수 있는 기회가 되었다.
🔥 커비! 무엇이 바뀌었나 ?
코드를 보면서 설명하겠다.
나중에 봤을 때, 한 눈에 들어오기 쉽게 주석을 추가했다.
이제 처음 css를 작성할 때 전체 스크린 기본 값 초기화는 필수이다.
위에서 설명한대로 전체 틀, 디스플레이, 자판 부분 모두
display: flex 과 flex-direction: column 을 줘서 서로 맞물리게 해줬다.
이를 토대로 flex: N 0 0; 로 전체적인 비율을 조정할 수 있었다.
나 같은 경우는 디스플레이 : 자판 = 1 : 3 비율이다.
그리고 자판 부분 틀에서 justify-content: center -> space-between 변경이 있었다.
위와 같이 했을 때 column 방향이라 자판들이 위 아래로 흩어지는데
비율 맞추기도 편할 뿐더러, 가독성 면과 디자인 면에서 훨씬 좋아보였다.
이렇게 어제 ToDo 중 1번을 클리어했다! 💪💪💪
그런데..
깃헙에 커비를 배포해서 보니 뭔가 어색한 것이다.
그러다 머릿 속에서 '이걸 핸드폰 버전을 따로 만들면 어떨까?' 라는 생각이 들었다.
그때 그 생각을 하지 말았어야 했다.
🔥 커비! 핸드폰으로 들어오다.
저번에 노마드코딩 때, 설명은 안하셨지만 다뤘던 css 중 코드 한 줄이 딱 떠올랐다.
css 부분에서 @media <- 이렇게 생긴 것이 있었던 게 기억났다.
vscode에선 저 부분만 색이 달랐고, 그 옆에 막 숫자가 적혀있어서 오 신기하다.
하면서 넘겼었는데 딱 그 부분이었다.
그리고 그 파일을 열어봤는데 맞았다.
해상도 관련한 css 기능이었다.
@media screen and (max-width: 575px) {
/* 화면 세로 기준 모바일에 추가할 내용 */
}바로 웹서핑을 참을 수 없었고, 마침내 찾아내 막 시도하기 시작했다.
잘은 모르지만 도전하고있는 내 자신에 가슴이 웅장했다.
처음엔 css에 저 코드만 넣고, 안 쪽에 나머지 코드 짜면 된다길래
이미지랑, 계산기 가로 세로 비율을 좀 생각해서 고쳤다.
근데, 또 다른 문제가 생겼다.
아무리 Git 빌드를 해도, 홈페이지가 업데이트되지 않았다.
왜 그런가 했는데 이것때문이었다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />알고보니 처음에 html 생성하고, 별 거 아닌 줄 알고
지웠었는데 브라우저 호환과 해상도 호환 코드였다.. ㄷㄷ.. 😳
결국 계속 되는 예상 밖 시츄에이션에 얽히고 설켜 머리 싸맸다.
한 번에 딱 될거라 생각은 안 했지만, 위 사진처럼 그 과정은 12번이나 걸리게 되었다.
결국 모바일 스타일 시트 추가에 성공하였다. 🔥🔥🔥
@media screen and (max-width: 575px) {
img {
height: 50vh;
width: 70%;
position: absolute;
}
.calculator {
width: 30vw;
height: 45vh;
position: absolute;
display: flex;
flex-direction: column;
}
.calculator_display {
margin-right: 0vw;
font-size: 2.5rem;
text-align: center;
margin-top: -20vh;
margin-bottom: 20vh;
}
.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6,
.btn7,
.btn8,
.btn9,
.btn0,
.btn-dot,
.btn-plus,
.btn-minus,
.btn-star,
.btn-slash,
.btn-plus-minus,
.btn-per,
.btn-plus-minus,
.btn-result,
.btn-erase {
width: 12vw;
height: 4vh;
}
}🍪 cookie - 커비 성형 전
나야 나.
Your father.
