CSS Masking
CSS Masking: 이미지와 요소에 마스크 효과 적용하기
CSS Masking은 이미지나 요소에 **마스크(mask)**를 적용하여 특정 부분만 표시되도록 만드는 효과를 제공합니다. 이는 그래픽 디자인에서 많이 사용되며, 클리핑과 마스킹을 통해 다양한 시각적 효과를 만들어낼 수 있습니다. **마스킹(Masking)**은 요소의 일부분을 가려 숨기거나, 특정 모양을 만들어내는 데 매우 유용합니다.
1. CSS Masking의 기본 개념
마스크는 이미지를 사용하여 다른 이미지나 요소의 일부를 숨기고 나머지 부분만 보이도록 만듭니다. 이를 통해 복잡한 모양을 표현하거나, 특정 영역만 강조할 수 있습니다.
CSS에서 마스크는 주로 다음 두 가지 속성으로 처리됩니다:
mask: 요소에 마스크를 적용하는 속성.clip-path: 요소의 특정 부분만 보이게 하는 클리핑 경로를 정의하는 속성.
2. mask 속성
mask 속성은 이미지를 사용하여 특정 영역만 보이도록 가리는 효과를 만듭니다. 마스크로 사용할 이미지는 흑백
이미지를 사용하는데, 검은색은 완전히 숨겨지고, 흰색은 완전히 보이며, 중간 회색은 투명도를 조정하는 방식으로 동작합니다.
기본 구문
element {
mask: url(mask-image.png);
}
url(): 마스크로 사용할 이미지 파일 경로를 지정합니다.
예시: 마스크 이미지 적용
<div class="masked-box">
<img src="example-image.jpg" alt="Example Image">
</div>
.masked-box {
width: 300px;
height: 300px;
mask: url(mask-shape.png);
-webkit-mask: url(mask-shape.png); /* 웹킷 브라우저 지원 */
}
이 코드는 mask-shape.png 이미지를 마스크로 적용하여, 마스크 이미지의 흰색 부분만 이미지가 보이도록 설정합니다.
3. mask 속성의 세부 설정
mask 속성은 여러 가지 속성을 포함하여 더 세부적으로 마스크 효과를 조정할 수 있습니다.
1) mask-position
mask-position 속성은 마스크 이미지의 위치를 설정합니다.
element {
mask-position: 50% 50%; /* 중앙 정렬 */
}
2) mask-size
mask-size 속성은 마스크 이미지의 크기를 설정합니다. **contain**과
cover 값 등을 사용해 조정할 수 있습니다.
element {
mask-size: cover;
}
3) mask-repeat
mask-repeat 속성은 마스크 이미지를 반복할지 여부를 설정합니다.
element {
mask-repeat: no-repeat;
}
4. clip-path 속성
- *
clip-path*는 요소의 일부 영역만 보이도록 잘라내는 효과를 제공합니다. 특정 경로(path)를 지정하여 요소를 자르거나, 기하학적인 모양을 만들어낼 수 있습니다.
기본 구문
element {
clip-path: shape;
}
- shape: 요소를 자를 모양(예: 원형, 다각형)을 지정합니다.
주요 clip-path 값
circle(): 원형으로 자릅니다.ellipse(): 타원형으로 자릅니다.polygon(): 다각형으로 자릅니다.inset(): 사각형 모양으로 자릅니다.
예시: 원형으로 자르기
.circle {
width: 300px;
height: 300px;
background-image: url('example-image.jpg');
clip-path: circle(50%);
}
이 코드는 이미지를 원형으로 잘라서 보여줍니다.
예시: 다각형으로 자르기
.polygon {
width: 300px;
height: 300px;
background-image: url('example-image.jpg');
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
이 코드는 이미지를 다이아몬드 모양으로 잘라 보여줍니다.
5. clip-path와 mask 함께 사용하기
mask와 clip-path는 서로 보완적으로 사용될 수 있습니다. **clip-path**는 주로 단순한 기하학적
모양을 잘라내는 데 사용되고, **mask**는 이미지를 기반으로 보다 복잡한 형태를 잘라내는 데 적합합니다.
예시: mask와 clip-path 결합
.combined {
width: 300px;
height: 300px;
background-image: url('example-image.jpg');
clip-path: circle(50%);
mask: url('mask-shape.png');
}
이 코드는 이미지를 원형으로 자르고, 동시에 마스크 이미지를 사용해 특정 영역만 표시합니다.
6. 실전 예시: 텍스트 마스킹 효과
마스킹은 이미지뿐만 아니라 텍스트에도 적용할 수 있습니다. 텍스트에 이미지 패턴을 적용하여 독특한 효과를 만들 수 있습니다.
예시: 텍스트에 이미지 마스크 적용
<h1 class="masked-text">Masked Text</h1>
.masked-text {
font-size: 100px;
font-weight: bold;
background: url('text-mask-image.jpg');
-webkit-background-clip: text;
color: transparent;
}
이 코드는 텍스트에 이미지 마스크를 적용하여, 텍스트가 이미지 패턴으로 채워지는 효과를 만듭니다.
7. 실전 예시: 이미지 갤러리에서 마스킹 사용
예시: 이미지에 다양한 모양의 마스킹 적용
<div class="gallery">
<div class="image-mask circle"></div>
<div class="image-mask polygon"></div>
<div class="image-mask star"></div>
</div>
.gallery {
display: flex;
gap: 20px;
}
.image-mask {
width: 200px;
height: 200px;
background-image: url('example-image.jpg');
background-size: cover;
}
.circle {
clip-path: circle(50%);
}
.polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
이 코드는 이미지에 다양한 마스크 모양을 적용하여 원형, 다각형, 별 모양으로 자른 이미지를 보여줍니다.
CSS Masking은 마스크와 클리핑을 통해 웹 요소를 창의적으로 디자인할 수 있는 강력한 도구입니다.
**mask**는 복잡한 이미지를 사용하여 특정 영역을 숨기거나 표시하는 데 유용하고, **clip-path**는 간단한 기하학적 모양으로 요소를 잘라내는 데
사용됩니다. 이 두 속성을 활용하면 웹 페이지에 독특한 시각적 효과를 적용할 수 있으며, 반응형 디자인에서도 유용하게 사용됩니다.