🦄 오늘은 이어서 CSS의 레이아웃 파헤치기쓰
🍀 오늘의 날짜 : 23년 02월 17일
🍀 오늘의 주제 : CSS /html 활용(2)
🌷햇깔리는 거🌷
flex-glow는 영역을 나누는게 아니라 남은 영역에서 어떻게 얼마나 차지할지.. 🤔🤔🤔
🌷오늘 작업 :: 계산기 묵업 02 🌷
미쳐버리겠는 계산기 야로
어제 만든 V01 계산기 말고 V02에서 미세하게 라인이 안 맞아서 눈물이 광광 납니다.
💡💡회고.01
어제 해결하지 못한 [ = ] 길게 늘리는거 해결함!
➡️ section을 상단부와 하단부로 나눠서 123= 아래는 하단부로 분리함.
그리고 이 하단부 안에서 1230.00 과 = 으로 두개의 section으로 나눈뒤 display: flex 와 flex-grow를 2: 1 비율로
조정해주었습니다.
마지막으로 [ = ] 부분을 flex-direction: column 지정 후 안에 padding -top: 50%으로 해서 [ = ] 이 중앙에 올 수 있게함.
URGENT : flex-grow로 비율을 분할 해서는 안되었음!!!! (쑤정 필요)
# 코드
/*하단부 = */
.buttons{
font-size: 25px;
background-color: #425062;
color: #fff;
padding: 20px;
width: 100%;
border-right: solid 2px #3C4857;
border-bottom: solid 2px #3C4857;
text-align: center;
}
.f{
align-items: right;
}
#equal{
color: #D95D4e;
background-color: #404D5E;
font-weight: bold;
flex-grow:1;
text-align: center;
padding-top: 50%;
}
#equal:hover:active{
background-color:#505d6d;
color:#ee786b;
}
.part03{
display: flex;
}
.two{
flex-direction: column;
display: flex;
}
.split{
display: flex;
}
.part02{
flex-grow:3;
}
.part03{
flex-grow:1;
}<body>
<div class="container">
<div class="calc-screen">
<div id="typed-num">0</div>
</div>
<div class="calc-typed">
<div class="calc-button">
<div class="button high">C</div>
<div class="button c">≠</div>
<div class="button c">%</div>
<div class="button c">x</div>
</div>
<div class="calc-button">
<div class="button n">7</div>
<div class="button n">8</div>
<div class="button n">9</div>
<div class="button c">-</div>
</div>
<div class="calc-button">
<div class="button n">4</div>
<div class="button n">5</div>
<div class="button n">6</div>
<div class="button c">+</div>
</div>
</div>
<div class="split">
<div class="part02 f">
<div class="calc-button one">
<div class="buttons n">1</div>
<div class="buttons n">2</div>
<div class="buttons n">3</div>
</div>
<div class="calc-button three">
<div class="buttons n">0</div>
<div class="buttons n">.</div>
<div class="buttons n">00</div>
</div>
</div>
<div class="part03 f">
<div id="equal" class="buttons high">=</div>
</div>
</div>
<!--끝-->
</div>
</body>
💡💡회고.02
보이십니까 어긋나는 저 부분
➡️ 해결 못함
아예 처음부터 숫자 누루는 부분은 section을 다시 행으로 크게 나눠서 flex-grow를 적용해야 할 것 같음.
뉴모피즘
20년도 Web 트랜드 였다는 CSS 효과
리얼한 질감과 평면 및 자료 디자인 같은 단순 결합한 새로운 스타일 ( NEW + Skeumorphism)
🔖 내가 만든 계산기 묵업 코드 : github
🌱 오늘의 생각
🔹심오한 디자인의 세계...
🔹
🌱 공부 중 참고 사이트
🔹
🔹
🌱 도움이 될 만한 사이트 추천쓰
'일상의 기록 > 🌷DAILY 회고록 : 코드스테이츠' 카테고리의 다른 글
| 🌷[230223] 코드스테이츠 부트캠프 D+8 (0) | 2023.02.23 |
|---|---|
| 🌷[230220] 코드스테이츠 부트캠프 D+6 (0) | 2023.02.20 |
| 🌷[20230216] 코드스테이츠 부트캠프 D+4 (0) | 2023.02.16 |
| 🌷[230214] 코드스테이츠 부트캠프 FE 둘째 날 (0) | 2023.02.14 |
| 🌷[230213] 코드스테이츠 부트캠프 FE 첫 날 (0) | 2023.02.14 |