border

border

• 박스 요소의 테두리를 설정하는 값
• border : 두께 | 스타일 | 색상(ex. border : 1.2em dashed #ccc)
• 두께 : 모든 크기 값 적용 가능
• 스타일 https://developer.mozilla.org/ko/docs/Web/CSS/border-style
• 색상 : 모든 색상 값 적용 가능

box-sizing

• box 요소의 크기를 정하는 기준점을 정하는 값
• content-box(기본 값)
  컨텐츠가 들어가는 박스의 크기를 기준으로 설정
  padding, border 의 두께는 예외
• border-box
  박스 전체 사이즈를 기준으로 설정
  padding, border 의 두께를 합친 값이 box 크기 값!
  box-sizing: border-box;

border-radius

• box 요소의 테두리를 둥글게!
• border-radius : 크기(전체에 적용)
• border-radius : 좌상-우하 | 우상-좌하
• border-radius : 좌상 | 우상 | 우하 | 좌하
• border-radius : 50%; 를 하면 원형으로 만들 수 있음! (특정값을 일정이상 넣어도 원이 나온다.)

특정 방향에만 border 주는 법

• border-top/bottom/left/right 로 가능!
• 사용 문법은 동일! (Ex. border-bottom : 2px solid #ccc;)

실습4

• ul, li 를 사용해서 5개의 항목이 있는 리스트를 만들고, 각각 항목 사이에 border 가 생기도록 만들어 보세요!
• 조건! 선택자를 사용해서 처리!