우선 오늘 만든 계산기 목업~!~!~!
왼쪽은 심플한 파스텔톤이고 오른쪽은 윈도우95 컨셉으로 css를 작성했다.
또 모든 레이아웃은 flex를 사용해서 구현했다!
모든 레이아웃을 flex로 구현하면서 어려웠던 점은 역시 크기를 맞추는 일었다.
맨 아래 0 버튼의 경우 기본 사이즈의 2배만큼의 크기를 차지해야하는데 flex-grow만 사용했을때는 뜻대로 되지 않았다.
그래서 큰 버튼의 경우 기본 사이즈를 위해 주었던 flex-basis를 auto로 변경하고 width를 주어 고정 사이즈로 해결했는데 실시간 세션때 예제를 만드는걸 보니 역시 절대단위보다는 상대단위를 좀더 활용해야겠다고 생각했다.
'study > TIL' 카테고리의 다른 글
| 22.12.29 - 배열 (0) | 2022.12.29 |
|---|---|
| 22.12.27 - 계산기 기능 구현하기 (0) | 2022.12.28 |
| 22.12.23 - 레이아웃, display: flex (0) | 2022.12.23 |
| 22.12.22 - CSS 개요, 박스모델, CSS 선택자 (0) | 2022.12.22 |
| 22.12.21 - HTML 개요, 시맨틱 태그, 구조 잡기, id와 class (1) | 2022.12.21 |
