"์ฌ์ดํธ์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ๋ ๋ฐฉ๋ฒ์ ๋ ๊ฐ์ง๊ฐ ์์ต๋๋ค. <img>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ <div>
ํ๊ทธ์ background-image
์์ฑ์ ์ถ๊ฐํ๋ ๊ฒ. ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฐจ์ด์
๊ณผ ๊ฐ๊ฐ ์ด๋ ํ ๊ฒฝ์ฐ์ ์ฌ์ฉํ๋ฉด ์ข์์ง ์ค๋ช
ํด๋ณด์ธ์."
๊ฐ๋ฐ์๋ ํญ์ semanticํ web site ๊ตฌํ์ ์ผ๋ํด๋๊ณ ์ฝ๋ฉ์ ํด์ผํ๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ๋ฐ ๊ด์ ์์ html์ img tag์ css์ background-image์ ์ฐจ์ด์ ๊ณผ ์ด๋ ํ ๊ฒฝ์ฐ์ ์ฌ์ฉํ๋ฉด ์ข์์ง๋ฅผ ์ค๋ช
ํ๊ฒ ๋ค.
๋จผ์ ์ฝ๋์ ์ฌ์ฉ๋ฒ์ ์์๋ก ์์๋ณด์!
1. <img src="URL(์ด๋ฏธ์ง ์ฃผ์)" alt="Media"/>
2. <div style="background-image: URL(์ด๋ฏธ์ง ์ฃผ์);"></div>
์ 2์ค์ ์ฝ๋ ์ฐจ์ด์ ์ alt
attribute์ ์ /๋ฌด์ด๋ค.
alt๋ alternative text
์ ์ฝ์๋ก image์ ๋ํ ์ ๋ณด ์ค๋ช
์ ์ฌ์ฉํ๋ค.
โ ์ด๋ฏธ์ง๊ฐ ์ ์์ ์ผ๋ก ๋ก๋ฉ๋์ง ์์ ๋ ์ฌ์ฉ์์๊ฒ ๋์ฒด๊ฐ์ผ๋ก ๋ณด์ธ๋ค.
โก์ด๋ฏธ์ง๋ฅผ ์์ฑ์ธ์ด๋ก ์ ํ์ ํด๋น ์ ๋ณด๋ฅผ ๋์ ์ฝ์ ์ ์๋ค.
โข์ฌ์ฉ์๊ฐ ๊ด๋ จ ์ด๋ฏธ์ง ์กฐํ์ ํด๋น๊ฐ์ image์ keyword๋ก ์ธ์
ํ์ฌ ์น๋ธ๋ผ์ฐ์ ์์์ ๋ญํฌ ๋ ์ ์๋ค.
์ฆ, SEO: Search Engine Optimization
ํน์ฑ์ ๊ฐ๋๋ค.
alt ์์์ ํน์ฑ์ ๊ธฐ์ค์ผ๋ก ๋ค์ ์ค๋ช
ํ์๋ฉด user์๊ฒ ํ์ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ ์์๋ผ๋ฉด img tag
๋ฅผ ์ฌ์ฉํ๊ณ , ๊ทธ๋ ์ง ์์ ๋จ์ ๋์์ธ์ ์์๋ผ๋ฉด background-image
๋ฅผ ์ฌ์ฉํ๋ฉด ๋๊ฒ ๋ค.(*background-image๋ print์ ๋ณด์ด์ง ์์!)
๊ทธ๋ ๋ค๋ฉด ์ฐ๋ฆฌ๋ ์ ์ฐ๋ฆฌ๋ semantic tag
๋ฅผ ์์ฑํ๊ณ web์ ๊ตฌํํด์ผํ ๊น? ์๋์ ๋ช ๊ฐ์ง ์ฅ์ ์ ์ ์ด๋์๋ค.
โบ Web page์ ์ ๊ทผ์ฑ
: tag๋ฅผ ํตํด ์๊ฐ์ ์ธ ์ ๋ณด๋ฅผ text ํํ๋ก ํํํ ์ ์์ด ์ฌ์ฉ์์ ์ํฉ์ ๊ตฌ์ ๋ฐ์ง ์๊ณ ์นํ์ด์ง์ ์ ๊ทผ์ฑ์ ๋ํ ์ ์๋ค.
โบ SEO ํน์ฑ
: ์๊ฐ ์์๋ฅผ text ํํ๋ก๋ ํํ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ search engine์์ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ์ ๋ํ์ค๋ค.
โบ ์ฌ์ด code ๊ฐ๋
์ฑ
: ๋ด๋น ๊ฐ๋ฐ์๊ฐ ์๋๋๋ผ๋ tag๋ฅผ ํตํด ๋ด๋ถ ์์๋ค์ ๋ชฉ์ ์ ์ฝ๊ฒ ์ ์ถํ ์ ์๋ค.