Zoeeey
Stack flows in you
Zoeeey
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (155)
    • ๐Ÿ’ก UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • ๐ŸŸจ JavaScript (66)
      • ๊ฐœ๋… (42)
      • ์ •๋ฆฌ (2)
      • ๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ) (15)
      • ์‘์šฉํ•˜์—ฌ ์ž๋™ํ™”or๋ฌธ์ œํ•ด๊ฒฐํ•˜๊ธฐ (2)
      • ๊ธฐํƒ€ (5)
    • โš›๏ธ React (49)
      • ๊ฐœ๋… (27)
      • ๊ฐœ๋…(Redux) (3)
      • ์ •๋ฆฌ (4)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ: React) (15)
    • ๐Ÿ“˜ TypeScript (10)
      • ๊ฐœ๋… (8)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ) (2)
    • ๐ŸŒ HTML,CSS (18)
      • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค (10)
      • ๋’ค๋Šฆ๊ฒŒ ์•Œ์•„์„œ ๋ผˆ์•„ํ”ˆ ์œ ์šฉํ•œ CSS (6)
      • ๊ธฐํƒ€ ์ž์ฃผ ์“ฐ๋Š” CSS (2)
    • ๐Ÿ’ป CS (8)
      • CS (5)
      • ์ •๊ทœํ‘œํ˜„์‹ (2)
      • Git,Github (1)

ํƒœ๊ทธ

  • ์‚ผํ•ญ์—ฐ์‚ฐ์ž
  • axios
  • class
  • JavaScript
  • object
  • json
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • redux
  • CS
  • useEffect
  • state
  • react
  • array
  • TypeScript
  • Props
  • ์ฝ”๋”ฉ์• ํ”Œ
  • Ajax
  • UXUI
  • CSS
  • ์˜ค๋ฅ˜
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
hELLO ยท Designed By ์ •์ƒ์šฐ.
Zoeeey

Stack flows in you

๐ŸŒ HTML,CSS/์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค

์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ video๊ฐ€ ์•ˆ๋ณด์ธ๋‹ค/์žฌ์ƒ๋„ ์•ˆ ๋œ๋‹ค

2022. 7. 25. 13:51

์‚ฌํŒŒ๋ฆฌ์—์„œ videosํƒœ๊ทธ๋กœ ๊ฑธ์–ด๋‘” video๊ฐ€ ์•ˆ ๋ณด์ด๋Š”(์ •ํ™•ํžˆ๋Š” ์žฌ์ƒ๋ฒ„ํŠผ๋งŒ ํ—ˆ๊ณต์— ๋– ์žˆ๋Š”) ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ๋„ ์žฌ์ƒ๋˜์ง€ ์•Š๋Š”๋ฐ, ์ด ๊ฒฝ์šฐ ํ™•์žฅ์ž๊ฐ€ webm์ธ์ง€ ํ™•์ธํ•ด๋ณด์ž. ์‚ฌํŒŒ๋ฆฌ๋Š” webm ํ™•์žฅ์ž๋ฅผ ๋ชป ์ฝ๋Š” ๋“ฏ ํ•˜๋‹ค.

+ ์‚ฌํŒŒ๋ฆฌ์—์„œ๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ปฌ๋Ÿฌ๋ฅผ ์ง€์ •ํ•ด์ค˜์•ผ ์žฌ์ƒ๋ฒ„ํŠผ์ด ํ—ˆ๊ณต์— ๋‘ฅ๋‘ฅ ๋– ์žˆ์ง€ ์•Š๋‹ค. background-image๋กœ๋„ ํ™œ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์„ ๋“ฏ ํ•˜๋‹ค..

<div style="background-color: #ddd;">
    <video class="video" id="myVideo" controls="" playsinline="">
        <source src="../video/video.mp4" type="video/mp4">
    </video>
</div>

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐ŸŒ HTML,CSS > ์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์–ด๋А ์ƒํ™ฉ์—์„œ๋„ 100%๋กœ ๋ณด์ด๋Š” ๋น„๋””์˜ค BG ๋งŒ๋“ค๊ธฐ  (0) 2022.12.16
์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ ์ˆซ์ž(์ „ํ™”๋ฒˆํ˜ธํ˜•ํƒœ) css๊ฐ€ ์•ˆ๋จนํžˆ๋Š” ๋ฌธ์ œ  (0) 2022.12.09
์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ๋‚˜๋ˆ”์Šคํ€˜์–ด 16px ์•„๋ž˜์—์„œ ๊นจ์ง  (0) 2022.07.19
์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ fixed ์š”์†Œ ๋‚ ๋ผ๊ฐ€๋Š” ๋ฌธ์ œ (ํ–„๋ฒ„๊ฑฐ๋‹ซ๊ธฐ๋ฒ„ํŠผ ๋“ฑ)  (0) 2022.07.19
์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ table ๋ฐ˜์‘ํ˜• ์‹œ th/td 100% ์•ˆ๋˜๋Š” ๋ฌธ์ œ  (0) 2022.07.19
    '๐ŸŒ HTML,CSS/์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์–ด๋А ์ƒํ™ฉ์—์„œ๋„ 100%๋กœ ๋ณด์ด๋Š” ๋น„๋””์˜ค BG ๋งŒ๋“ค๊ธฐ
    • ์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ ์ˆซ์ž(์ „ํ™”๋ฒˆํ˜ธํ˜•ํƒœ) css๊ฐ€ ์•ˆ๋จนํžˆ๋Š” ๋ฌธ์ œ
    • ์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ๋‚˜๋ˆ”์Šคํ€˜์–ด 16px ์•„๋ž˜์—์„œ ๊นจ์ง
    • ์—ฌํƒœ๊นŒ์ง€ ๊ณ ์ณ์˜จ ์˜ค๋ฅ˜๋“ค : ์‚ฌํŒŒ๋ฆฌ fixed ์š”์†Œ ๋‚ ๋ผ๊ฐ€๋Š” ๋ฌธ์ œ (ํ–„๋ฒ„๊ฑฐ๋‹ซ๊ธฐ๋ฒ„ํŠผ ๋“ฑ)
    Zoeeey
    Zoeeey
    ๊ธธ๊ฒŒ ์ƒ๊ฐํ•˜๊ณ  ์งง๊ฒŒ ๊ทธ๋ฆฌ๊ธฐ

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