21๋
11์ 25์ผ
๐ Sass
๐ ๋ฏธ๋์ด์ฟผ๋ฆฌ
๐ ์กฐ๊ฑด๋ฌธ
๐ ๋ฐ๋ณต๋ฌธ
๐ ํจ์
์ฐธ๊ณ ๋งํฌ
๐ CSS
float
์ flex-container ์์์ ์ ์ฉ๋์ง ์๋๋ค.
- flex-container์๋
float
์ ์ฉ ๊ฐ๋ฅ
- flex-item์ ์์ ์์์
float
์ ์ฉ ๊ฐ๋ฅ
์ธ๋ผ์ธ ๋ ๋ฒจ ์์์ position
์์ฑ์ ์ ์ฉ
- ๋ธ๋ก ๋ ๋ฒจ ์์๊ฐ ๋๋ค.
- ํ์ง๋ง
width: 100%
์ ์์ฑ์ ์๋๋ค. (์ธ๋ผ์ธ-๋ธ๋ก์ฒ๋ผ)
border
์ ์์ฑ
border
์ ์์ฑ๋ง์ผ๋ก ๋ฑ์ง ๋ชจ์, ์ผ๊ฐํ ๋ชจ์์ ์ด๋ฏธ์ง๊ฐ ์๋ css ๋ก ๋ง๋ค ์ ์๋ค.
border - MDN
๐ ์ฝ๋ ๋ฆฌ๋ทฐ & ํจ๊ป ์ฝ๋ ์์ฑ - select box custom
๐ ๋ฐ์ํ ์ปจํ
์ธ ๋ง๋ค๊ธฐ - ์ด๋ฏธ์ง
์ด๋ฏธ์ง ํฌ๋งท
gif
: 256์์ ์ปฌ๋ฌ๋ง ํํ ๊ฐ๋ฅ, ์ ๋ช
ํ์ง ์์ง๋ง ์ฉ๋์ด ์ ๋ค. ํฌ๋ช
ํํ ๊ฐ๋ฅํ์ง๋ง ๊ทธ ์ ๋๋ฅผ ์กฐ์ ํ๋ ๊ฑด ๋ถ๊ฐ๋ฅ(๊ทธ๋ฆผ์ ํํ ๋ถ๊ฐ๋ฅ), ์ ๋๋ฉ์ด์
์ฒ๋ฆฌ ๊ฐ๋ฅ
jpg
/jpeg
: ํ์๊ฐ ๋งค์ฐ ๋๊ณ , ์ฉ๋ ์ ์ง๋ง ํฌ๋ช
์ฒ๋ฆฌ ๋ถ๊ฐ๋ฅ
png
: ๋๋ถ๋ถ์ ์ปฌ๋ฌ ๋ชจ๋ ํํ ๊ฐ๋ฅ, ํฌ๋ช
์์ญ ์ฒ๋ฆฌ ๊ฐ๋ฅํ์ง๋ง ์ฉ๋์ด ํผ
svg
: svg
ํ์์ ๋ฒกํฐ ์ด๋ฏธ์ง๋ ์์ค์ด๋ ํ์ง ์ ํ์์ด ๋ชจ๋ ํฌ๊ธฐ์์ ๋ ๋๋ง ๊ฐ๋ฅ
๋ฐ์ํ ์ด๋ฏธ์ง ๋ง๋ค๊ธฐ
width: 100%
max-width: 100%
๐ ๋ฐ์ํ ์ปจํ
์ธ ๋ง๋ค๊ธฐ - ๋ฐฑ๊ทธ๋ผ์ด๋ ์ด๋ฏธ์ง
backgroud-size
์์ฑ
background-size: px
: ์ด๋ฏธ์ง์ ํฌ๊ธฐ ๊ณ ์
background-size: auto
: ์ด๋ฏธ์ง์ ์ข
ํก๋น๋ฅผ ํตํด ์๋์ผ๋ก ๋ค๋ฅธ ์ถ์ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์
background-size: %
: %๋ฅผ ์ฌ์ฉํ๋ฉด ์ปจํ
์ด๋์ ๋์ด์ ๋น๋กํ๋๋ก ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ๊ฐ๋ฅ
background-size: contain
: ์ปจํ
์ด๋ ์ ์ฒด๋ฅผ ๋ฎ์ง๋ง ์ด๋ฏธ์ง๋ฅผ ์๋ฅด์ง ์๊ฒ ์ ์ง
=> ๊ธฐํ ๋จ๊ณ์์ ์ด๋ฏธ์ง๊ฐ ์๋ ค๋ ๋ ๊ฒฝ์ฐ ์ฌ์ฉ ๊ฐ๋ฅ
background-size: cover
์ปจํ
์ด๋ ์ ์ฒด๋ฅผ ์์ ํ ๋ฎ์
=> ์ด๋ฏธ์ง๊ฐ ์๋ฆฌ๋ฉด ์๋๊ฑฐ๋, ๋ฐฐ๊ฒฝ์๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ์ ์ด์ฐ๋ฌ์ง๋ ๊ฒฝ์ฐ ๋๋ ์ํ๊ฐ์ด ์๋ ์ด๋ฏธ์ง์ ์ฌ์ฉ ๊ฐ๋ฅ
๋ฐ์ํ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ด๋ฏธ์ง ๋ง๋ค๊ธฐ
background: url("...") center /cover no-repeat;
๐ ๋ฐ์ํ ์ปจํ
์ธ ๋ง๋ค๊ธฐ - ๋์์
- ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํ๋ ๋น๋์ค ํฌ๋งท - MDN
<vided>
์์ฑ
autoplay
: ์๋ ์ฌ์ ์ง์
=> ํฌ๋กฌ, ํ์ด์ดํญ์ค์์๋ muted
์์ฑ์ด ์์ผ๋ฉด autoplay
๊ฐ ์ ์ฉ๋์ง ์๋๋ค.
controls
: ์ฌ์ฉ์๊ฐ ๋น๋์ค ์ฌ์์ ์ ์ดํ ์ ์๋ ์ปจํธ๋กค๋ฌ ์ ๊ณต ์ง์
loop
: ๋น๋์ค์ ๋ฐ๋ณต ์ฌ์ ์ง์
muted
: ์๋ฆฌ ์์๊ฑฐ ์ง์
preload
: ํ์ด์ง๋ฅผ ๋ก๋ํ ๋, ์์์ ๋ฏธ๋ฆฌ ๋ก๋ํ ์ง ๋ง์ง ๊ฒฐ์
poster
: ๋น๋์ค๋ฅผ ๋ด๋ ค๋ฐ์ ๋์ ๋๋ ์์์ ์ฌ์ํ ๋๊น์ง ํ์ํ ์ด๋ฏธ์ง ์ง์
<video autoplay controls loop src="next_level.mp4"></video>
<iframe class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>
๋ฐ์ํ ๋์์ ๋ง๋ค๊ธฐ
<article class="cont-video">
<iframe class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>
</article>
.cont-video {
position: relative;
padding-top: 56.25%;
}
.video-next-level {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
๋ง๋ฌด๋ฆฌ
- ์์์์์ TIL ๋ฐ๋ฆฌ๊ณ ์๋ค์์์
=> ์ฃผ๋ง์ ๋ ํ์ดํ
์์์์ฅ!!!!!!