border (테두리 선)

border

-border : 요소의 테두리 선을 지정하는   단축 속성 

• border: border-width(선의 두께), border-style(선의 종류), border-color(선의 색상) 기본값 black

   -  선의 두께, 종류, 색상을 입력해야지만 테두리 선이 나타난다.

   -  순서는 따로 지정 되어있지 않지만 가독성을 위해 두께 종류 색상 순으로 하자 (컨벤션)

   -  두께와 종류 입력시 색상을 따로 지정하지 않아도 색상은 기본 값이 검정색 설정되어 있다

• 요소의 크기가 커진다.   

- 요소의 테두리 선을 지정하는 기타 속성들 

      - border-방향 

• border-top
• border-bottom
• border-left
• border-right

      - border-방향-속성 : 

• border-top-width(style/color)
• border-bottom-width(style/color)
• border-left-width(style/color)
• border-right-width(style/color)

색상 표현 

- 색상표현 : 색을 사용하는 모든 속성에 적용 가능한 색상 표현 

 

• 색상 이름 : 브라우저에서 제공하는 색상 이름    ex) red tomato, royalblue
• Hex 색상코드 : 16진수 색상                              ex)  #000, #FFFFF
• RGB :  빛의 삼원색                                            ex) rgb(255, 255, 255) => 함수 방식
• RGBH : 빛의 삼원색 투명도                               ex) rgb(0, 0, 0, 0.5)

- 웹사이트 만들때는 가급적 Hex 색상코드를 이용하자

 

코드펜 예제

See the Pen border by 김선미 (@tjsalsun) on CodePen.

---

TIL

key point 

border 사용시 요소의 크기가 커진다 

웹사이트 만들시 Hex 색상 코드 이용하기 
 
느낀점

 

box-sizing과 관계성 알아보기 

오늘의 학습 만족도 
⭐⭐⭐⭐⭐