❏ css - odd와 even 선언자 (짝수와 홀수)

이번에 새로운 프로젝트를 하면서 css 속성 작성하는 줄의 수를 줄이려고 노력하고 있다.

 

맨날 큰 프로젝트를 처음부터 끝까지 하다보면 어느 새 4000개를 넘긴 것을 보고 반성하고 있다ㅠ

(오빠가 자기 회사 홈페이지가 3000개가 후반이라는데... 나는 scss도 아니고 일반이기 때문에ㅠㅠㅠ)

 

그중에서 알게 된 방법은 odd와 even 선언이다!

---

 

1. odd 선언자

 

odd선언자는 홀수번호의 자식을 선택하여 선언하는 선언자이다.

 

✎ 선언방법

:nth-child(odd) /*홀수의 자식을 선택합니다.*/

 

그럼 여기 1부터 6이 나열되어 있는 ul태그에서 홀수번째 자식들만 보라색으로 색을 설정해 보자.

 

✎ html

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

✎  css

ul li:nth-child(odd) /*홀수의 자식을 호출합니다.*/
{color: blueviolet;} /*그리고 색을 보라색으로 색칠해줘!*/

✎ 결과

이렇게 홀수 번호의 자식들만 보라색으로 색이 변경되었다.

2. even 선언자

 

even선언자는 짝수번호의 자식을 선택하여 선언하는 선언자이다.

 

✎ 선언방법

:nth-child(even) /*짝수의 자식을 호출합니다.*/

 

그럼 이번에도  ul태그에서 짝수번째 자식들만 빨간색으로 색을 설정해 보자.

 

✎ html

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

✎  css

ul li:nth-child(even) /*짝수의 자식을 호출합니다.*/
{color: red;}/*그리고 빨간색으로 색칠해줘!*/

 

✎ 결과

 

짜잔! 짝수번째 자식들만 빨간색으로 변한걸 볼 수 있었다.!

---

근데 여기서 과연 0은 홀수로 선언되는지 짝수로 선언되는지 궁금해졌다.

 

    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

이번에는 홀수번을 초록색으로 바꿔보겠다.

 

ul li:nth-child(odd) /*홀수의 자식을 호출합니다.*/
{color: green;} /*그리고 초록색으로 색칠해줘!*/

 

결과는??

 

때잉?

분명 odd선언자는 홀수번호의 자식을 선언하는 것으로 알고 있었는데 이런 결과가 나왔다...

그 이유는 바로  nth:child는 오로지 li에 있는 수를 숫자데이터로 보는 게 아니라 문자데이터로 순서를 판단하기 때문에 이런 결과가 나온 거였다. (순간 js의 제로베이스넘버링과 혼동했다ㅠ)