📦 CSS/CSS Framework

[CSS Framework] Utilities

하나둘세현 2022. 12. 30. 19:41
728x90

Border

테두리를 넣고 빼거나 모깎기를 하거나 디스플레이 속성을 변경하거나 여백을 추가할 때 편리하다. 이러한 유틸리티들은 요소에 클래스만 추가해 사용할 수 있다. 사방에 테두리를 만들려면 그냥 border을 추가하면 된다. border-top은 위쪽 border-bottom은 아래쪽 등 부트스트랩에서 테두리의 굵기를 조절할 수 없음으로 실제로 지정해야한다. 디폴트는 1px 또는 2px이다. 삭제 옵션을 통해 테두리의 일부, 위, 오르쪽 테두리를 없앨 수 있다. border-0-을 넣으면 모든 테두리를 없앨 수 있다. 테두리 색상또한 변경할 수 있다.(border-primary 등) 테두리 모깍기도 가능하다. 원을 만들때 유용하다. (사각형을 깎아서 원을 만든다.)  

 

<!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>Bootsrap Utilities</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="utilities.css">
</head>
<body>
    <div class="container">
        <h1 class="display-1">Utilities</h1>
        <div class="row">
            <div class="col-md-4 border rounded border-primary">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Eos optio iusto quam. Tenetur ipsum omnis saepe repudiandae
                  officiis veritatis voluptates consectetur dolorem, 
                  exercitationem soluta voluptas sit error, hic dolores asperiores.
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

</body>
</html>

border을 이용하여 테두리를 만들었다. rounded를 입력하여 테두리를 둥글게했다. border-primary를 사용하여 테두리의 색상을 변경했다.

https://getbootstrap.com/docs/5.3/utilities/borders/

 

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

getbootstrap.com

Shadow

음영을 추가할 수 있다.

 

    <div class="container">
        <h1 class="display-1">Utilities</h1>
        <div class="row">
            <div class="col-md-4 border rounded border-primary shadow">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Eos optio iusto quam. Tenetur ipsum omnis saepe repudiandae
                  officiis veritatis voluptates consectetur dolorem, 
                  exercitationem soluta voluptas sit error, hic dolores asperiores.
            </div>
        </div>
    </div>

shadow를 이용해 음영을 추가했다. 

https://getbootstrap.com/docs/5.2/utilities/shadows/

 

Shadows

Add or remove shadows to elements with box-shadow utilities.

getbootstrap.com

 

Spacing

여백과 패딩을 이용해 공간을 배치하는 것이다. 

두개의 특징 

m 여백

p 패딩

-

side 변

-

t 위

b 아래

l 왼쪽

r 오른쪽

x 왼쪽, 오른쪽 한번에 적용

y는 위아래 한번에 적용

blank는 비워두면 사방에 적용

 

위, 아래, 왼쪽, 오른쪽 어디에 여백을 추가할 지 옵션에서 선택하면 된다. 

 

여백과 패딩의 양을 지정할 수 있다. 옵션은 6가지이다. (auto까지 포함하면 7가지)

0에서 5까지 - 6가지 

0은 공간이 없다는 뜻, 5가 가장 큰 공간

모든 사이즈는 미리 정해진 단위인 $spacer의 배수로 구성된다. (만일 $spacer이 20px라고 가정하면 1은 20px 곱하기 0.25이다.) $spacer 설정도 바꿀 수 있다. 

 

<!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>Bootsrap Utilities</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="utilities.css">
</head>
<body>
    <div class="container">
        <h1 class="display-1">Utilities</h1>
        <div class="row">
            <div class="col-md-4 border rounded border-primary shadow">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Eos optio iusto quam. Tenetur ipsum omnis saepe repudiandae
                  officiis veritatis voluptates consectetur dolorem, 
                  exercitationem soluta voluptas sit error, hic dolores asperiores.
            </div>
        </div>
        <div>
            <div class="btn btn-primary p-0">Padding 0</div>
            <div class="btn btn-primary p-1">Padding 1</div>
            <div class="btn btn-primary p-2">Padding 2</div>
            <div class="btn btn-primary p-3">Padding 3</div>
            <div class="btn btn-primary p-4">Padding 4</div>
            <div class="btn btn-primary p-5">Padding 5</div>
        </div>
        <div>
            <button class="btn btn-primary p-0 pt-5">Padding Top</button>
            <button class="btn btn-primary p-0 pl-5">Padding Left</button>
            <button class="btn btn-primary p-0 pb-5">Padding Bottom</button>
            <button class="btn btn-primary p-0 pr-5">Padding Right</button>
            <button class="btn btn-primary p-0 px-5">Padding X</button>
            <button class="btn btn-primary p-0 py-5">Padding Y</button>
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

</body>
</html>

첫번째 p-o은 사방의 패딩을 없애라는 뜻이다.

p뒤에 적혀있는 숫자가 더 커질 수록 패딩은 점점 커진다. 

pt,l,b,x,y는 패딩의 변화를 알 수 있다. 복잡하게 하려면 패딩이 변화하는 중단점을 지정하면 된다. 패딩 등의 특성 상단 등의 변을 지정한 뒤 달라지는 중단점을 명시하고 크기를 지정하면 된다.

<button class="btn btn-danger" p-0>I change!</button>

 

모든 변이 패딩 없음(p-0)이 되도록 한다. 

 <button class="btn btn-danger p-0 p-sm-1 p-md-2 p-lg-3 p-xl-5">I change!</button>

패딩이 s 이상 m 미만이면 1단계, 패딩이 m 이상 l 미만이면 2단계, 패딩이 l 이상 xl 미만이면 3단계 그리고 패딩이 xl이면 5단계이다. 왼쪽 사진은 꽉 찬 창이라서 커진것이다. 창의 크기에 따라 패딩의 크기가 달라진다.  

      <div class="my-5">
            <button class="btn btn-primary p-0 pt-5">Padding Top</button>
            <button class="btn btn-primary p-0 pl-5">Padding Left</button>
            <button class="btn btn-primary p-0 pb-5">Padding Bottom</button>
            <button class="btn btn-primary p-0 pr-5">Padding Right</button>
            <button class="btn btn-primary p-0 px-5">Padding X</button>
            <button class="btn btn-primary p-0 py-5">Padding Y</button>
        </div>

하단의 여백(my-5)을 추가하기 위해 y를 선택해 공간을 추가할 수 있다. 

https://getbootstrap.com/docs/5.2/utilities/spacing/

 

728x90

'📦 CSS > CSS Framework' 카테고리의 다른 글

[CSS Framework] Bootstrap | Cards | Carousel | Dropdowns | Spinners | Modal  (1) 2022.12.30
[CSS Framework] Bootstrap | Icons  (0) 2022.12.27
[CSS Framework] Bootstrap | Navbar  (0) 2022.12.27
[CSS Framework] bootstrap | Forms | form-group | form-class  (0) 2022.12.26
[CSS Framework] Grid Utilities  (0) 2022.12.23

'📦 CSS/CSS Framework'의 다른글

  • 현재글[CSS Framework] Utilities

관련글

티스토리툴바