css-요소 중앙배치, 변수 사용, 사칙연산

- 요소를 중앙에 배치하기

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

  Flex Container(부모요소)인 body에 flex를 적용하고
  가로축, 세로축 모두 중앙값을 적용한다.
  여기서 중요한 것은 body의 height =100vh; 여야 div가 화면 세로축 중앙에 위치하게 된다.

- 변수 사용하기

css작성을 편리하게 하기 위해서 변수를 사용할 수 있다.

1. 변수 정의

변수는 바 2개(--)를 붙여서 이름을 붙인다.
--space: 30px;

1) 선택자 범위 선언
여기서 정의한 space변수는 선택자범위가 .big-box인 클래스의 하위 요소에서만 사용할 수 있다.

.big-box { --space: 30px; }

2) 전역선언
전역 선언 시 어디서든지 값을 참조할 수 있다.
:root { --space: 30px; }

2. 변수 사용

속성 값 위치에 "var()"로 변수명을 감싸서 표시한다.
margin: var(--space);

- 사칙연산

• calc( ) : 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다.
• 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다.

  .mid {
   width: calc(400px - 35*2px);
   height: 100px;
   border: 5px dashed white;
  }