CSS ํ•œ์ค„๋กœ ์™ธ๋ถ€๋งํฌ ๊พธ๋ฏธ๊ธฐ (๊ฐ„๋‹จ ํŒ)

๊ธ€์„ ์ฝ์„๋•Œ, ์ €๋Š” ์•„์˜ˆ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ๋กœ ๋งํฌ๊ฐ€ ์žˆ๋‹ค๋ฉด ๋ˆ„๋ฅด๊ธฐ๊ฐ€ ์ข€ ๊บผ๋ ค์ง‘๋‹ˆ๋‹ค. ๊ธ€์ด ์งง๋‹ค๋ฉด ๊ธ€์„ ๋‹ค ์ฝ๊ณ  ๋”ฐ๋กœ ์—ด๊ฑฐ๋‚˜, ๊ธ€์ด ๊ธธ๋‹ค๋ฉด ์ค‘๊ฐ„์— ์ƒˆย ํƒญ์œผ๋กœ ์—ด์–ด๋‘๊ณค ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿด๋•Œ, ๋ณด๊ธฐ ์ข‹๊ฒŒ ์™ธ๋ถ€๋งํฌ์ธ๊ฑธ ํ‘œ๊ธฐํ•˜๋ฉด ์–ด๋–จ๊นŒ์š”? ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ CSS ํ•œ์ค„์ด๋ฉด ์™ธ๋ถ€๋งํฌ๋ฅผ ํ‘œ๊ธฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ๋งํฌ๋ฅผ ๋ณด์‹œ๋ฉด ์ œ ๋ธ”๋กœ๊ทธ ๋งํฌ์—๋Š” ๋งํฌ๋ชจ์–‘ ์ด๋ชจ์ง€๊ฐ€ ์•ˆ๋ถ™๊ณ ,
์™ธ๋ถ€๋งํฌ์—๋งŒ ์ด๋ชจ์ง€๊ฐ€ ๋งํฌ ๋’ค์— ๋”ฐ๋ผ๋‹ค๋‹ˆ๋Š” ๊ฒƒ์„ ๋ณด์‹ค ์ˆ˜ ์žˆ์„๊ฒ๋‹ˆ๋‹ค.

๋น„๋ฐ€์€ ๋ฐ”๋กœ ์•„๋ž˜ ์ ํžŒ CSS ํ•œ์ค„์ž…๋‹ˆ๋‹ค.

์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•˜์…”์„œ ์ ๋‹นํ•˜๊ฒŒ ์ˆ˜์ •ํ•ด์ฃผ์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. .article์€ ๊ธ€์„ ๊ฐ์‹ธ๊ณ ์žˆ๋Š” ์ƒ์œ„ ์š”์†Œ๋กœ ๋ฐ”๊ฟ”์ฃผ์‹œ๊ณ 
  2. address.com์€ ์ ์šฉํ•  ์‚ฌ์ดํŠธ ์ฃผ์†Œ๋กœ ๋ฐ”๊พธ์‹  ํ›„
  3. ์ €์ฒ˜๋Ÿผ ๋’ค์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์‹ค๊ฑฐ๋ฉด :after์„ ์‚ด๋ ค๋‘์‹œ๊ณ (์•ž์„ ๊พธ๋ฏธ์‹ค๊ฑฐ๋ฉด :before๋กœ ๋ฐ”๊พธ์‹œ๊ณ )
  4. ์›ํ•˜๋Š” CSS ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ์›๋ฆฌ์ผ๊นŒ?

CSS๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ๋œฏ์–ด๋ณด๋ฉด ์ดํ•ด๊ฐ€ ๋˜์‹ค๊ฒ๋‹ˆ๋‹ค.

  1. .article โ€“ ๋จผ์ € โ€˜articleโ€™์ด๋ผ๋Š” ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ ์•ˆ์—
  2. a โ€“ โ€˜aโ€™ ํƒœ๊ทธ๋“ค ์ค‘
  3. a[href*="//"] โ€“ โ€˜hrefโ€™ ์†์„ฑ์— โ€˜//โ€™์ด๋ผ๋Š” ๋ฌธ์ž๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.
  4. :not([href*="address.com"]) โ€“ ๊ทธ๋ฆฌ๊ณ  โ€˜:notโ€™์ด๋ผ๋Š” ์„ ํƒ์ž๋กœ ๊ทธ ์ค‘์—์„œ โ€˜hrefโ€™์†์„ฑ์— site.address.com์ด ํฌํ•จ๋˜์ง€ ์•Š์€ ๋งํฌ๋งŒ ๊ณจ๋ผ๋ƒ…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ๊ฒฐ๊ตญ ์™ธ๋ถ€๋งํฌ๋งŒ ๋‚จ๊ฒŒ๋˜๊ฒ ์ฃ ?

๋‹ต๊ธ€ ๋‚จ๊ธฐ๊ธฐ

์ด๋ฉ”์ผ ์ฃผ์†Œ๋Š” ๊ณต๊ฐœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•„์ˆ˜ ํ•ญ๋ชฉ์€ *(์œผ)๋กœ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค