nth-child() 적용 관련 질문

Question

표 스타일을 다루는 강의에서, nth-child를 이용해 표의 행을 띄엄띄엄 채색할 때(background-color), 본 강의에서 제공된 코드와 똑같이 작성한 것 같은데 저는 표의 행 전체가 칠해집니다. nth-child 안의 숫자를 바꾸면 행이 전부 칠해졌다가 아예 안칠해졌다가 하는데, 무엇이 잘못되었는지 잘 모르겠습니다. 인터넷을 찾아보면 nth-child가 부모가 어떻든지간에 괄호안에 적힌 숫자번째 줄에 모두 적용하기 때문이라는 내용이 나오는데, 그렇다면 강의에서는 잘 작동된 이유가 뭔지 알고싶습니다. 그리고 제가 빠뜨린 개념이 있는지 혹시 눈치채신 분이 계시다면 알려주시면 감사하겠습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴이에요. nth-child()를 이용해 표의 행을 채색하려고 하셨는데, 행이 전부 칠해지는 현상이 발생한다고 하셨군요. 이러한 경우 일반적으로 nth-child() 선택자 안에 숫자를 제대로 작성하지 않아서 발생할 수 있습니다. nth-child() 선택자는 1부터 시작하여 해당 요소의 순서를 나타내는데, 이를 이용하여 특정 행의 스타일을 적용할 수 있습니다. 예를 들어, 표의 짝수 번째 행에 배경색을 적용하고 싶다면 nth-child(even)을 사용할 수 있습니다. 하지만 이 선택자를 사용할 때 주의할 점이 있습니다. 부모 요소 내의 모든 요소에 해당 선택자가 적용되며, 그 결과를 표출합니다. 따라서, 강의에서 사용된 코드와 같이 nth-child()를 적용하면 표의 모든 행에 스타일이 적용되는 것이 정상적입니다. 만약 원하는 행 하나만 칠해지게 하려면 nth-child()의 인자로 특정 숫자를 넣어줘야 합니다. 혹시 코드를 작성하신 부분을 살펴볼 수 있을까요? 코드와 함께 원하시는 결과를 구체적으로 말씀해주시면, 보다 정확한 도움을 드릴 수 있을 것 같아요.