CSS calc() Function

description : CSS calc() Function
author : 오션
email : shlim@repia.com
lastupdate : 2021-04-07

Ref

예제

calc()를 사용하여 <div> 요소의 너비를 계산합니다.

<!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>

Definition and Usage

calc() 함수는 속성 값으로 사용할 계산을 수행합니다.

CSS Syntax

calc(expression)

expression	필수이며, 수학적 표현식입니다. 결과는 값으로 사용되며, 연산자 ( + - * / )를 사용할 수 있습니다.
Value	Description

오션,, CSS, calc(), Function,

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

목차

CSS calc() Function

Ref

예제

Definition and Usage

CSS Syntax

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

사용자 도구

사이트 도구

목차

CSS calc() Function

Ref

예제

Definition and Usage

CSS Syntax

문서 도구