[TIL] 220504(์ˆ˜)

Beanxxยท2022๋…„ 5์›” 4์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
8/120
post-thumbnail

โ˜‘๏ธย Calculator Mock-up

ํŽ˜์–ด ๋ถ„์ด๋ž‘ ์–ด์ œ๋ถ€ํ„ฐ ์˜ค๋Š˜๊นŒ์ง€ html, css ํŒŒ์ผ๋งŒ ๊ฐ€์ง€๊ณ  ๊ณ„์‚ฐ๊ธฐ ๋ชฉ์—…์„ ๋งŒ๋“ค์—ˆ๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-05-04 แ„‹แ…ฉแ„’แ…ฎ 1 31 05
// 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 ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒ
profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€