어떤 웹사이트들의 CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 예측할 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다.
calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다. 아래 예제 코드를 보시면 쉽게 이해하실 수 있을 것입니다.
See the Pen CSS calc 함수 사용법 예제 by kyohoonsim (@kyohoonsim) on CodePen.
주의하실 점은 + 또는 -를 해줄 때 +와 - 양 옆에 띄어쓰기를 해줘야합니다. 붙여서 쓰면 작동하지 않습니다.
'Dev > HTML, CSS' 카테고리의 다른 글
| [html] 이메일 주소에 링크 걸 때, mailto: (0) | 2021.04.06 |
|---|---|
| 카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기 (15) | 2021.03.18 |
| [css] 링크 밑줄 없애기 (4) | 2021.03.13 |
| [css] css 선택자에서 꺽쇠 > 의 의미는? 자식 선택자와 하위 선택자 (1) | 2021.02.16 |
| [css] box-shadow로 요소 볼록 튀어나온 효과, 오목 들어간 효과 주기 (2) | 2021.01.14 |
| [css] 스크롤바 예쁘게 꾸미기 (0) | 2021.01.06 |
| [css] 손가락 모양의 커서, cursor:pointer (0) | 2020.12.30 |
| [html] a 태그에서 title 속성의 역할은? (0) | 2020.12.29 |