1. ์ด์
ํ์ฌ ๋ธ๋ก๊ทธ๋ gatsby.js๋ฅผ ์ด์ฉํ ํ๋ก์ ํธ์
๋๋ค.๊ฐ ํฌ์คํ
์ ํ๋ฆฌ๋ทฐ ์น์
์์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ wrapper ์์์ border-radius
css ์์ฑ์ ์ ์ฉํ์์๋ webkit์์ง์ ์ฌ์ฉํ๋ safari ๋ธ๋ผ์ฐ์ ์์ ์ ์ฉ์ด ์๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
<GatsbyImage
image={thumbnail}
alt={post.imageAlt}
css={css`
border-radius: 12px;
width: 150px;
`}
/>
2. ์ด์ ์์ธ ๋ถ์
์ฒ์์ vendor prefix ์ ์ฉ์ ์์ฌํ์ต๋๋ค. css-in-js์ ํ๋์ธ emotion์ ์ฌ์ฉํ๊ณ ์์๋๋ฐ, emotion์ ๋ด๋ถ์ ์ผ๋ก auto vendor prefix๋ฅผ ์ง์ํฉ๋๋ค.
border radius๊ฐ ์ ์ฉ์ด ์๋ ๋๋ ์ฌํ๋ฆฌ์์ ์ ์๋ ค์ง ์ค๋๋ ๋ฒ๊ทธ์ด๊ธฐ๋ ํ ์ด์๋ก overflow:hidden
์ผ ๋ border-radius๊ฐ ์ ์ ์ ์ฉ์ด ๋์ง ์๋๊ฑธ๋ก ์๊ณ ์์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ์ด๋ฒ ์ํฉ์์ overflow:hidden
์ ์ ์ฉํ์ง ์์์ต๋๋ค. ํ์ง๋ง
inspector๋ฅผ ๋ค์ ๋ค์ฌ๋ค ๋ณด๋ฉด
GatsbyImage
API ๋ฅผ ์ฌ์ฉ์ data-gatsby-image-wrapper
๋ผ๋ ์๋ฆฌ๋จผํธ๊ฐ ์์ฑ์ด ๋๊ณ ์ด ์๋ฆฌ๋จผํธ๋ overflow: hidden;
์ ์์ฑ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
3. ์ฌ๋ฌ๊ฐ์ง ํด๊ฒฐ๋ฒ.. ์? ์ง์ง ๋ฌธ์ ์ ์์ธ์ ์ฐพ์.
์ด ๋ฌธ์ ์ ๋ํ ํด๊ฒฐ์ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ๋ค์ด ์กด์ฌํฉ๋๋ค.
๋ฐฉ๋ฒ 1.
will-change: transform
์ ์ฉ
๋ฐฉ๋ฒ2.
-webkit-mask-image: -webkit-radial-gradient(white, black);
๋ฐฉ๋ฒ 3.
position: relative;
z-index: 1;
๊ฐ๋จํ๊ฒ ํ์ค๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ ์ ์์ง๋ง, ์ฌ๋ฌ๊ฐ์ง์ ๋ฐฉ๋ฒ ์ค ์ด๋ค ์ ๊ทผ์ด ์ต์ ์ผ๊น? ๊ทธ๋ฆฌ๊ณ ์ ์ด๋ ๊ฒ ์ฌ๋ฌ๊ฐ์ง์ ๋ฐฉ๋ฒ๋ค์ด ์๋ ๊ฒ์ผ๊น?
์ด๋ฐ ์ด์์ ์์ธ์ ์ข ๋ ์์๋ณด๊ธฐ๋ก ํ์ต๋๋ค. ์ด์์ ์์ธ๋ค์ ์ฐพ์ผ๋ฌ ์ฌ๋ฌ article๋ค๊ณผ ๋ต๋ณ๋ค์ ๋ณด๋ฉด stacking context ์ฉ์ด๊ฐ ์ธ๊ธ๋ ๊ฑธ ๊ฐํน ๋ณผ ์ ์์ต๋๋ค.
์ง์ง ๋ฌธ์ ๋ vendor prefix ๊ฐ ์๋ stacking context ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ด ๋ธ๋ผ์ฐ์ ๋ ๋๋ง์์ง์ ๋ฐ๋ผ ๋ค๋ฅด๋ค๋ ๊ฒ๋๋ค. Mozilla ๊ณต์ ๋ฌธ์์ ๋ฐ๋ฅด๋ฉด,
stacking context
a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.
ํด์์ ํด๋ ์ ์๋ฟ์ง๊ฐ ์์ต๋๋ค. ์กฐ๊ธ ๋ ์ฝ๊ฒ ์ดํดํ์๋ฉด, stacking context๋ฅผ ์ดํดํ๋ฉด z-index๋ฅผ ์ดํดํ๊ธฐ๊ฐ ์ฌ์์ง๋๋ค. ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ์์(element)๋ stacking context๋ฅผ ํ์ฑํ๊ฒ ๋๋๋ฐ ์์ ์์๋ค์ด stacking context ์์ ํน์ ๋ฒ์๋ฅผ ๋ฒ์ด๋์ง ๋ชปํ๋๋ก ํ๊ณ๋ฅผ ์ ํ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋์ ์์์์๋ค์ด z-index๋ฅผ ์๋ฌด๋ฆฌ ๋ง์ ์ซ์๋ก ์ง์ ํ๋๋ผ๋ ์์ ์์๋ณด๋ค ๋ ์์ ๋์ฌ ์ ์์ต๋๋ค.
์คํ ์ปจํ ์คํธ๋ ๋ฌธ์์ ์ด๋ ์์น์์๋ ๋ค์ ์๋๋ฆฌ์ค์ ์์์ ์ํด ํ์ฑ๋ฉ๋๋ค.
- opacity ๊ฐ์ด 1์ดํ ์ผ ๋,
- mix-blend-mode ๊ฐ์ด normal์ด ์๋ ๋ค๋ฅธ๊ฐ ์ผ ๋,
- transform,filter, perspective, clip-path,mask / mask-image / mask-border ์ ๊ฐ์ด non์ด ์๋ ๋ค๋ฅธ ๊ฐ๋ค์ผ ๋
- isolation ์์ฑ์ ๊ฐ์ด isolate ์ผ ๋
- -webkit-overflow-scrolling์ ๊ฐ์ด touch ์ผ ๋.
- will-change ์์ฑ์ ๊ฐ์ค initial value๊ฐ ์๋ ๊ฐ ์ผ ๋.
- contain ๊ฐ์ด layout or paint ์ผ ๋. ๋๋ ๋ ์ค ํ๋๋ฅผ ํฌํจํ๋ ๋ณตํฉ ๊ฐ(์ฆ contain: strict, contain: content)์ ๋๋ค.
์ฐธ๊ณ ์๋ฃ MDN: Stacking context
๊ฒฐ๊ตญ Safari ์์ง์ stacking context ์ฒ๋ฆฌ ๋ฌธ์ ๋ z-index๋ฅผ ์ ์งํ์ง ์๋๋ค๋ ๊ฒ์ด๊ณ ์๋ก์ด stacking context๋ฅผ overflow๊ฐ ์ ์ฉ๋ ์์์ ๋ง๋ค์ด์ค๋๋ค.
5. ํด๊ฒฐ ๋ฐฉ๋ฒ
์์์ ์ธ๊ธํ stacking context๋ฅผ ํ์ฑํ๋ ๋ฐฉ๋ฒ๋ค ์ค ํ๊ฐ์ง๋ฅผ ์ ์ฉํด ๋ด ๋๋ค. z-index๋ฅผ ์ ์ฉํด ๋ณด์์ต๋๋ค.
<GatsbyImage
image={thumbnail}
alt={post.imageAlt}
css={css`
border-radius: 12px;
z-index:1
`}
/>
๋ค๋ฅธ ์์ฑ์ ์ถ๊ฐํด๋ ์๋ก์ด stacking์ด ๋ง๋ค์ด์ง๋๋ค. ๋ค๋ฅธ ๋ถ๋ค์ ์ด๋จ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ ์ ๊ฒฝ์ฐ๋ ์คํ ์ปจํ ์คํธ๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ๋ ์ด์ด๊ฐ ์ถ๊ฐ๋์์ต๋๋ค. ์์ ๋ถ๋ถ์ ๊ฐ ํฌ์คํ ๋ง๋ค ์ ์ฉ๋ ์ด๋ฏธ์ง๋ก ํฌ์คํ ์ ๊ฐ์๋งํผ ํ ํ์ด์ง์ ํฌ์คํ ๊ฐ์๋งํผ ์ถ๊ฐ ๋ ๊ฑธ ๋ณผ ์ ์์ต๋๋ค.
โ๏ธ ์ฃผ์ํ ์ ๋๋ฌด ๋ง์ ์์์
will-change
๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํจํฐ์ ์ถ๊ฐ ๋ฆฌ์์ค ์๋น๊ฐ ๋ฐ์ํ์ฌ ํ์ด์ง๋ก๋ ์๋๊ฐ ๋๋ ค์ง๋๋ค.
์ฐธ๊ณ ์๋ฃ