[CSS] Box Model - Borders

 

안녕하세요 냥장판 입니다 

지난 게시글에서는 Padding에 대해 알아봤는데요.

2020/01/31 - [놀고있네/HTML & CSS] - [CSS] Box Model - Padding

 

이번 게시글에서는 Box model 에서 Border에 대해 알아볼거에요

 

By 냥장판

 

보더(Border)는 컨텐츠와 패딩(Padding)을 둘러싸는 테두리에요.

 

1. 보더 속성

By 냥장판

 

보더의 속성은 아래와 같아요.

padding과 마찬가지로 단돌그오 쓰일 수도 있고, top, bottom, right, left 값을 별도로 지정할 수 있어요.

 

• border
  
• border-bottom
  
• border-bottom-color
  
• border-bottom-left-radius
  
• border-bottom-right-radius
  
• border-bottom-style
  
• border-bottom-width
  
• border-left
  
• border-left-color
  
• border-left-style
  
• border-left-width
  
• border-right
  
• border-right-color
  
• border-right-style
  
• border-right-width
  
• border-top
  
• border-top-color
  
• border-top-left-radius
  
• border-top-right-radius
  
• border-top-style
  
• border-top-width
  

 

이 외에도 경계값에 대한 다양한 속성을 사용할 수 있어요.

 

• border-width
• border-color 
• border-image 
  
• border-image-outset 
  
• border-image-repeat 
  
• border-image-slice 
  
• border-image-source 
  
• border-image-width 
• border-radius 
• border-style 

자주 사용하는 속성을 볼드처리했어요.

 

2. Border 속성 사용법

 

Border 속성 사용은 아래와 같아요.

한번 적용해보면, 

엄청 간단하죠.

 

3. 한쪽 테두리(top, bottom, right, left)

 

border_top, bottom, rigth, left 도 마찬가지로 적용할 수 있어요.

 

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

 

4. 테두리 곡선(radius)

 

테두리에 곡선처리도 가능합니다.

border_radius 속성을 사용하면 되요.

 

 

 

테두리도 각 면(top, bottom, right, left) 마다 적용 가능해요.

 

5. 테두리 스타일(border inline style)

 

테두리마다 스타일을 지정할 수 있어요.

inline 요소에 지정할 수 있는 스타일 종류는 아래와 같아요.

 

• none : 테두리 없음
• hidden : 테두리 숨김
• dotted : 점선 스타일
• dashed : 대쉬(약간 긴 점선) 스타일
• solid : 실선 스타일
• double : 이중 실선 스타일
• groove : 3차원 입체적인 선
• ridge : 3차원 능선효과가 있는 선
• inset : 3차원 내지로 끼운 선
• outset : 3차원 외지로 끼운 선

 

적용해보면 아래와 같아요.

 

그럼 이만!