nth-child vs nth-of-type

css에서 자식간의 관계에 대한 스타일을 부여할 경우

nth-child vs nth-of-type
first-child vs first-of-type
last-child vs last-of-type

에 대해서 고민하게 된다.

차이점은

## nth-child(n)
이런 ~-child 류의 문법은 
**부모 엘리먼트의 [모든] 자식 엘리먼트 중 n번째를 뜻한다.**

## nth-of-type(n)
이런 ~-of-type 류의 문법은 
**부모 엘리먼트의 [특정] 자식 엘리먼트 중 n번째를 뜻한다.**


즉, span:nth-child(2)를 하면 모든 자식에서의 2번째 자식이다.
태그가 아무 상관이 없는 것이다.

하지만 span:nth-of-type(2)를 하면 자식들 중에 span인 녀석들 중 2번째이다. 특정 조건에 대해서만 한정지어서 순서를 계산하는 것이다.


---
이렇게 DOM 구조에 영향을 많이 받는 패턴은 많이 남용할수록 리팩터링과 유지보수가 어려워진다.

DOM 구조가 살짝만 변해도 스타일 적용이 달라질 수 있기 때문이다.
그래서 상대적으로 DOM 구조의 변화에 강한 nth-of-type을 쓰는 것이 권장되는것 같다.

하지만, 이번 프로젝트에서는 작성한 DOM의 구조가 쉽게 변할것 같지도 않았고, nth-of-type으로 했을때 특정 조건의 순서를 한번더 꼬아서 생각해야한다는 불편함 때문에 DOM구조를 보고 직관적으로 파악할 수 있는 nth-child를 사용해서 스타일링하였다.