단위, 배경, 박스모델

🏹 단위 속성

• 절대 길이 : 다른 요소의 크기에 의해 영향을 받지 않는 고정된 크기 단위

단위	설명
px	여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있음 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장
pt	웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용 사용하는 기기의 해상도에 따라 차이가 있어 권장하지 않음

• 상대 길이 : 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라
                 상대적으로 값이 변하는 크기 단위

단위	설명
%	부모의 값에 대해서 백분율로 환산한 크기
em	font-size를 기준으로 값을 환산, 소수점 3자리까지 표현 가능
rem	root의 font-size를 기준으로 값을 환산
vw	viewport의 width 값을 기준으로 1%의 값으로 계산

---

🏹 background 속성

속성명	설명
background-image	배경으로 사용할 이미지의 경로를 지정 절대 경로, 상대 경로 모두 가능
background-repeat	이미지의 반복 여부와 방향을 지정
background-position	요소에서 배경 이미지의 위치를 지정

* background-repeat 속성 값

• repeat : x축, y축 방향으로 반복 (기본 값)
• repeat-x : x축 방향으로만 반복
• repeat-y : y축 방향으로만 반복
• no-repeat : 반복하지 않음
  

* background-position 속성 값

%, px, top, bottom, left, right, center

---

🏹 border 속성 기본 값

속성명	기본 값
border-width	medium
border-style	none
border-color	currentColor

---

🏹 margin과 padding의 비교

두 속성 모두 여백을 지정하는 속성이기 때문에 border의 경계가 명확하지 않을 때 어떤 속성으로 여백을 표현할지 헷갈릴 수 있다. 이때 자신이 원하는 속성을 이용해도 상관은 없지만, 엄연히 다른 속성이므로 두 속성의 차이를 명확히 알고 적절한 속성을 사용할 수 있어야 한다.

	양수	음수	auto
margin	O	O	O
padding	O	X	X

  ⭐ -top, -bottom 속성도 width 값을 기준으로 값이 결정된다!