: ์ด๋ฏธ์ง ์ฝ์ ์์, ์ด๋ฏธ์ง์ ์์ฑ์ ์ด์ฉํ์ฌ ์์ฑ
๐๐ป ์ด๋ฏธ์ง๋ฅผ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ
: visual studio code๋ฅผ ํตํด ์ฐ์ตํด๋ณผ๊ฒ!
(1) ์๋๊ฒฝ๋ก
โฌ ์ด๋ฏธ์ง ํ์ผ ๋ง๋ค๊ธฐ
โฌ ํ์ผ ์์ ์ด๋ฏธ์ง๋ฅผ ์ฝ์ ํด์ฃผ๊ธฐ
(2) ์ ๋๊ฒฝ๋ก
โฌ ์ด๋ฏธ์ง ๊ฒฝ๋ก ๋ณต์ฌ or ๋ค๋ฅธ ์ด๋ฆ์ผ๋ก ์ ์ฅ
( ๊ฐ๋ก์ ๋์ด๋ ๋จ์์๋ ์ ์ / ํ๋๋ง ์ ํด๋ ๋์ด๋ ๊ฐ์ด ์ค์ด๋ ๋ค. )
# ์ด๋ฏธ์ง > ๊ฒ์ฌ > ์ด๋ฏธ์ง ์ฌ์ด์ฆ ํ์ธ ๊ฐ๋ฅ
๐ต ๋๋น ๊ธฐ์ ์ w ๐ต ํฝ์ ๋ฐ๋ ๊ธฐ์ ์ x
#๊ตฌ๊ธ > placehoder.com / 600 (์ฌ์ด์ฆ ํ์ํ ์ด๋ฏธ์ง)
= ์น ๊ฐ๋ฐ์ ์ ์ฉํ๊ฒ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค. / ํน์ ์ฌ์ด์ฆ ์ด๋ฏธ์ง ๋ณผ ์ ์๋ค.
๋ฐ์ํ ์ด๋ฏธ์ง (๋ฏธ๋์ด ์กฐ๊ฑด, ์์ค ํฌ๊ธฐ๊ฐ ๋๊ฐ์ง๋ก ๋๋ ์ง๋ค.)
์ฌ๊ธฐ์ ๋ฏธ๋์ด ์กฐ๊ฑด์์ ๋๊ฐ์ง๋ก ๋ ๋๋์ด ์ดํด ๋ณผ ์ ์๋ค.
min-width์ต์ & max-width ์ต๋
#์ด๋ฏธ์ง > ๊ฒ์ฌ > network ์์ ์ด๋ฏธ์ง ํ์ธ ์ ์ด๋ฏธ์ง ์ฌ์ด์ฆ ๊ณ ์ ์ด ๋์ด ํ์ธ ๊ฐ๋ฅํ๋ค.
: ๋น๋์ค ์ฝ์
์์
: src ๋ ์ ํ์ฌํญ
<video></video>
<sourse scr ="๊ฒฝ๋ก">
(1) video controls : ์์ ์ฌ์ํ์ฌ ํ์ธ์ด ๊ฐ๋ฅํ๋ค
(2) auto play, muted : ๊ฐ์ด ์ฌ์ฉํ๋ฉด ์์๊ฑฐ๊ฐ ๋์ด ์์์ด ์ฌ์๋๋ค.
(3) poster : ์ธ๋ค์ผ ๊ฐ์ ์์๋ผ๊ณ ์๊ฐํ๋ฉด ์ดํดํ๊ธฐ ์ฝ๋ค.
* ํ๋์ ๋ณด๋ HTML ์์(Elements & Attributes) ์ด์ ๋ฆฌ
autoplay ์ค๋น๋๋ฉด ๋ฐ๋ก ์ฌ์
controls ์ ์ด ๋ฉ๋ด๋ฅผ ํ์
loop ์ฌ์์ด ๋๋๋ฉด ๋ค์ ์ฒ์๋ถํฐ ์ฌ์
muted ์์๊ฑฐ ์ฌ๋ถ
poster ๋์์ ์ธ๋ค์ผ ์ด๋ฏธ์ง URL
preload ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ํ์ผ์ ๋ก๋ํ ์ง์ ์ง์ (ํํธ ์ ๊ณต)
src ์ฝํ
์ธ URL
width ๋์์ ๊ฐ๋ก ๋๋น
height ๋์์ ์ธ๋ก ๋๋น
: ๊ฑฐ์ ๋๋ถ๋ถ video์ ๋์ผํ๊ฒ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
<!-- Simple audio playback -->
<audio
src="AudioTest.ogg"
autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
canvas
: ๊ทธ๋ํฝ ์บํผ์ค ์์
: ๊ทธ๋ํฝ๊ณผ animation์ ๊ทธ๋ฆด ์ ์๋ค. (+JS)
โฌ height : ์ขํ ๊ณต๊ฐ์ ๋์ด, CSS ํฝ์
๋จ์๋ก, ๊ธฐ๋ณธ๊ฐ์ 150์
๋๋ค.
โฌ width : ์ขํ ๊ณต๊ฐ์ ๋๋น, CSS ํฝ์
๋จ์๋ก, ๊ธฐ๋ณธ๊ฐ์ 300์
๋๋ค.
iframe
: ์ธ๋ผ์ธ ํ๋์ ์์
: ์ง๋์น ์ฝ์
ํ ๋ ๋ง์ด ์ฌ์ฉํ๋ค.
( โฌ name, src, width, height, allowfullscreen, frameborder, sandbox)