CSS calc() 계산식 질문드려요
본문
개인적으로 CSS를 공부하는데 특이한 계산식을 봐서 어떻게 계산하는지 알고싶어 질문드립니다.
https://jdnconnects.co.kr/kor/about/
^ 제가 본 사이트입니다
.about .s1 .cont .title dt h1::after {content: ''; width: calc(114/200*1em); height: calc(114/200*1em); border-radius: 50%; background: #0091e4; mix-blend-mode: difference; position: absolute; right: calc(-1 * (30/200*1em)); top: calc(-1 * (10/200*1em)); }
calc(114/200*1em); 나 calc(-1 * (30/200*1em)) 등의 계산식이 사용된 사이트인데 이걸 쓰면 모바일에서 반응형을 잡지 않아도 된다고 하는데 어떤 식으로 이런 계산식을 만드는지 아시는 분 계실까요?
답변 2
https://developer.mozilla.org/ko/docs/Web/CSS/calc 해당 css에 대해서 읽어보시면 될 거 같습니다.
calc 부분이 퍼센트로 계산이 되게 작업을 하신다면 반응형으로 되실겁니다.
em 의 경우 부모속성을 승계하기 때문에
해당 CSS 만으로는 반응형과 상관없습니다.
calc(114/200*1em) 일 경우
상위 오브젝트에서 승계된 폰트 사이즈가 16px 일 경우 1em = 16px 이 됩니다.
114 / 200 * 1em(16px) 이렇게 계산되겠죠.
답변을 작성하시기 전에 로그인 해주세요.
