오늘은 css에서 지난번에 이어 기초를 마무리하는 것으로 시작하였다.
css에서 페이지를 분할하여 웹페이지를 만드는 것이었는데, 여기서 css가 하는 역할이 매우 크다. 사실 아직도 정확히 display:flex 를 이용해 페이지를 만드는 방법이 정확하게 어떻게 동작하는지 이해 하지는 못했다. 다음주 복습시간에 고민해봐야겠다.
어쨋든 공부한 것을 토대로 영역을 구분하는 코드를 짜서 만들었는데, 과제로 주어진 것과 완벽하게 똑같이 되지는 않았지만 이정도면 만족스럽다.
그다음 페어프로그래밍이라는 것을 진행하였는데, 같은 수강생중 한명과 협업을 하여 계산기 목업을 만드는 것이었다. 완전 처음보는 남이랑 같이 과제를 하는거라 시작전에 긴장을 많이 했는데, 생각보다 같이 하는 분이랑 잘 맞아서 쉽게 끝낼 수 있었던 것 같다.
<!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="index.css">
</head>
<body>
<div class="calculator">
<div class="top">
<button class="xx">x</button>
<button class="minus">-</button>
<button class="plus">+</button>
</div>
<header>
0
</header>
<main>
<div class="bt">
<button class="item etc row1">C</button>
<button class="item etc row1">±</button>
<button class="item etc row1">%</button>
<button class="item cal row1">÷</button>
</div>
<div class="bt">
<button class="item num row1">7</button>
<button class="item num row1">8</button>
<button class="item num row1">9</button>
<button class="item cal row1">×</button>
</div>
<div class="bt">
<button class="item num row1">4</button>
<button class="item num row1">5</button>
<button class="item num row1">6</button>
<button class="item cal row1">−</button>
</div>
<div class="bt">
<button class="item num row1">1</button>
<button class="item num row1">2</button>
<button class="item num row1">3</button>
<button class="item cal row1">+</button>
</div>
<div class="bt">
<button id="zero" class="item num row5">0</button>
<button class="item num row6">.</button>
<button id="eq" class="item cal row6">=</button>
</div>
</main>
</div>
</body>
</html>.calculator {
width: 350px;
height: 500px;
border-radius: 13px;
background-color: #585350;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px;
padding: 0px;
border: 0px;
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
}
.bt {
display: flex;
}
.item {
padding: 10px;
flex-grow: 1;
font-size: 20pt;
color: white;
border: none;
}
header {
height: 20%;
text-align: right;
font-size: 40pt;
padding-right: 10px;
color: white;
}
.bt {
height: 70px;
}
.top {
height: 10%;
margin: 10px;
}
.etc {
background-color: #686461;
}
.etc:active {
background-color: #817E7B;
}
.cal {
background-color: #F1A33C;
}
.cal:active{
background-color: #BF812E;
}
.num {
background-color: #817E7B;
}
.num:active {
background-color: #ABA8A6;
}
.xx {
background-color: #EC6A5E;
color: #EC6A5E;
border-radius: 50%;
}
.xx:hover {
color: black;
}
.minus {
background-color: #F4BF50;
color: #F4BF50;
}
.minus:hover {
color: black;
}
.plus {
background-color: #61C454;
color: #61C454;
border-radius: 50%;
}
.plus:hover {
background-color: #61C454;
color: black;
border-radius: 50%;
}
#zero {
flex-grow: 3;
border-bottom-left-radius: 13px;
}
#eq {
border-bottom-right-radius: 13px;
}
.row1 {
width: 25%;
}
.row5 {
width: 50%;
}
.row6 {
width: 25%;
}크게 보니깐 생각보다 예쁘게 나온 것 같다. 100% 만족 한다고 할 수는 없지만 최선을 다했으니 상관 없다.
오늘의 공부 요약
1.* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}를 써 다른 레이아웃을 바꾸기 쉽도록 하는 것이 좋다.
2. display:flex를 사용하고자 하는 요소의 부보요소에다 적용하면 flex성질을 이용할 수 있다.
3. flex-direction: (row, column) 을 사용해 가로정렬과 세로정렬을 선택할 수 있다.
4. 자식요소에 지정할 수 있는 성질은 justify-content(축 수평방향 정렬), align items(축 수직방향 정렬) 이 있다.
5. 자식요소에 지정가능한 flex는 grow, shrink, basis 순서대로 이다. 이를 통해 박스의 크기가 늘어날 때 각각의 요소들의 크기가 어떻게 변하는 지를 지정할 수 있다.
