๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/html, css, scss

CSS ์„ ํƒ์ž (selector)์˜ ์ •์˜์™€ ์‚ฌ์šฉ๋ฒ•

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2019. 9. 8.

๋ชฉ์ฐจ

    CSS๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐ ์žˆ์–ด์„œ ๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ด๊ณ  ๊ธฐ๋ณธ์ ์ด๊ณ  ํ•ต์‹ฌ ์ ์ธ ๊ฒƒ์ด ๋ฐ”๋กœ CSS ์„ ํƒ์ž์˜ ํ™œ์šฉ์ด์ฃ .

    CSS์˜ ์„ ํƒ์ž ๋ฌธ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ฃ .

    ์„ ํƒ์ž { ์†์„ฑ:๊ฐ’}

    /*example*/
    select {position:absolute}
    #selector { position:absolute; }
    .selector { postition:absolute; }

    ์ด๋Ÿฐ ์„ ํƒ์ž๋Š” ์šฐ๋ฆฌ๊ฐ€ CSS์˜ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ํŠน์ • ๋Œ€์ƒ์„ ์ œํ•œํ•˜๊ณ  ์ง€์ •ํ•˜๋Š” ๊ฒƒ์„ ์ง€์นญํ•˜๋Š” ๊ฒƒ์ด์ฃ . ์‰ฝ๊ฒŒ ์ƒ๊ฐํ•˜๋ฉด ํƒ€๊นƒ์ด๋ผ๊ณ  ์—ฌ๊ฒจ๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.

    ์œ„์—์„œ ์˜ˆ๋ฅผ ๋“  ์„ ํƒ์ž 3์ข…์— ๋Œ€ํ•ด์„œ ์ผ๋‹จ ์•Œ์•„๋ณด์ฃ .

     

    ์š”์†Œ ์„ ํƒ์ž (type Selector)

    ์•„๋ฌด๋Ÿฐ ๊ธฐํ˜ธ๊ฐ€ ์—†์ด ์˜ค๋Š” ๋‹จ์–ด๋Š” html ํƒœ๊ทธ์˜ Element์š”์†Œ์ž…๋‹ˆ๋‹ค.

    a, p, div, table, li, ul, input, img ๋“ฑ๋“ฑ์˜ html ํƒœ๊ทธ๋ฅผ ์ง€์ •ํ•  ๋–„๋Š” ํƒœ๊ทธ๋ฅผ ์จ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ํƒœ๊ทธ์— ์Šคํƒ€์ผ์„ ๊ฑธ์–ด๋ฒ„๋ฆฌ๊ฒŒ ๋˜๋ฉด, ๋ฌธ์„œ ์ „์ฒด์— ๊ฑธ์ณ์„œ ๊ทธ ํƒœ๊ทธ๋Š” ์ง€์ •ํ•œ ์†์„ฑ์œผ๋กœ๋งŒ ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋‹ˆ๊นŒ, ํƒœ๊ทธ ๊ณ ์œ ์˜ ๋””ํดํŠธ ์†์„ฑ์—์„œ ๋ฒ—์–ด๋‚˜๋ฒ„๋ฆฌ๊ฒŒ ๋˜์ฃ . ๊ทœ๋ชจ๊ฐ€ ํฐ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๊ต‰์žฅํžˆ ๊ณจ์น˜ ์•„ํŒŒ์ง‘๋‹ˆ๋‹ค.

     

    ID ์„ ํƒ์ž(id selector)

    #์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์„ ํƒ์ž์ž…๋‹ˆ๋‹ค. ๋ณดํ†ต ํƒœ๊ทธ์˜ ์†์„ฑ์œผ๋กœ id="id๋ช…"์œผ๋กœ ํ• ๋‹นํ•œ ๊ฒฝ์šฐ ํ•ด๋‹น id๊ฐ’์„ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

    id๋Š” ํŽ˜์ด์ง€ ๋‚ด์—์„œ๋Š” ์˜ค์ง ํ•œ ์š”์†Œ๋งŒ์ด ๊ฐ€์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค. 

    ๋ฌผ๋ก  CSS์˜ ์†์„ฑ์€ ์ค‘๋ณต๋˜์–ด ์žˆ์–ด๋„ ์ ์šฉ๋˜๊ธด ํ•ฉ๋‹ˆ๋‹ค๋งŒ, html๋ฌธ์„œ ๊ธฐ์ˆ ์ƒ์—์„œ๋Š” id๋Š” ์˜ค์ง ํŽ˜์ด์ง€ ๋‚ด์—์„œ๋Š” ๊ณ ์œ ํ•œ ๊ฐ’์„ ๊ฐ€์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    <div id="cssIdSelector"></div>
    
    <style>
    
    #cssIdSelector { postion:absolute; width:200px; height:100px}
    
    </style>

     

    ํด๋ž˜์Šค ์„ ํƒ์ž (class selector)

    .์œผ๋กœ ์‹œ์ž‘๋œ ์„ ํƒ์ž๋“ค์ž…๋‹ˆ๋‹ค. id๊ฐ€ ์˜ค์ง ํ•œ ๊ฐœ์ฒด์—๋งŒ ์†์„ฑ์„ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ๋ฐ˜ํ•ด์„œ, class๋Š” ๋งŽ์€ ์š”์†Œ์— ๊ณตํ†ต์ ์œผ๋กœ ์ ์šฉ์ฝ”์ž ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

    id์™€ class๊ฐ€ ๋™์‹œ์— ๋‹ค๋ฅธ ์†์„ฑ์œผ๋กœ ์ ์šฉ๋  ๋•Œ์—๋Š” id๊ฐ’์ด ์šฐ์„ ๋ฉ๋‹ˆ๋‹ค.

    <div id="cssIdSelector" class="cssClassSelector"></div>
    
    <style>
    
    #cssIdSelector { postion:absolute; width:200px; height:100px}
    
    .cssClassSelector{ postion:absolute; width:100px; height:200px}
    
    </style>

    ์œ„์˜ ์„ธ๊ฐ€์ง€๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์š”์†Œ ์ž์ฒด๋ฅผ ์„ ํƒํ•  ๋•Œ ์ง์ ‘์ ์ธ ์„ ํƒ์ž์— ํ•ด๋‹น๋ฉ๋‹ˆ๋‹ค.

    CSS๋Š” ์ƒ์†์ด๋ผ๋Š” ๊ฐœ๋…์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ์š”.

    ํŠน๋ณ„ํ•˜๊ฒŒ ๊ธฐ์ˆ ํ•˜์ง€ ์•Š์€ ์Šคํƒ€์ผ์˜ ๊ฒฝ์šฐ์—๋Š” ๋ถ€๋ชจ์˜ ์†์„ฑ์„ ๋ฌผ๋ ค๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ๊ทธ๋ฆฌ๊ณ  ๊ทธ๋Ÿฌํ•œ ์†์„ฑ์˜ ๊ฐ€์žฅ ๋ํŒ์™•์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์ดˆ์˜ ์†์„ฑ!

    ํƒœ์ดˆ์— ๋น›์ด ์žˆ์—ˆ์œผ๋‹ˆ... ๋ณ„๋น›๊ณผ ๋‹ฎ์€ *์„ ํƒ์ž์ž…๋‹ˆ๋‹ค.

     

    ์ „์ฒด ์„ ํƒ์ž (universal selector)

    ๋ฌด์ฐจ๋ณ„์ ์œผ๋กœ ๋ชจ๋“  ์š”์†Œ๋“ค์— ๋Œ€ํ•ด ์†์„ฑ์„ ์ง€์ •ํ•˜๊ฒ ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค.

    ๋ณดํ†ต์€ ๊ณตํ†ต์ ์šฉ๋˜๋Š” CSSํŽ˜์ด์ง€์˜ ์ตœ์ƒ๋‹จ์— ๊ธฐ์ˆ ํ•ด ๋†“์œผ๋ฉด์„œ ๋Œ€์ฒด๋กœ ์›น์‚ฌ์ดํŠธ ์ „์ฒด์˜ ํฐํŠธ์˜ ์†์„ฑ์„ ์ •์˜ํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    * { font-size:12px; font-familyt:'๋‹์›€',dotum;}

    ๊ณผ ๊ฐ™์ด ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

     

    ์ง๊ณ„ ์ž์‹ ์„ ํƒ์ž (child selector)

    >๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์„ ํƒ์ž์ธ๋ฐ์š”. 

    ํŠน์ •๋œ ์š”์†Œ์˜ ๋ฐ”๋กœ ์•„๋ž˜ ์ž์‹์„ ์ง€์นญํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    body > p { font-size:14px}

    ๊ณผ ๊ฐ™์ด ์ ์šฉ๋˜๋ฉด, html๋ฌธ์„œ์ƒ์—์„œ div ๋“ฑ ์–ด๋–ค ๊ฒƒ์—๋„ ์Œ“์—ฌ ์žˆ์ง€ ์•Š์€ pํƒœ๊ทธ์˜ ์š”์†Œ์—๋งŒ ํฐํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ 14px๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

    <style>
    
    #testSelector1 > p { font-size:14px}
    
    </style>
    
    <div id="testSelector1">
    
    <div><p>์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!</p></div>
    
    <p>๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!</p>
    
    </div>

    ์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” "๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!"๋งŒ ํฐํŠธ์‚ฌ์ด์ฆˆ๊ฐ€ 14px๋กœ ๋ณ€๊ฒฝ๋˜๊ณ , "์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!"๋Š” ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ฒŒ ๋˜์ฃ .

     

    ์ž์† ์„ ํƒ์ž (descendant selector)๋˜๋Š” ๋ฌธ๋งฅ ์„ ํƒ์ž (contextual selector)

    ์œ„์˜ ์ž์‹ ์„ ํƒ์ž๊ฐ€ ์ง๊ณ„ ์ž์‹๋งŒ ํŠน์ •ํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜ํ•ด์„œ, ์ž์†์„ ํƒ์ž๋Š” ๋ช‡ ๋Œ€ ์ž์†์ธ์ง€ ์ƒ๊ด€์—†์ด ์†์„ฑ์ด ์ƒ์†๋ฉ๋‹ˆ๋‹ค.

    ์„ ํƒ์ž์˜ ํ˜•์‹์€ ๊ณต๋ฐฑ์ž…๋‹ˆ๋‹ค.

    <style>
    
    #testSelector2 p { font-size:14px}
    
    </style>
    
    <div id="testSelector2">
    
    <div><p>์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!</p></div>
    
    <p>๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!</p>
    
    </div>

     

    ์ง๊ณ„์ž์‹ ์„ ํƒ์ž์˜ ์ ์šฉ ๋•Œ์™€ ๋‹ฌ๋ฆฌ  "๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!", "์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!" ๋‘ ๋ฌธ์žฅ ๋ชจ๋‘ ํฐํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ 14px๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

     

    ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž (Adjacent sibling selector)

    ์š”์†Œ +๋‚˜ ~,^ ์š”์†Œ์˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    ์—ญ์‹œ ๊ฐ•๋ ฅํ•œ ๋Šฅ๋ ฅ์„ ๋ฐœํœ˜ํ•˜๋Š” ์„ ํƒ์ž์ž…๋‹ˆ๋‹ค.

    ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋งŒ ๋ณ„๋„๋กœ ํฌ์ŠคํŒ…ํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค.

    2019/08/16 - [Lect & Tip/html, css, scss] - ~ + ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•œ No javascript ํ† ๊ธ€ ์ƒ์„ธ๊ฒ€์ƒ‰ ํ™”๋ฉด CSS๋งŒ์œผ๋กœ ํผ๋ธ”๋ฆฌ์‹ฑํ•˜๊ธฐ

     

    ๋ถ€์ • ์„ ํƒ์ž :not selector

    ๋ถ€์ • ์„ ํƒ์ž๋Š” ์ž˜ ์“ฐ๋ฉด ์Šคํƒ€์ผ ์ž‘์„ฑ์ด ๊ต‰์žฅํžˆ ๊ฐ„๊ฒฐํ•ด์ง‘๋‹ˆ๋‹ค.

    ์ด์—  ๊ด€ํ•ด์„œ๋Š” ๋‹ค์Œ ๋งํฌ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

    2019/08/30 - [Lect & Tip/html, css, scss] - css3 :not ์„ ํƒ์ž

     

    ์ž์†/์ž์‹ ์„ ํƒ์ž + ์ „์ฒด ์„ ํƒ์ž

    ์ „์ฒด ์„ ํƒ์ž๊ฐ€ ๋‹จ๋…์œผ๋กœ ์“ฐ์ด๋ฉด ๋ฌธ์„œ ์ „์ฒด์— ์˜ํ–ฅ์„ ๋ผ์น˜์ง€๋งŒ, ์ž์† ํ˜น์€ ์ž์‹ ์„ ํƒ์ž์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด, ์ž์† ํ˜น์€ ์ž์‹ ๋ชจ๋‘๋ฅผ ์ง€์นญํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    <style>
    
    #testSelector3 > * { font-size:14px}
    
    </style>
    
    <div id="testSelector3">
    
    <div><p>์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!</p></div>
    
    <p>๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!</p>
    
    <div>์•„ํ”„๋ฆฌ์นดํ‹ฐ๋น„ bj 4๋Œ€์—ฌ์‹  ๋ฐ•ํ˜„์„œ ์งฑ!</div>
    
    </div>

    ์œ„์˜ ์˜ˆ์‹œ์—์„œ๋Š” "๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!"์™€ "์•„ํ”„๋ฆฌ์นดํ‹ฐ๋น„ bj 4๋Œ€ ์—ฌ์‹  ๋ฐ•ํ˜„์„œ ์งฑ!"๋ฌธ์žฅ๋งŒ 14px์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

    ์ „์ฒด ์„ ํƒ์ž์— ์˜ํ•ด์„œ 

    <div><p>์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!</p></div>

    ๋ฌธ์žฅ์€ p์š”์†Œ ํ•˜๋ถ€๊นŒ์ง€ 12px๋กœ ์ง€์ •๋˜์—ˆ์ฃ .

    #testSelector3 > * { font-size:14px}

    ์— ์˜ํ•ด์„œ๋Š” 

    <div><p>์†Œ๋ผ๋„ท ์ฃผ์†Œ ์ข€ ๊ณ ์ •ํ•ด๋ผ!</p></div> 

    p ์š”์†Œ๋Š” ์˜ํ–ฅ์„ ๋ฐ›์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค. 

    ๊ทธ๋Ÿฌ๋‹ˆ ์ฒ˜์Œ์— ์„ ์–ธ๋œ 12px ํฐํŠธ ์‚ฌ์ด์ฆˆ๋งŒ ๋”ฐ๋ฅด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    <p>๋ณด๋ฐฐ๋“œ๋ฆผ ํŽ˜๋ผ๋ฆฌ๋…€๋Š” ๋ฒ ์ด๊ธ€๋…€!</p>
    
    <div>์•„ํ”„๋ฆฌ์นดํ‹ฐ๋น„ bj 4๋Œ€์—ฌ์‹  ๋ฐ•ํ˜„์„œ ์งฑ!</div>

    ๋Š” 

    #testSelector3 > * { font-size:14px}

    ์˜ ์˜ํ–ฅ์„ ๋ฐ›๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์ฃ .

     

    ์†์„ฑ ์„ ํƒ์ž (attributor selector)

    ๊ตฌ์ฒด์ ์ธ ์†์„ฑ์„ ์ง€๋‹Œ ์š”์†Œ์— ๋Œ€ํ•ด์„œ๋งŒ ํŠน์ •๋˜๋Š” ์„ ํƒ ์ž์š”.

    ์ฃผ๋กœ input ํƒœ๊ทธ์˜ ๋ณ€์ข…๋“ค์— ์ ์šฉํ•˜๊ฒŒ ๋˜๋Š”๋ฐ์š”.

    input[type=text] { font-weight:bold}
    input[type=checkbox] { margin:0; padding:0}

    ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

     

    ์˜์‚ฌ ์„ ํƒ์ž (pseudo Selector)

    ์˜์‚ฌ ์„ ํƒ์ž๋Š” ์˜์‚ฌ ํด๋ž˜์Šค ์„ ํƒ์ž์™€ ์˜์‚ฌ ์š”์†Œ ์„ ํƒ์ž๋กœ ๋‚˜๋‰˜๋Š”๋ฐ์š”.

    ์˜์‚ฌ ํด๋ž˜์Šค ์„ ํƒ์ž (pseudo-class selector)

    :link, :visited, :active, :hover, :focus, :lang

    :first-child (์š”์†Œ์˜ ์ฒซ ๋ฒˆ์งธ ์ž์‹์„ ํŠน์ •ํ•จ)

    :last-child (CSS3์—์„œ๋งŒ ์ ์šฉ๋จ, IE9+์ด์ƒ๋งŒ ์ธ์‹๋จ)

    ์˜์‚ฌ ์š”์†Œ ์„ ํƒ์ž (pseudo-element selector)

    :first-line ๋ฌธ๋‹จ์˜ ์ฒซ ๋ฒˆ์งธ ์ค„์— ์ ์šฉ (๋ธ”๋ก ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ์—๋งŒ ์ ์šฉ๋จ)

    :first-letter ์ฒซ ๋ฒˆ์งธ ๋ฌธ์ž๋ฅผ ํŠน์ •ํ•จ (๋ธ”๋ก ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ์—์„œ๋งŒ ์ ์šฉ)

    :before ์š”์†Œ์˜ ๋‚ด์šฉ ์•ž์— ๋‚ด์šฉ์„ ์ƒ์„ฑํ•จ(content์†์„ฑ์„ ๋ฐ˜๋“œ์‹œ ์จ์•ผ ํ•จ)

    :after ์š”์†Œ์˜ ๋‚ด์šฉ ๋’ค์— ๋‚ด์šฉ์„ ์ƒ์„ฑํ•จ(content์†์„ฑ์„ ๋ฐ˜๋“œ์‹œ ์จ์•ผ ํ•จ)

    ์˜์‚ฌ ์„ ํƒ์ž๋Š” ์ข€ ๋” ํ•  ๋ง์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์†Œ๊ฐœ๋งŒ ํ•˜๊ณ  ์‚ฌ์šฉ๋ฒ•์€ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋‹ค๋ฃฐ๊ฒŒ์š”.



    ์ถœ์ฒ˜: https://www.vouloir.kro.kr/entry/CSS-์„ ํƒ์ž-selector์˜-์ •์˜์™€-์‚ฌ์šฉ๋ฒ• [๋ธ”๋ฃจ์•„๋ฅด2019]

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€