11. border _ 선 요소

border는 선, 테두리에 관련된 요소를 지정해줍니다.

전체에 적용하거나 한 방향에, 혹은 박스에 둥글기도 줄 수 있습니다.
기본 표기법부터 보겠습니다.
표기 순서는 선 굵기 / 선 타입 / 선 색깔 순으로 적어줍니다.

<div class="box border1">전체</div>
<div class="box border2">위</div>
<div class="box border3">오른쪽</div>
<div class="box border4">아래</div>
<div class="box border5">왼쪽</div>
 

CSS

<style>
   div.box {width:50px; height:50px;text-align:center;line-height:50px; display:inline-block; margin:5px; background:pink;}
   div.border1 {border:2px solid #ff0000;}
   div.border2 {border-top:2px solid #ff0000;}
   div.border3 {border-right:2px solid #ff0000;}
   div.border4 {border-bottom:2px solid #ff0000;}
   div.border5 {border-left:2px solid #ff0000;}
</style>
 

전체

위

오른쪽

아래

왼쪽

line type

선 타입으로는 자주 쓰이는 것은 solid와 none, dotted 값이 있구요,
그 외에도 여러 타입들이 있는데 사실 저 세가지 이외엔 한번도 써본적이 없네요.
하지만 세상일은 모르는 것이니 하나씩 다 쳐보고 확인해 봅시다.
dotted / dashed / solid / double / groove / ridge / inset / outset / none
참고로 각 타입을 mix해서 각 선마다 다르게 쓸 수도 있어요. 제일 밑에서 확인합시다. 쓸일은 없지만요...

<p class="dotted">dotted</p><br>
<p class="dashed">dashed</p><br>
<p class="solid">solid</p><br>
<p class="double">double</p><br>
<p class="groove">groove</p><br>
<p class="ridge">ridge</p><br>
<p class="inset">inset</p><br>
<p class="outset">outset</p><br>
<p class="none">none</p><br>
<p class="mix">mix</p><br>
 

CSS

<style>
   p.dotted {border-style: dotted;}
   p.dashed {border-style: dashed;}
   p.solid {border-style: solid;}
   p.double {border-style: double;}
   p.groove {border-style: groove;}
   p.ridge {border-style: ridge;}
   p.inset {border-style: inset;}
   p.outset {border-style: outset;}
   p.none {border-style: none;}
   p.mix {border-style: dotted dashed solid double;}
</style>
 

dotted

dashed

solid

double

groove

ridge

inset

outset

none

mix

border-radius

모서리에 둥글기를 주는건 선을 깍아주는 것이므로 border에서 해결합니다.
네 모서리를 같은 각도로 깍을때는 border-radius에 하나의 값을 적어줍니다.
각각의 값을 줄때는 다른 요소들과 마찬가지로 위 / 오른쪽 / 아래 / 왼쪽 순서로 적어줍니다.
둥글기를 높이, 너비의 반값을 주거나 50% 라고 적어주면 이 물체는 원이 됩니다.
밑에서 확인해 봅시다.

<p class="radius equ">균등하게</p><br>
<p class="radius noequ">제멋대로</p><br>
<p class="radius circle">원을 만들자</p><br>
 

CSS

<style>
  p.radius {width:100px;height:100px;text-align:center;line-height:100px;background:springgreen;margin:10px;}
  p.equ {border-radius:20px;}
  p.noequ {border-radius:20px 5px 50px 10px;}
  p.circle {border-radius:50px;}
</style>
 

균등하게

제멋대로

원을 만들자

* 개인적인 공부를 정리하는 블로그입니다.