main.css

/* 기본 박스 모델 초기화 */
* {
  margin: 0; /* 여백 제거하는 속성 */
  padding: 0; /* 내부 여백 제거하는 속성 */
  box-sizing: border-box; /* width와 height 계산에 padding과 border를 포함하도록 설정 */
}

body {
  background-color: white;
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center; /* 세로 정렬 */
  height: 100vh;
}

.calculator {
  width: 287px; 
  border-radius: 5px; /* 꼭짓점 둥글기 정도: 5px */
  background-color: #f0f3fa;
  padding: 20px 10px; /* 상하 20px, 좌우 10px 내부 여백 */
  box-shadow: 0px 5px 10px rgb(6, 15, 65, 0.4);
  /* x축: 0px, y축: 5px, 퍼짐: 10px, 색상: rgb(6, 15, 65), 투명도: 0.4 그림자 적용 */
}

.calculator form {
  display: grid; /* grid 선언 */
  grid-template-columns: repeat(4,1fr); /* 4열 균등 분배 */
  height: 350px; /* 버튼 높이 55px */ /**/
  gap: 10px; /* 버튼 간격 10px */
}

.calculator form input {
  cursor: pointer; /* 마우스 커서 포인터로 변경 */
  font-size: 19px; /* 버튼 내부 텍스트 크기 19px */ 
  border-radius: 8px; /* 꼭짓점 둥글기 정도: 10px */ /**/
  border: none; /* 외곽선 없음 */
  background-color: #d5deef;
  box-shadow: 3px 3px 6px rgb(0, 0, 0, 0.15);
  /* x축: 3px, y축: 3px, 퍼짐: 6px, 색상: rgb(0, 0, 0), 투명도: 0.15 그림자 적용 */
  transition: all 0.1s ease-in-out; /* 모든 속성 변화를 0.1초에 걸쳐 전환(천천-빠름-천천) */
  outline: none; /* 포커스 시 나타나는 기본 외곽선 제거 */
}

/* 마우스를 올렸을 때 버튼 강조 효과 */
.calculator form :{
  box-shadow: 1px 1px 2px #696969; /* x축: 1px, y축: 1px, 퍼짐: 2px, 색상: #696969 그림자 적용 */
}

/* 버튼 색상 및 크기 설정 */
.calculator form .clear {
  color: #ed4848;
  grid-column: span 3; /* `C` 버튼이 현재 위치에서 3개의 열을 차지하도록 설정 */
}

.calculator form .operator {
  background-color: #395886;
  color: white;
}

.calculator form .dot {
  background-color: #628ecb;
  color: white;
}

.calculator form input[type="text"] {
  grid-column: span 4; /* 입력창이 4개의 열 전체를 차지하도록 설정 */
  text-align: left; /* 입력된 값이 어느 방향으로 정렬될지 설정 */
  padding: 0px; /* 입력창 내부 여백 10px 설정 */ /**/
  font-size: 20px; /* 텍스트 크기 20px */
  border-radius: 6px; /* 꼭짓점 둥글기 정도: 6px */
  border: 1px solid #bbb; /* 외곽선: 1px, 실선, #bbb 색상 */
  background-color: #f9f9f9;
}

.calculator form .result {
  grid-column: span 2; /* `=` 버튼이 현재 위치에서 2개의 열을 차지하도록 설정*/
}