이런 갤러리 스킨은 어떻게 만드나요?

2009389905_1666717209.0337.webp 2009389905_1666717215.5563.webp

Copy

<style>
ul.wrap {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

ul.wrap li:nth-child(even) img {
    -webkit-mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/f/f2/Pink_triangle.png/revision/latest/scale-to-width-down/200?cb=20220402114300);
    mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/f/f2/Pink_triangle.png/revision/latest/scale-to-width-down/200?cb=20220402114300);
}

ul.wrap li:nth-child(odd) img {
    -webkit-mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/1/14/Pink_triangle_up.png/revision/latest/scale-to-width-down/200?cb=20220402114320);
    mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/1/14/Pink_triangle_up.png/revision/latest/scale-to-width-down/200?cb=20220402114320);
}
</style>

<ul class="wrap">
    <li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
    <li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
    <li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
    <li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
</ul>

이런 갤러리 스킨은 어떻게 만드나요?

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

이런 갤러리 스킨은 어떻게 만드나요?

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

공유하기