[TIL] 220504(수)

Beanxx·2022년 5월 4일

CSS TIL html

TIL

목록 보기

8/120

☑️ Calculator Mock-up

페어 분이랑 어제부터 오늘까지 html, css 파일만 가지고 계산기 목업을 만들었다.

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div id="calculator_display">
            <div class="calculator__display--bare">
                <span class="calculator__operend--left">0</span>
                <span class="calculator__operator">+</span>
                <span class="calculator__operend--right">0</span>
                <span class="calculator__equal">=</span>
                <span class="calculator__result">0</span>
            </div>
            <div class="calculator__display--for-advanced">0</div>
        </div>
        <div id="calculator_button">
            <div class="line">
                <button class="big_button clear">AC</button>
                <button class="big_button calculate">=</button>
            </div>
            <div class="line">
                <button class="small_button number">7</button>
                <button class="small_button number">8</button>
                <button class="small_button number">9</button>
                <button class="small_button operator">/</button>
            </div>
            <div class="line">
                <button class="small_button number">4</button>
                <button class="small_button number">5</button>
                <button class="small_button number">6</button>
                <button class="small_button operator">*</button>
            </div>
            <div class="line">
                <button class="small_button number">1</button>
                <button class="small_button number">2</button>
                <button class="small_button number">3</button>
                <button class="small_button number operator">-</button>
            </div>
            <div class="line">
                <button class="big_button">0</button>
                <button class="small_button decimal">.</button>
                <button class="small_button operator">+</button>
            </div>
        </div>
    </div>
</body>
</html>

/* style.css */

* {
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

.calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 500px;
    background-color: black;
    padding: 1rem;
    border-radius: 10px;
}

#calculator_display {
    display: flex;
    width: 320px;
    height: 150px;
    margin-bottom: 1rem;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: aliceblue;
    border-radius: 10px;
}

#calculator_button {
    width: 320px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: gray;
    border-radius: 10px;
}

.calculator__display--for-advanced {
    display: none;
}

.calculator__display--bare {
    font-size: 3rem;
    margin-right: 10px;
}

.line {
    padding: 5px;
    display: flex;
    justify-content: space-around;
}

.big_button {
    font-size: 2rem;
    width: 140px;
    height: 60px;
    border-radius: 10px;
    font-family: monospace, cursive;
}

.small_button {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    font-family: monospace, cursive;
}

.operator {
    background-color: black;
    color: white;
}

.clear {
    background-color:antiquewhite;
}

.calculate {
    background-color: antiquewhite;
}

✋ flexbox 자유자재로 다룰 수 있어야 함!

☑️ CSS Selector 복습

💡 CSS Selector 문제 복습하면서 헷갈리는 개념 정리

p:first-of-type {…}
: p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택 (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택)
div:last-of-type {…}
: div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택
p:nth-last-of-type(2) {…}
: p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택

Beanxx

FE developer

이전 포스트

[TIL] 220503(화)

다음 포스트

[TIL] 220504(수)

TIL

☑️ Calculator Mock-up

☑️ CSS Selector 복습

💡 CSS Selector 문제 복습하면서 헷갈리는 개념 정리

[TIL] 220503(화)

[TIL] Day9 #Coding:계산기 기능

0개의 댓글