๐ HTML,CSS
๋ค๋ฆ๊ฒ ์์์ ๋ผ์ํ ์ ์ฉํ CSS : webkit-box
์ฌํ๊น์ง ์ฌ๋ฌ์ค ํ ์คํธ๋ฅผ overflow hiddenํ๊ธฐ ์ํด max-height๋ฅผ ์ค์ ํ๋ ๋ป์ง๊ฑฐ๋ฆฌ๋ฅผ ํด์๋ค. ๋ฐ์ํ์์๋ ์ฌ์ง์ด ๊ตฌ๊ฐ๋ณ๋ก ๋ฐ๊ฟ์ฃผ๊ธฐ๊น์ง ํ๋๋ฐ.. ๋ฌธ๋ ๊ทธ๋ฐ css๊ฐ ์์๋ฆฌ ์๋ค๋ ์๊ฐ์ด ๋ค์๋ค. ์ญ์๋.. ๋ฐ๋ก ๋์๋ค. ใ ใ .example p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } ํธํ์ฑ : ์ ๋ถ ๊ฐ๋ฅ
์ฌํ๊น์ง ๊ณ ์ณ์จ ์ค๋ฅ๋ค : ์ฌํ๋ฆฌ video๊ฐ ์๋ณด์ธ๋ค/์ฌ์๋ ์ ๋๋ค
์ฌํ๋ฆฌ์์ videosํ๊ทธ๋ก ๊ฑธ์ด๋ video๊ฐ ์ ๋ณด์ด๋(์ ํํ๋ ์ฌ์๋ฒํผ๋ง ํ๊ณต์ ๋ ์๋) ๊ฒฝ์ฐ๊ฐ ์๋ค. ๋ฒํผ์ ๋๋ฌ๋ ์ฌ์๋์ง ์๋๋ฐ, ์ด ๊ฒฝ์ฐ ํ์ฅ์๊ฐ webm์ธ์ง ํ์ธํด๋ณด์. ์ฌํ๋ฆฌ๋ webm ํ์ฅ์๋ฅผ ๋ชป ์ฝ๋ ๋ฏ ํ๋ค. + ์ฌํ๋ฆฌ์์๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ปฌ๋ฌ๋ฅผ ์ง์ ํด์ค์ผ ์ฌ์๋ฒํผ์ด ํ๊ณต์ ๋ฅ๋ฅ ๋ ์์ง ์๋ค. background-image๋ก๋ ํ์ฉํด ๋ณผ ์ ์์ ๋ฏ ํ๋ค..
๊ธฐํ ์์ฃผ ์ฐ๋ CSS : background ํฌ๋ช ๋ธ๋ฌ ๋ฃ๊ธฐ
background-color: #193988a6; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
๊ธฐํ ์์ฃผ ์ฐ๋ CSS : ์คํฌ๋กค๋ฐ ๊ฐ๋ฆฌ๊ธฐ
๋ธ๋ผ์ฐ์ ์์ฒด์์ ์ ๊ณตํ๋ ์คํฌ๋กค๋ฐ๋ฅผ ๊ฐ๋ ค๋ฌ๋ผ๊ณ ํ๊ฑฐ๋, ๊ฐ๋ ค์ง ์คํฌ๋กค๋ฐ๋ฅผ ๋ณด์ด๋๋ก ํ์ด๋ฌ๋ผ๋ ์์ฒญ์ด ์๋ค. html::-webkit-scrollbar {width:0; height:0; background:none;}
์ฌํ๊น์ง ๊ณ ์ณ์จ ์ค๋ฅ๋ค : ๋๋์คํ์ด 16px ์๋์์ ๊นจ์ง
๋๋์คํ์ด 16px ์๋์์ ๊นจ์ง 16px ์๋๋ก ๋๋์คํ์ด ์ฌ์ฉ์์ ์๋ css๋ฅผ ์ถ๊ฐํด์ฃผ์. div {transform: skew(-0.03deg);}
์ฌํ๊น์ง ๊ณ ์ณ์จ ์ค๋ฅ๋ค : ์ฌํ๋ฆฌ fixed ์์ ๋ ๋ผ๊ฐ๋ ๋ฌธ์ (ํ๋ฒ๊ฑฐ๋ซ๊ธฐ๋ฒํผ ๋ฑ)
์ฌํ๋ฆฌ fixed ์์ ๋ ๋ผ๊ฐ๋ ๋ฌธ์ ์ฌํ๋ฆฌ๋ ์์ธ์ง fixed๋ ์ค๋ฅ๊ฐ ๋๋ค. 1. ์ผ๋จ์ position: absolute๋ก ๋์ฒดํ ์ ์๋์ง ์๋ํด๋ณด์. 2. ๋์ฒดํ ์ ์๋ ๊ฒฝ์ฐ์ ์๋ css๋ฅผ ์๋ํด๋ณด์. (์๋ํด๋ณธ ์ ์์ผ๋ ์๋ ๋ฐฉ๋ฒ์ผ๋ก ์ฑ๊ณตํ ์ฌ๋์ด ์๋ค๊ณ ํ๋ค) div { position: fixed; z-index: 999999999; transform: translateZ(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; /* seems to ..