CSS Border
- 입력한 요소의 주변에 박스를 생성해주는 속성이다.
Border 기본표기
Border : 선굵기, 선스타일, 색상
#. 예제
<style>
.border{
border:1px solid black;
}
</style>
<div class="border">Hello World!</div>
📍출력물
Hello World!
⭐️위 출력물과 같이 예제입력문이 출력된 것을 볼 수 있다.
보더가 1px 굵기로 solid 는 선의 스타일이며 black 컬러로 출력된 것이다.
#. 선 스타일의 종류
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
<style>
.border1{
border:1px none black;
}
.border2{
border:1px hidden black;
}
.border3{
border:1px dotted black;
}
.border4{
border:1px dashed black;
}
.border5{
border:1px solid black;
}
.border6{
border:5px double black;
}
.border7{
border:5px groove black;
}
.border8{
border:5px ridge black;
}
.border9{
border:5px inset black;
}
.border10{
border:5px outset black;
}
</style>
<div class="border1">Hello World!</div>
<div class="border2">Hello World!</div>
<div class="border3">Hello World!</div>
<div class="border4">Hello World!</div>
<div class="border5">Hello World!</div>
<div class="border6">Hello World!</div>
<div class="border7">Hello World!</div>
<div class="border8">Hello World!</div>
<div class="border9">Hello World!</div>
<div class="border10">Hello World!</div>
📍출력물
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
