๐Ÿž img ์™€ background-image ์ฐจ์ด์  ์ดํ•ดํ•˜๊ธฐ โ—๏ธ

ํ—ˆ์ •์›ยท2021๋…„ 2์›” 15์ผ
0
post-thumbnail

์›นํŽ˜์ด์ง€์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์€ img ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ div ํƒœ๊ทธ์— background-image ์†์„ฑ(property)์„ ์ด์šฉํ•˜๋Š” ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์žˆ๊ณ  ์ฐจ์ด์ ์ด ์กด์žฌํ•œ๋‹ค.

1. Semantic , Non-Semantic Tag

๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ imgํƒœ๊ทธ๋Š” semantic tag ์ด๊ณ  div ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•์€ non-semantic tag ์ด๋‹ค.

img, header, form ... ์ž์‹ ์˜ ์ปจํ…์ธ ๋ฅผ ๋ช…ํ™•ํžˆ ์„ค๋ช…ํ•˜๊ณ  ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ๋ฅผ semantic tag ๋ผ๊ณ  ํ•˜๋ฉฐ ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์œ ์ €๊ฐ€ ์›น์—์„œ ๊ฒ€์ƒ‰์„ ํ–ˆ์„ ๋•Œ ์›นํŽ˜์ด์ง€์˜ ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ์ฐพ์•„ ๊ทธ ์ •๋ณด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์˜๋ฏธ์žˆ๋Š” ๋‚ด์šฉ์ด ์ถœ๋ ฅ๋˜๋„๋ก ๋„์™€์ค€๋‹ค.

๋ฐ˜๋ฉด div, span ๊ฐ™์€ non-semantic tag ๋“ค์€ ์ž์‹ ์˜ ์ปจํ…์ธ ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ์ „ํ˜€ ์—†๋‹ค.

์ฆ‰ background-image ์†์„ฑ์„ ํ†ตํ•ด ์‚ฝ์ž…๋œ ์ด๋ฏธ์ง€๋Š” ๊ฒ€์ƒ‰์—”์ง„์„ ํ†ตํ•ด ์ •๋ณด๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๊ณ  ๋…ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค.


2. ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์— ์‹คํŒจํ–ˆ์„ ๋•Œ

๋˜ ๋‹ค๋ฅธ ์ ์€ img ํƒœ๊ทธ์—๋Š” src ์ด์™ธ์— ๋‹ค๋ฅธ ์†์„ฑ(attribute)์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ ์ด๋‹ค.

๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด img, div ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ๊ฐ™์€ ์ด๋ฏธ์ง€๋ฅผ ์—…๋กœ๋“œ ํ•˜๊ณ  img ํƒœ๊ทธ์—๋Š” alt ๋ฅผ ์ด์šฉํ•ด ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์— ์‹คํŒจํ–ˆ์„ ๋•Œ ๋‚˜์˜ค๋Š” ๋ฌธ์ž๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค. ์ด ๋•Œ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์— ์‹คํŒจํ•˜๋ฉด

์ด๋Ÿฐ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š”๋ฐ ์ค‘์š”ํ•œ ๊ฒƒ์€ img ํƒœ๊ทธ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ์žˆ์ง€๋งŒ ๋กœ๋”ฉ์— ์‹คํŒจํ•œ ํ”์ ์„ ๋‚จ๊ธฐ์ง€๋งŒ div ํƒœ๊ทธ๋Š” ํ”์ ์„ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค.

์ฆ‰ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์— ์‹คํŒจํ–ˆ์„ ๋•Œ ์•„๋ฌด๊ฒƒ๋„ ์—†๋Š” ๊ฒƒ์ด ์ž์—ฐ์Šค๋Ÿฌ์šธ ๋•Œ๋Š” background-image๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽธ์ด ๋” ์œ ์šฉํ•˜๋‹ค.


๊ฒฐ๋ก 

์—…๋กœ๋“œํ•œ ์ด๋ฏธ์ง€๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ปจํ…์ธ  ์ดํ•ด์— ๋„์›€์„ ์ฃผ๊ณ  ์žˆ๋‹ค๋ฉด img ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์•„๋‹ˆ๋ผ๋ฉด background-image๋ฅผ ์‚ฌ์šฉํ•˜์ž.

0๊ฐœ์˜ ๋Œ“๊ธ€