Note) css 속성마다 값 나열 순서가 다른 이유

* {
	// padding 상하 10px + 좌우 20px
	padding: 10px 20px;
    // background position 좌우 30px + 상하 40px
    background-position: 30px 40px;
}

이 두 값이 정반대라는 것이 직관적이지 않은 것처럼 보이지만 그 이유는 간단함.
padding 의 두 값은 "요소의 주변값"을 시계방향으로 나열한 것의 축약임.
반면, background-position 의 두 값은 Cartesian grid를 의미함.

CSS 설계 방식을 아래처럼 이해해봅시다~

가로/세로 모서리 두 개의 측정값을 지정하는 속성으로 작업하는 경우 "XY축 좌표계"를 생각하면 됩니다.
요소 주위의 각 변에 대한 측정값을 지정하는 속성으로 작업하는 경우 "시계"를 생각하면 됩니다.