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