๐Ÿงฉ ๊ธฐ๋ก์ž ๊ผฌ๋น„์˜ ํ†ต์ œ ๋ฃจํ‹ด

IT/HTML&CSS

[HTML] ์ด๋ฏธ์ง€/์˜์ƒ/์œ ํŠœ๋ธŒ ๋งํฌ ์˜ฌ๋ฆฌ๊ธฐ(2021-08-24)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 7. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>img/video/์œ ํˆฌ๋ธŒ</title>
  </head>
  <body>
    <h1>img ํƒœ๊ทธ</h1>
    <hr>
    <p>src์†์„ฑ๊ณผ alt ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œ</p>
    <p>src์†์„ฑ์—๋Š” ์ด๋ฏธ์ง€ ํŒŒ์ผ๊นŒ์ง€์˜ ์ƒ๋Œ€๊ฒฝ๋กœ๋ฅผ ์ž…๋ ฅ</p>
    <p>alt์†์„ฑ์—๋Š” ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š” ํ…์ŠคํŠธ ์ž…๋ ฅ</p><!--์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ–ˆ์œผ๋‚˜ ํŒŒ์ผ๋ช…์„ ๋ฐ”๊พธ๊ฒŒ ๋˜๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ์•ˆ๋œจ๊ฒŒ ๋œ๋‹ค. ์ด๋•Œ ์—‘์Šค๋ฐ•์Šค๋กœ ๋œฌ ๊ฒƒ์„ alt ์†์„ฑ ํ™œ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•œ๋‹ค.-->
    <p>src์†์„ฑ์„ ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ์ด์šฉํ–ˆ์„ ๋•Œ</p><!--img ํƒœ๊ทธ๋Š” ์–ด๋–ค ์—ญํ• ์˜ ๊ธฐ๋Šฅ์„ ์˜๋ฏธํ•˜๋ฏ€๋กœ ํ™€ํƒœ๊ทธ-->
    <img src="./img/img1.jpg" alt="์•Œ๋ก๋‹ฌ๋ก ์—ด๊ธฐ๊ตฌ์‚ฌ์ง„" width="300px" height="200px">
    <p>src์†์„ฑ๋„ a์†์„ฑ href์ฒ˜๋Ÿผ ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ ์ด์šฉํ•ด๋„ ์ด๋ฏธ์ง€๋Š” ๋‚˜์˜จ๋‹ค</p>
    <img src="https://ssl.pstatic.net/tveta/libs/1353/1353256/9f3b825b40428dae1037_20210823115313621.jpg" width="500px" height="100px">
    <h1>video ํƒœ๊ทธ</h1>
    <hr>
    <p>videoํƒœ๊ทธ๋Š” ์ž์‹ ํƒœ๊ทธ๋กœ source ํƒœ๊ทธ๋ฅผ ๊ฐ€์ง„๋‹ค.</p><!--๋น„๋””์˜ค ํƒœ๊ทธ๋Š” ์ž์‹ ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค๋ฉด ๋งˆ์นจํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค๋Š” ์˜๋ฏธ, ๊ทธ๋ฆฌ๊ณ  ์˜์ƒ์€ ํ˜•์‹์ด ๋‹ค์–‘ํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €๋ณ„๋กœ ํ‘œ์‹œ๋˜๋Š” ๋น„๋””์˜ค๊ฐ€ ๋‹ค ๋‹ค๋ฅด๋ฏ€๋กœ ์Œํƒœ๊ทธ์—ฌ์•ผ ํ•จ-->
    <p>source ํƒœ๊ทธ์˜ src์†์„ฑ์„ ํ†ตํ•ด ๋น„๋””์˜ค ํŒŒ์ผ์€ ์—ฐ๊ฒฐ</p>
    <p>source ํƒœ๊ทธ์˜ type ์†์„ฑ์„ ๋ช…ํ™•ํžˆ ์ž…๋ ฅ</p><!--type์€ ํŒŒ์ผ์˜ ํ™•์žฅ์ž ๋ช…์„ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ•„์ˆ˜ ์ž…๋ ฅ --><!--<video controls="controls">์˜์ƒ์„ ์žฌ์ƒ ํ•  ์ˆ˜ ์žˆ๋Š” ์ปจํŠธ๋กค๋Ÿฌ๊ฐ€ ํ‘œ์‹œ๋จ / ์†์„ฑ๋ช…๊ณผ ์†์„ฑ๊ฐ’์ด ๋™์ผํ•œ ๊ฒฝ์šฐ ์†์„ฑ๋ช…(์•ž ๋ถ€๋ถ„)๋งŒ ๋‚จ๊ฒจ๋‘ฌ๋„ ํ™œ์„ฑํ™” ๋œ๋‹ค./ autoplay, muted, loop๋Š” ๋ชจ๋‘ ์†์„ฑ์œผ๋กœ autoplay๋Š” muted์™€ ํ•จ๊ป˜ ์จ์ค˜์•ผ ํ•จ!-->
    <!--poster์€ ์˜์ƒ์˜ ์ธ๋„ค์ผ์„ ๋ณด์—ฌ์ค„ ์ด๋ฏธ์ง€๋ฅผ ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ๋„ฃ๋Š” ๊ฒƒ, ์ธ๋„ค์ผ์ด ๋“ค์–ด๊ฐ€๋ ค๋ฉด control๋กœ ๋˜์–ด ์žˆ์–ด์•ผ ํ•จ-->
    <video controls loop poster="./img/img1.jpg"><!--์˜์ƒ์„ ์ปจํŠธ๋กค๋Ÿฌ ์—†์ด ์›นํ‘œ์ค€ ์ •์ฑ…์ƒ ์Œ์†Œ๊ฑฐ๊ฐ€ ๋œ ์ƒํƒœ์—์„œ๋งŒ ์ž๋™์œผ๋กœ ์žฌ์ƒ๋˜๋„๋ก ํ•˜๋Š” ์—ญํ• ์ด๋ฏ€๋กœ ์˜คํ† ํ”Œ๋ ˆ์ด ๋’ค์— muted(์Œ์†Œ๊ฑฐ)๊ฐ€ ๋ถ™์–ด์•ผ ํ•œ๋‹ค. ๋ฌดํ•œ ์žฌ์ƒ์€ loop๋ฅผ ์ถ”๊ฐ€ / ์˜์ƒ์ด ํด๋ฆญํ•ด๋„ ๋ฉˆ์ถ”์ง€ ์•Š๊ฒŒ ํ•˜๋ ค๋ฉด controls ๋ฅผ ์‚ญ์ œ >> ์ด๋Ÿด ๋•Œ ํ™ˆํŽ˜์ด์ง€ ๋ฐฐ๊ฒฝ์˜์ƒ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.-->
      <source src="./video/video.webm" type="video/webm"><!--์›น์•ฐํŒŒ์ผ์€ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ์–ด์—์„œ ์ฝํžˆ์ง€ ์•Š๋Š”๋‹ค.์ด๋ž˜์„œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒ€์ž…์„ ๊ฐ™์ด ๋„ฃ์–ด์ค˜์•ผ ํ•˜๊ณ  ์ด๋ ‡๊ฒŒ ์ค‘๋ณต์œผ๋กœ ๋„ฃ์–ด๋„ ํ•˜๋‚˜์˜ ์˜์ƒ๋งŒ ๋…ธ์ถœ๋จ-->
      <source src="./video/video.mp4" type="video/mp4"><!--mp4 ํŒŒ์ผ์€ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์žฌ์ƒ๋จ-->
    </video>
    <h1>์œ ํˆฌ๋ธŒ ํƒœ๊ทธ</h1><!--์œ ํŠœ๋ธŒ ์˜์ƒ ๋งˆ์šฐ์Šค ์šฐ์ธก ๋ฒ„ํŠผ - ์†Œ์Šค์ฝ”๋“œ ๋ณต์‚ฌ - ๊ทธ๋Œ€๋กœ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•˜๋ฉด ๋-->
      <iframe width="836" height="470" src="https://www.youtube.com/embed/892XUqlKPH0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </body>
</html>

'IT > HTML&CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] ํƒญ์ œ๋ชฉ_๊ธฐ์ดˆ(2021-08-17)  (0) 2021.11.07
[HTML] ๊ธฐ๋ณธํ”„๋ ˆ์ž„ ๋งŒ๋“ค๊ธฐ(2021-08-17)  (0) 2021.11.07
[HTML] aํƒœ๊ทธ/์†์„ฑ(2021-08-19)  (0) 2021.11.07
[html] ๋ฆฌ์ŠคํŠธ ํƒœ๊ทธ(2021-08-26)  (0) 2021.11.07
[html] ๋ฆฌ์ŠคํŠธ ํ™œ์šฉ(2021-08-26)  (0) 2021.11.07

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”