CSS border 속성 예제 / box-sizing – HTML/CSS 따라하기 5

by

CSS border 속성 예제

CSS 박스모델에서 border 속성의 예제 코드들 입니다.

border 형태

solid double dashed dotted 가 있습니다. 적당한 녀석을 골라서 사용하면 됩니다.

    <style>
        .container{
            background: beige;
            width: 100%;
            height: 90vh;
        }

        .box-green{
            background: greenyellow;
            width: 120px;
            height: 120px;
            margin: 10px;
            padding: 10px;
            border: 10px solid blue;
        }
        .item-1{
            border: 5px solid blueviolet;
        }
        .item-2{
            border: 5px double blueviolet;
        }
        .item-3{
            border: 5px dashed blueviolet;
        }
        .item-4{
            border: 5px dotted blueviolet;
        }
        
    </style>
    <div class="container">
        <div class="box-green item-1">box-1</div>
        <div class="box-green item-2">box-2</div>
        <div class="box-green item-3">box-3</div>
        <div class="box-green item-4">box-4</div>
    </div>

HTML에서 사용하면 아래와 같이 나옵니다.

box-1
box-2
box-3
box-4

border-radius

border-radius 는 모서리를 뭉툭하게 하는 속성입니다. 50%의 값을 주면 사각형을 원으로 만들 수도 있습니다.

border 에는 left 나 right에 대한 개별 설정이 가능하므로 일부만 보더를 사용하는 것도 가능합니다.

    <style>
        .container{
            background: beige;
            width: 100%;
            height: 100vh;
        }

        .box-green{
            background: greenyellow;
            width: 120px;
            height: 120px;
            margin: 10px;
            padding: 10px;

        }
        .item-5{
            border: 5px double blue;
            border-radius: 15px;
        }
        .item-6{
            border: 1px solid purple;
            border-radius: 50%;
        }
        .item-7{
            border: 1px solid black;
            border-radius: 20px 50px;
        }
        .item-8{
            border-left: 5px double blueviolet;
            border-right: 5px dashed blueviolet;
        }
    </style>
    <div class="container">
        <div class="box-green item-5">box-5</div>
        <div class="box-green item-6">box-6</div>
        <div class="box-green item-7">box-7</div>
        <div class="box-green item-8">box-8</div>
    </div>
box-5
box-6
box-7
box-8

box-sizing

box-sizing은 박스 크기를 측정하는 기준입니다. default 값인 content-box 를 사용했었죠. 이것은 width와 height를 기준으로 더하는 방식입니다. border-box는 border 안에 있는 크기를 width와 height로 설정합니다. 패딩이 포함되어 있기 때문에 이 방식이 가장 적절하다는 의견도 많습니다. 어느쪽을 선택하건 하나의 통일된 기준점을 가지고 만들면 됩니다.

<body>
    <style>

        .item-1{
            box-sizing: content-box;

            border: 10px double black;
            background: beige;
            margin-top: 1px;
            padding: 5px;
            width: 300px;
            height: 100px;
        }
        .item-2{
            box-sizing: border-box;
            
            border: 10px double purple;
            background: beige;
            margin-top: 1px;
            padding: 5px;
            width: 300px;
            height: 100px;
        }

    </style>
        <div class="box-green item-1">box-1</div>
        <div class="box-green item-2">box-2</div>
</body>
box-1
box-2

이외에도 여러가지 스타일이 있습니다. 자세한 내용은 MDN 문서를 참조하도록 합니다.

홈으로

외부문서

border – CSS: Cascading Style Sheets | MDN (mozilla.org)

box-sizing: border-box explained – YouTube

Leave a Comment