오늘의 공부
오늘은 어제 목업 만들기와 이어지는 시간 후에 과제로 목업을 제출했다. 라이브 세션에서 다른 분들이 만든 목업을 보면서 어떤 의도로 이러한 방식을 사용했는지 코드를 기수 전체가 보면서 얘기를 들었다. 생각보다 시각적 효과들이 광범위해서 놀랐다. 여러 목업을 보면서 가장 감탄했던건 border-shadow를 통한 입체적 효과로 계산기를 실제 사진처럼 구현한 분도 계셨다.
나의 경우는 아래와 같이 코드를 작성했다.
<body>
<container>
<div class="calculator">
<div class="value">
<span>0</span>
</div>
<div class="buttons">
<div class="return_button">
<button class="input_button return">AC</button>
<button class="input_button return">=</button>
</div>
<div class="cal_button">
<div class="cal_column">
<button class="input_button">7</button>
<button class="input_button">8</button>
<button class="input_button">9</button>
<button class="input_button operator">+</button>
</div>
<div class="cal_column">
<button class="input_button">4</button>
<button class="input_button">5</button>
<button class="input_button">6</button>
<button class="input_button operator">-</button>
</div>
<div class="cal_column">
<button class="input_button">1</button>
<button class="input_button">2</button>
<button class="input_button">3</button>
<button class="input_button operator">x</button>
</div>
<div class="cal_column">
<button class="input_button double">0</button>
<button class="input_button operator">.</button>
<button class="input_button operator">÷</button>
</div>
</div>
</div>
</div>
</container>
</body>* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0px;
box-sizing: border-box;
font-family: monospace, cursive;
color: #000;
}
container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 320px;
height: 450px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
border-radius: 1em;
background: rgba(125, 125, 129, 0.3);
}
.value {
width: 270px;
height: 80px;
padding: 10px;
text-align: end;
background: rgba(84, 79, 79, 0.724);
border-radius: 0.2rem;
}
.value > span {
color: white;
}
.value > span {
font-size: 3em;
font-weight: 100;
}
.buttons {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 0.2rem;
}
.buttons > .return_button {
padding: 0 15px 0 15px;
}
.cal_row{
height: 55px;
border-radius: 0.2rem;
display: flex;
justify-content: space-between;
padding: 0 15px 0 15px;
}
.input_button {
width: 60px;
height: 50px;
border: 0;
font-size: 1.5em;
border-radius: 0.2em;
background: rgba(80, 75, 75, 0.456);
color: white;
cursor: pointer;
}
.double {
width: 130px;
}
.operator {
background: rgb(27, 103, 254);
color: rgb(255, 255, 255);
}
.return {
width: 130px;
background: rgba(0, 0, 0, 0.609);
color: rgb(255, 255, 255);
}
위의 목업 계산기 코드이다. 버튼 부분을 .button으로 구역을 나눠서 display:flex를 적용했다. 계산기 목업이기 때문에 다 큰 틀에서 벗어나지 않는 html 코드를 작성하셨다. 나도 border-shadow를 이용해서 꾸며보고 싶었는데 감각이 부족해서인지 어색해서 지웠다.
마무리
CSS까지 학습하면서 느낀 점은 전체적인 레이아웃을 구성하고 실현하기 위해선 display 속성에 대한 이해가 있어야 겠다고 생각했다. grid에 대해서 따로 공부해봤는데 큰 틀에서 레이아웃을 구성한다면 내부 아이템들을 플렉스로 위치한다면 좋겠다고 생각했다. grid line이나 grid number가 grid cell의 이정표? 느낌인 것 같다만 아직 학습이 부족하다.
좋은 정리가 된 곳이 있어 링크를 달아본다.
이번에야말로 CSS Grid를 익혀보자 - 1분코딩
굿 잡