CSS 마스킹 - mask
안녕하세요, 미래의 CSS 마스터 여러분! 오늘은 CSS 마스킹의 fascineting 세계로 창nat가 갈 테니. 마법사가 되어 webpage의 일부를 사라지게 하거나 흥미로운 방식으로 나타내고 싶은 상상을 해보세요. CSS 마스킹이 바로 그런 일을 가능하게 해줍니다! 그러니 마법사 모자를 쓰고 CSS 트릭을 배우러 가보겠습니다!
CSS 마스킹이란?
CSS 마스킹은 webpage 요소에 투명한 스텐실을 사용하는 것과 같습니다. 다른 이미지나 형태에 따라 요소의 일부를 숨기거나 부분적으로 보여줄 수 있습니다. 정말 강력한 기술로, 매우 멋진 효과를 만들 수 있습니다!
가능한 값
코딩을 시작하기 전에 mask 속성을 사용할 수 있는 다양한 값을 살펴보겠습니다. 이들은 마법 지팡이와 같은 것으로, 각각 독특한 효과를 만들어줍니다:
| 값 | 설명 |
|---|---|
| none | 마스킹이 적용되지 않음 |
<mask-reference> |
마스크 이미지를 참조 |
<masking-mode> |
마스크가 어떻게 적용되는지 결정 |
<position> |
마스크의 위치 설정 |
<bg-size> |
마스크의 크기 정의 |
<repeat-style> |
마스크가 반복되는 방식 지정 |
<geometry-box> |
마스크 상자 정의 |
| no-clip | 마스크를 자르지 않음 |
이제 이 것들이 혼란스러울 수 있지만, 예제를 통해 하나씩 탐구해보겠습니다!
적용 대상
mask 속성은 모든 요소에 적용할 수 있습니다. 마법 지팡이가 모든 것에 작동하는 것과 같아요!
문법
mask 속성의 기본 문법은 다음과 같습니다:
.element {
mask: <value>;
}이제 각 값을 자세히 살펴보겠습니다.
CSS mask - none 값
none 값은 간단합니다. 마스킹이 적용되지 않습니다. 마법 지팡이를 사용하지 않는 것과 같습니다.
.no-mask {
mask: none;
}이 코드는 브라우저에게 "이 요소에 마스크를 적용하지 마세요."라고 말합니다.
CSS mask - <mask-reference>
이제 진짜 마법이 시작됩니다! <mask-reference>는 요소의 일부를 보이게 하거나 숨기는 이미지나 CSS 그래디언트를 정의합니다.
.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}
.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}이 예제에서 우리는 이미지 파일 ('mask.png') 또는 라인 그래디언트를 마스크로 사용하고 있습니다. 마스크의 검은 부분은 요소를 보이게 하고, 투명한 부분은 숨깁니다.
CSS mask - <masking-mode>
마스킹 모드는 마스크가 어떻게 적용되는지 결정합니다. 두 가지 값이 있습니다: alpha와 luminance.
.alpha-mask {
mask-mode: alpha;
}
.luminance-mask {
mask-mode: luminance;
}-
alpha: 마스크 이미지의 알파 채널을 사용합니다. -
luminance: 마스크 이미지의 밝기를 사용합니다.
CSS mask - <position>
배경 이미지와 마찬가지로 마스크의 위치를 설정할 수 있습니다:
.positioned-mask {
mask-position: center;
/* 또는 */
mask: url('mask.png') center;
}이는 마스크를 요소의 중앙에 배치합니다. 여기에는 유효한 CSS 위치 값을 사용할 수 있습니다.
CSS mask - <bg-size>
마스크의 크기를 제어할 수도 있습니다:
.sized-mask {
mask-size: cover;
/* 또는 */
mask: url('mask.png') cover;
}이는 마스크를 전체 요소를 덮도록 합니다. 특정 크기 like 100px 200px을 사용할 수도 있습니다.
CSS mask - <repeat-style>
마스크가 요소보다 작다면, 반복 방식을 제어할 수 있습니다:
.repeating-mask {
mask-repeat: repeat-x;
/* 또는 */
mask: url('mask.png') repeat-x;
}이는 마스크를 수평으로 반복합니다.
CSS mask - <geometry-box>
기하 상자는 마스크가 덮는 영역을 정의합니다:
.box-mask {
mask-clip: padding-box;
/* 또는 */
mask: url('mask.png') padding-box;
}이는 마스크를 요소의 패딩 상자에 적용합니다.
CSS mask - <geometry-box> | no-clip
no-clip 값은 마스크를 요소의 경계로 자르지 않습니다:
.no-clip-mask {
mask-clip: no-clip;
/* 또는 */
mask: url('mask.png') no-clip;
}이는 마스크가 요소의 경계를 넘어 확장할 수 있게 합니다.
CSS mask - 관련 속성
mask와 관련된 여러 속성이 더 많은 제어를 제공합니다:
| 속성 | 설명 |
|---|---|
| mask-image | 마스크 이미지 지정 |
| mask-mode | 마스킹 모드 설정 |
| mask-repeat | 마스크 반복 방식 제어 |
| mask-position | 마스크 위치 설정 |
| mask-clip | 마스크의 그림 그리는 영역 결정 |
| mask-origin | 마스크의 원점 설정 |
| mask-size | 마스크 크기 지정 |
| mask-composite | 마스크를 결합하는 방법 정의 |
이 각 속성은 짧은 형태 mask 속성의 일부에 해당합니다.
그리고 여기 있습니다, 젊은 CSS 마법사 여러분! CSS 마스킹의 기본을 배웠습니다. 마법 트릭을 마스터하는 것처럼, CSS 마스킹을 숙달하려면 연습이 필요합니다. 그러니 실험을 두려워하지 말고 자신만의 마법스러운 웹 디자인을 만들어보세요!
제 경험에서, 가장 좋은 학습 방법은 하면서 배우는 것입니다. 그래서 재미있는 연습을 하나 드릴 테니: 그라디언트 마스크를 사용하여 이미지에 "reveal" 효과를 만들어보세요. 마우스를 올리면 이미지가 완전히 보이게 만드는 것입니다. 마치 커튼을 걷고 숨겨진 그림을 보이는 것과 같아요!
기쁜 코딩을 하시고, 마스크가 항상 완벽하게 맞춰지기를 바랍니다!
Credits: Image by storyset