์นํ์ด์ง์์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ๋ ๋ฐฉ๋ฒ์ img
ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ div
ํ๊ทธ์ background-image
์์ฑ(property)์ ์ด์ฉํ๋ ๋๊ฐ์ง ๋ฐฉ๋ฒ์๊ณ ์ฐจ์ด์ ์ด ์กด์ฌํ๋ค.
๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ img
ํ๊ทธ๋ semantic tag ์ด๊ณ div
ํ๊ทธ๋ฅผ ์ด์ฉํ ๋ฐฉ๋ฒ์ non-semantic tag ์ด๋ค.
img
, header
, form
... ์์ ์ ์ปจํ
์ธ ๋ฅผ ๋ช
ํํ ์ค๋ช
ํ๊ณ ์ ์ํ๋ ํ๊ทธ๋ฅผ semantic tag ๋ผ๊ณ ํ๋ฉฐ ์ด๋ฅผ ๋ฐํ์ผ๋ก ์ ์ ๊ฐ ์น์์ ๊ฒ์์ ํ์ ๋ ์นํ์ด์ง์ ํด๋น ์ฝ๋๋ฅผ ์ฐพ์ ๊ทธ ์ ๋ณด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ฏธ์๋ ๋ด์ฉ์ด ์ถ๋ ฅ๋๋๋ก ๋์์ค๋ค.
๋ฐ๋ฉด div
, span
๊ฐ์ non-semantic tag ๋ค์ ์์ ์ ์ปจํ
์ธ ์ ๋ํ ์ค๋ช
์ด ์ ํ ์๋ค.
์ฆ background-image
์์ฑ์ ํตํด ์ฝ์
๋ ์ด๋ฏธ์ง๋ ๊ฒ์์์ง์ ํตํด ์ ๋ณด๋ฅผ ์ฐพ์ ์ ์๊ณ ๋
ธ์ถ๋์ง ์๋๋ค.
๋ ๋ค๋ฅธ ์ ์ img
ํ๊ทธ์๋ src ์ด์ธ์ ๋ค๋ฅธ ์์ฑ(attribute)์ ์ฌ์ฉํ ์ ์๋ ์ ์ด๋ค.
๊ทธ๋ฆผ๊ณผ ๊ฐ์ด img
, div
ํ๊ทธ๋ฅผ ์ด์ฉํด ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ ํ๊ณ img
ํ๊ทธ์๋ alt
๋ฅผ ์ด์ฉํด ์ด๋ฏธ์ง ๋ก๋ฉ์ ์คํจํ์ ๋ ๋์ค๋ ๋ฌธ์๋ฅผ ์ถ๊ฐํ๋ค. ์ด ๋ ์ด๋ฏธ์ง ๋ก๋ฉ์ ์คํจํ๋ฉด
์ด๋ฐ ๊ฒฐ๊ณผ๊ฐ ๋ํ๋๋๋ฐ ์ค์ํ ๊ฒ์ img
ํ๊ทธ๋ ์ด๋ฏธ์ง๊ฐ ์์ง๋ง ๋ก๋ฉ์ ์คํจํ ํ์ ์ ๋จ๊ธฐ์ง๋ง div
ํ๊ทธ๋ ํ์ ์ ์ฐพ์ ์ ์๋ค.
์ฆ ์ด๋ฏธ์ง ๋ก๋ฉ์ ์คํจํ์ ๋ ์๋ฌด๊ฒ๋ ์๋ ๊ฒ์ด ์์ฐ์ค๋ฌ์ธ ๋๋ background-image
๋ฅผ ์ฌ์ฉํ๋ ํธ์ด ๋ ์ ์ฉํ๋ค.
์
๋ก๋ํ ์ด๋ฏธ์ง๊ฐ ์ฌ์ฉ์์๊ฒ ์ปจํ
์ธ ์ดํด์ ๋์์ ์ฃผ๊ณ ์๋ค๋ฉด img
ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ณ ์๋๋ผ๋ฉด background-image
๋ฅผ ์ฌ์ฉํ์.