Tiny Bunny
๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’ป/HTML

๋งํฌ์™€ ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ - src์†์„ฑ, alt์†์„ฑ, ์ด๋ฏธ์ง€ ๋งํฌ(img)

by soonybutter 2024. 1. 7.
728x90

1)img ํƒœ๊ทธ์™€ alt ์†์„ฑ/ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ ํ‘œ์‹œ

<img src="์ด๋ฏธ์ง€ ๊ฒฝ๋กœ" alt="์ด๋ฏธ์ง€ ์„ค๋ช…">

โ€‹

์—ฌ๊ธฐ์—์„œ ์ฃผ์˜ํ•  ๊ฒŒ ๋ฐ”๋กœ, "src ์†์„ฑ" ์ด๋‹ค.

โ€‹

src ์†์„ฑ -> ์‚ฝ์ž…ํ•˜๋ ค๋Š” ์ด๋ฏธ์ง€์˜ ๊ฒฝ๋กœ

โ€‹

โ˜…โ˜…โ˜…โ˜… ๊ธฐ์ค€ : ์‹คํ–‰๋˜๋Š” HTML ํŒŒ์ผ์˜ ์œ„์น˜ !

-html ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ '์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ๊ฒฝ๋กœ'๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

โ€‹

โ˜…โ˜… htmlํŒŒ์ผ๊ณผ ๊ฐ™์€ ์œ„์น˜(ํ˜„์žฌ ํด๋”) ์— ์žˆ๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•˜๋Š” ./ ์€ ์ƒ๋ฝํ•  ์ˆ˜ ์žˆ์Œ.

โ€‹

โ€‹

โ€‹

../ ์€ ์ƒ์œ„ ํด๋”์— ์žˆ๋˜ ์ด๋ฏธ์ง€ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜จ ๊ฒƒ์ด๊ณ ,

./์€ html๊ณผ ๋™์ผํ•œ ํด๋”์— ์žˆ๋Š” ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ƒํ™ฉ์ด๋‹ค.

โ€‹

์ง !

 

 

์ ์šฉ๋œ ๋ชจ์Šต

 

 

์ด๋ ‡๊ฒŒ ๋‚ด๊ฐ€ ์„ค์ •ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ–ˆ๋‹ค.

โ€‹


2) ์ด๋ฏธ์ง€ ๋งํฌ

โ€‹

โ€‹-์ด๋ฏธ์ง€ ๋งํฌ๋ž€ html์—์„œ ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•˜๋ฉด ํŠน์ • ์›น ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ๋งํฌ๋‹ค.

โ€‹

์ง€๊ธˆ๋ถ€ํ„ฐ ์šฐ๋ฆฌ๊ฐ€ ๋ชจ๋‘ ์ž˜ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒ€์ƒ‰ ์—”์ง„,

'๊ตฌ๊ธ€' ๋กœ ์ด๋™ํ•˜๋Š” ์ด๋ฏธ์ง€ ๋งํฌ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋ ค ํ•œ๋‹ค.

 

 

<a href="๋Œ€์ƒ ๊ฒฝ๋กœ">

<img scr="์ด๋ฏธ์ง€ ๊ฒฝ๋กœ" alt="๋Œ€์ฒด ํ…์ŠคํŠธ">

</a>

์ž ์ฝ”๋”ฉ ์ž…๋ ฅ ํ›„ html ์›น์— ๊ฐ€๋ณด์ž .

โ€‹

๊ตฌ๊ธ€ ์ด๋ฏธ์ง€๋ฒ„ํŠผ์ด ์ƒ์„ฑ ๋˜์—ˆ๋‹ค.

์ด๋ฏธ์ง€๋ฒ„ํŠผ์— ๊ตฌ๊ธ€ ๋งํฌ์ฃผ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•ด๋†“์•˜๊ณ , alt ์†์„ฑ์„ ํ†ตํ•ด ์„ค์ •ํ•œ "_blank"(์ƒˆ ์ฐฝ์—์„œ ์—ด๋ฆผ) ๋ฅผ ๊ตฌํ˜„ํ•˜๋„๋ก ํ–ˆ๋‹ค. 

โ€‹

๊ณ ๋กœ ๊ตฌ๊ธ€ ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•˜๋ฉด

โ€‹

์ƒˆ ์ฐฝ์—์„œ ๊ตฌ๊ธ€ ํ™ˆํŽ˜์ด์ง€๊ฐ€ ์—ด๋ฆฌ๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค. 

 

์ด๋ ‡๊ฒŒ src์†์„ฑ, alt์†์„ฑ, ์ด๋ฏธ์ง€ ๋งํฌ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜๋‹ค!

728x90

TOP

Designed by ํ‹ฐ์Šคํ† ๋ฆฌ