CSS의 테두리와 배경 속성의 지정 방법을 알아봅니다.

---

🖍️ 테두리 border

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

• 선의 굵기만큼 요소의 크기가 커짐

• border: width / style / color ; 순서로 단축지정하거나, 개별속성 지정 가능
  기본값: medium / none(선 없음) / black;

1. border-width
px, em, %등 단위로 지정 (방향 단축속성)
   (thin, medium, thick 은 애매해 사용하지 않음)

2. border-style (방향 단축속성)
   none : 선 없음
   solid : 실선
   dashed : 파선 / 절취선(---)
   dotted : 점선
   double : 두줄
   groove : 홈이 파여 있는 모양
   ridge : 솟은모양 (groove의 반대)
   inset, outset

3. border-color (방향 단축속성)
   transparent : 투명
   그 외 색상 명시

4. border-radius (방향 단축속성)
   요소의 모서리를 둥글게 깎음
   0 : 둥글게 없음 (기본값)
   단위: px, em, vw등 단위로 지정

border-top :  width / style / color; 형태로도 사용 가능
border-top-width : 10px ; 형태로도 사용 가능

---

🖍️ 배경 background

1. background-color : 요소의 배경색상
   기본값: transparent (투명함)
   background-image보다 뒤에 배치됨

2. background-image : 요소의 배경이미지 삽입
   기본값 : none (없음)
   : url("경로") 형태로 작성

3. backgorund-repeat : 요소의 배경이미지 반복
   기본값 : repeat (이미지를 바둑판식으로 반복)
   repeat-x : 이미지를 수평 반복
   repeat-y : 이미지를 수직 반복
   no-repeat : 반복 없음

4. background-position : 요소의 배경 이미지 위치
   기본값 : 0% 0%
   브라우저는 y축을 위에서 아래로 그린다. ㄴ형태가 아니라 ┌형태로 그려짐.
   x=0, y=0이면 왼쪽 상단에 이미지가 위치하게 됨.

   • 방향으로 입력(1, 2) : top bottom left right center (ex: top right - 우상단)
   • 단위로 입력(x축, y축) : px, em, rem 등

5. background-size : 요소의 배경 이미지 크기(x,y) 또는 (x만 입력)
   기본값 : 이미지의 실제 크기
   단위 : px, em, rem 등 단위로 지정

   • cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
     박스가 300x200인데, 이미지는 300x300이라면
     박스요소의 300에 맞춰 늘어난 상태로 출력되기 때문에
     200에서 초과되는 이미지의 아래부분이 잘려나감
     
   • contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤
     더 짧은 너비인 200에 맞춰 출력되기 때문에
     이미지는 박스 안에 모두 포함되고, 대신 가로로 여백이 생기게 된다.

6. background-attachment : 요소의 배경 이미지 스크롤 특성

   • scroll: 이미지가 요소를 따라서 같이 스크롤 (기본값)
     화면이 올라가면 요소도 딸려올려감
   • fixed : 이미지가 뷰포트(의 사이즈에 맞게)에 고정, 스크롤 X
     요소가 올라가도 배경이미지는 고정
     화면 크기를 늘리면 배경 이미지도 늘어난다.