[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 클..