[CSS] nth-child() , nth-of-type ๊ตฌ์กฐ ๊ฐ์ ํด๋์ค ์ ํ์ โ๏ธ
ยท
CSS
๐จ๐ป ๋ฌธ์ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฐ์ ํด๋์ค์ฌ๋ฌ ํญ๋ชฉ์ด ๋์ด๋ ์น ๋ฌธ์์์ ์ผ๋ถ๋ง ์ ํํด ์คํ์ผ์ ์ ์ฉํ๋ ์ ํ์์ด๋ค.:nth-child ํด๋์ค๋ ์์ ์์๊ฐ ์ฌ๋ฌ ๊ฐ์ด๊ณ ๊ทธ ์ค์์ ํน์ ํ ์์น์ ์์๋ฅผ ์ ํํ ๋ ์ฌ์ฉํ๋ค.๋ณต์กํ ํจํด์ ์ฒ๋ฆฌํ๊ธฐ์๋ ์ข์์ ์์ฃผ ์ฌ์ฉ๋๋ค. () ๊ดํธ ์์๋ ์์นซ๊ฐ์ ์ซ์๋ก ์ง์ ํ์ฌ ์ฌ์ฉ๋๋ค. nth-child(2n) ์ ์ง์๋ฒ์งธ ์์ ์์๋ฅผ ์ ํํ๊ฒ ๋ค๋ ๋ป์ด๋ฉฐ, 2n ๋์ even ํค์๋๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ex)nth-child(even) nth-child(2n+1) ์ ํ์๋ฒ์งธ ์์ ์์๋ฅผ ์ ํํ๊ฒ ๋ค๋ ๋ป์ด๋ฉฐ, 2n+1 ๋์ odd ํค์๋๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ex)nth-child(odd) ์๋ ์ฒ๋ผ ๊ตฌ๊ฐ ์์๋ฅผ ์ ํํ ์ ์๋ค. :nth-of-type ํด..