CSS math function - calc, max, min
전자책을 만들다 보면 애매한 길이를 잡아야 할 때가 있습니다.
폭 100%에서 2em만 빼야 한다던가...
예를 들면 이런거.
이런 스타일 만드는 방법은 여러가지예요.
그런데 저 선을 background-image, linear-gradient 조합으로 만들고
background-size로 맞춘다. 이렇게 생각했을 때 문제가 되는 부분은 선의 길이지요.
예전에는 선 길이를 3000px 정도 줬습니다. 그럼 UHD 모니터도 문제 없었지요.
그런데 지금은 3000px보다 해상도가 좋은 모니터가 나오니 문제가 됩니다.
그렇다고 5000px, 10000px... 무한대로 갈 수도 없고.
이럴 때 calc 속성을 써보세요.
100%-5em
이렇게 하면 화면 폭 100% 길이에서 5em 만큼 빠진 길이로 항상 맞춰줍니다.
이미지 폭 맞출 때,
좀 안다는 분들은
width : ...
max-width : ...
이렇게 할 거예요.
여기서 조금 더 아는 분들은
width : min(...)
이렇게 합니다.
width + max-width, width + min-width 조합을
min, max 속성으로 처리할 수 있어요.
더 자세한 내용을 알고 싶다면
CSS Math Functions
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
CSS value functions - CSS: Cascading Style Sheets | MDN
CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.
developer.mozilla.org