๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- HTML & CSS

3. HTML ์ด๋ฏธ์ง€ ์‚ฝ์ž…

by Wonit 2019. 11. 28.

์ด๋ฏธ์ง€ ํƒœ๊ทธ

HTML์—์„œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” <img> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ด ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์ƒ๋Œ€ URL์˜ ๊ฒฝ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค

<img src="url" alt="์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ์„ค๋ช…" title="์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ์„ค๋ช…">
  • src : ํ•„์ˆ˜ ์†์„ฑ์œผ๋กœ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ์—ฐ๊ฒฐ
  • alt : ์ด๋ฏธ์ง€ ํŒŒ์ผ์ด ์—†์œผ๋ฉด, ํŒŒ์ผ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋‚˜ํƒ€๋‚œ๋‹ค.
  • title : ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๋‹ค๋Œ€๋ฉด ํŒŒ์ผ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋‚˜์˜ด

์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ ์กฐ์ ˆ

<img src="์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ URL" width="ํ”ฝ์…€์ˆ˜/๋น„์œจ(%)" height="ํ”ฝ์…€์ˆ˜/๋น„์œจ(%)">
  • width : ์ด๋ฏธ์ง€ ๊ฐ€๋กœ ํฌ๊ธฐ
  • height : ์ด๋ฏธ์ง€ ์„ธ๋กœ ํฌ๊ธฐ

์ด๋ฏธ์ง€์™€ ๋ฌธ์ž์˜ ์ •๋ ฌ

์‚ฝ์ž…ํ•œ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋Š” vspace ๋‚˜ hspace ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์กฐ์ ˆํ•œ๋‹ค. ์ด ๋•Œ ํ˜•์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

<img src="์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ URL" vspace="ํ”ฝ์…€์ˆ˜/๋น„์œจ(%)" hspace="ํ”ฝ์…€์ˆ˜/๋น„์œจ(%)">
  • vspace : ์ด๋ฏธ์ง€ ์ƒํ•˜์˜ ์—ฌ๋ฐฑ
  • hspace : ์ด๋ฏธ์ง€ ์ขŒ์šฐ์˜ ์—ฌ๋ฐฑ

์ด๋ฏธ์ง€๋กœ ๋ฌธ์„œ ์—ฐ๊ฒฐ

<a href="๋งํฌํ•  ํŒŒ์ผ์˜ URL">
  <img src="์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ URL" [border="ํ”ฝ์…€ ์ˆ˜"> 
</a>

'๐Ÿ“บ Front End > -- HTML & CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

6. HTML ํผ ํƒœ๊ทธ  (0) 2019.11.29
5. HTML ํ”„๋ ˆ์ž„  (0) 2019.11.29
4. HTML ํ…Œ์ด๋ธ”  (0) 2019.11.29
2. HTML ๊ธฐ๋ณธ ํƒœ๊ทธ  (0) 2019.11.27
1. Html ๊ธฐ์ดˆ  (0) 2019.11.27

๋Œ“๊ธ€