개발나라 스용공주

[HTML/CSS] css함수 - calc 퀄크 본문

WEB/HTML & CSS

[HTML/CSS] css함수 - calc 퀄크

스용공주 2024. 11. 1. 06:35
728x90
728x90

이번 글은 calc에 대한 사용 설명 글이다.

 

[ calc 빼기 ]

아래 예제와 같이 calc 적용 전 상자가 빨간 선을 넘어가는 것을 확인할 수 있다.

기준이 되고 있는 빨간 border에서 상자의 크기만큼 빼준 뒤 실행해주면 빨간 border의 영역을 넘지 않는 것을 확인할 수 있다.

calc 적용 전

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="loading">
        <span></span>
        <span></span>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading {
    border : 1px solid red;
    width: 30px;
    height : 30px;
    position : relative;
}

.loading span {
    position: absolute;
    display: inline-block;
    width : 10px;
    height : 10px;
    background-color: gray;
    top : 0;
    left : 0;
    animation: loading 1.5s infinite;
}
.loading span:nth-child(1) {
}
.loading span:nth-child(2) {
    animation-delay: 0.8s;
}

@keyframes loading{
    0% {
        top : 0;
        left : 0;
        background-color: red;
    }
    25% {
        top : 0;
        left : calc(100% - 10px);
        background-color: orange;
    }
    50% {
        top : calc(100% - 10px);
        left : calc(100% - 10px);
        background-color: yellow;
    }
    75% {
        top : calc(100% - 10px);
        left : 0;
        background-color: green;
    }
    100% {
        top : 0;
        left : 0;
        background-color: red;
    }
}

 

[ calc 나누기 ]

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

.left {
    width: calc(100% / 3);
    height: 100px;
    border : 1px solid black;
    float: left;
    box-sizing: border-box;
}
.middle {
    width: calc(100% / 3);
    height: 100px;
    border : 1px solid black;
    float: left;
    box-sizing: border-box;
}
.right {
    width: calc(100% / 3);
    height: 100px;
    border : 1px solid black;
    float: left;
    box-sizing: border-box;
}

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] transform 올바른 작성법  (0) 2024.11.01
[HTML/CSS] 로딩 버튼 만들기 실습  (0) 2024.11.01
[HTML/CSS] position 특징  (0) 2024.11.01
[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate  (0) 2024.11.01
[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type()  (0) 2024.10.26
'WEB/HTML & CSS' Related Articles more
Comments