[CSS] calc()

css calc()에 대하여

• calc css 내에서 사칙연산을 가능하게 해준다.
• 실제로 어떤 부분에서 쓸 수 있는지를 바탕으로 학습을 해보고자 한다.
• 이번 포스팅은 위의 동영상을 참고로 작성했다.

1) calc를 이용한 반응형 설계

• 실제로 코드펜 사이트에 들어가보면 괜찮은데.. velog로 축소된 화면으로 보니까 내가 설계한 부분이 전부다 깨졌다..ㅎㅎ px값으로 설정해놓은 부분이 많아서 그런 것 같다.
• calc는 내가 생각했을 때, 반응형에 아주 유용한 도구인 것 같다. 위에서처럼 width를 줄 때 calc(100% - 30px) 이렇게 해놓으면 반드시 오른쪽에 30px만큼의 여백을준다(전체를 기준으로).
• 이 때, 짚고 넘어가야할 것은 calc를 쓸 때 저렇게 사칙연산을 해줄거면 100% 띄고 - 띄고 30px 이 포맷을 꼭 지켜줘야한다는 것이다.
• calc는 변수와 같이 잘 쓸 수 있는데, 위에서처럼 root요소에 font-size라는 변수를 만들어놓고 var(--font-size) 이런식으로 그것을 가져다 쓸 수 있는데, 규격을 변수로 잡아놓고, 그 규격을 가지고 여러 방면으로 calc를 활용하여 쓸 수 있을 것 같다. calc는 이번 포스팅에서 이렇게 개념과 활용법 정도만 얻어가고, 나중에 반응형 등 실제로 구현해볼 때 예시를 가지고 한번더 포스팅을 해봐야겠다.