Develop/CSS

CSS - calc()

codeGray 2022. 9. 22. 17:06
반응형

calc 함수는 css에서 단순 사칙연산을 하여 속성에 값을 줄 때 사용된다.

 

오늘 공부한 내용에서는 화면에서 불필요한 공백을 제거 할 때 사용한다고 배웠다.

 

예를들면 텍스트 박스와 전송버튼이 있고  텍스트 박스는 전체 화면의 80퍼센트, 텍스트 박스는 100px이라고 했을 때

 

20%의 100px을 뺀 나머지 불필요한 여백이 생기게 된다. ( 화면을 늘렸을 때 )

 

이 불필요한 여백을 제거하려면  100% - 100px 을 텍스트박스 크기로 주면 된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .message{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100px;
            padding: 0.5em;
            border: 1px solid black;
            font-size: 1.5em;
        }
        .message_text{
            width: calc(100% - 100px);
            height: 100%;
            border: none;
            resize: none;
        }
        .message_text:focus{outline: none;}
        .message_send{
            width: 100px;
            height: 100%;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="message">
        <textarea class="message_text"></textarea>
        <button class="message_send">전송</button>
    </div>
</body>
</html>

 

calc() 부분을 80% 일때와 100% -100px 일 때 비교를 해보면 이해하기 쉽다.

 

 

반응형