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)) 등의 계산식이 사용된 사이트인데 이걸 쓰면 모바일에서 반응형을 잡지 않아도 된다고 하는데 어떤 식으로 이런 계산식을 만드는지 아시는 분 계실까요?
답변 3
https://developer.mozilla.org/ko/docs/Web/CSS/calc 해당 css에 대해서 읽어보시면 될 거 같습니다.
calc 부분이 퍼센트로 계산이 되게 작업을 하신다면 반응형으로 되실겁니다.
em 의 경우 부모속성을 승계하기 때문에
해당 CSS 만으로는 반응형과 상관없습니다.
calc(114/200*1em) 일 경우
상위 오브젝트에서 승계된 폰트 사이즈가 16px 일 경우 1em = 16px 이 됩니다.
114 / 200 * 1em(16px) 이렇게 계산되겠죠.
CSS의 calc()는 단순한 연산 도구이며, 반응형을 자동으로 만들어 주는 요소는 아닙니다.
반응형을 원한다면 em과 함께 vw, %, rem 등의 단위를 조합하여
부모 요소의 font-size가 화면 크기에 따라 조정되도록 설정해야 합니다.
님께서 본 사이트에서 반응형이 된다고 언급한 이유는,
부모 요소의 font-size가 vw 또는 % 단위로 설정되어 있어,
em 단위도 함께 변하기 때문일 가능성이 큽니다.
＊적절한 반응형 접근법 (예시)
html {
font-size: 2vw; /* 뷰포트 너비의 2%를 기준으로 설정 */
}
.about .s1 .cont .title dt h1::after {
width: calc(114/200 * 1em); /* 부모 폰트 크기에 비례 */
height: calc(114/200 * 1em);
right: calc(-1 * (30/200 * 1em));
top: calc(-1 * (10/200 * 1em));
}
- 이렇게 하면 em 단위가 vw에 따라 조정되므로,
요소 크기가 뷰포트 크기에 맞춰 자동으로 반응형 조정됩니다.