[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 ํด..