문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS calc() Function ======
<WRAP left notice 80%>
  * description : CSS calc() Function
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-07
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/cssref/func_calc.asp|CSS calc() Function]]\\

====예제====
%%calc()%%를 사용하여 %%<div>%% 요소의 너비를 계산합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<head>
    <style>
        #div1 {
            position: absolute;
            left: 50px;
            width: calc(100% - 100px);
            border: 1px solid #000;
            background-color: yellow;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>The calc() Function</h1>
    <p>Create a div that stretches across the window, with a 50px gap between both sides od the div and the edges of the window:</p>
    <div id="div1">Some Text...</div>
</body>
</html>
</code>

=====Definition and Usage=====
%%calc()%% 함수는 속성 값으로 사용할 계산을 수행합니다.\\

=====CSS Syntax=====
<code javascript>
calc(expression)
</code>
\\
| Value       | Description                                                                                |
^ expression  ^ 필수이며, 수학적 표현식입니다. 결과는 값으로 사용되며, 연산자 ( + - * / )를 사용할 수 있습니다.  ^
\\
\\






 
{{tag>오션, CSS calc() Function,}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구