워터마크

워터마크 (Watermark)

출처: 문서

본문

페이지에 특정 텍스트나 패턴을 추가해 주는 컴포넌트예요. 민감한 화면에 소유권이나 신원을 표시할 때 유용하죠.

기본 사용법 ​

가장 기본적인 형태예요. 별다른 설정 없이도 콘텐츠 영역 위에 워터마크가 그려져요.

여러 줄 워터마크 ​

content에 문자열 배열을 넘기면 여러 줄로 된 텍스트 워터마크를 지정할 수 있어요.

이미지 워터마크 ​

image 속성에 이미지 주소를 지정해서 이미지 워터마크를 쓸 수 있어요. 이미지가 고해상도로 유지되고 늘어나지 않게 하려면 width와 height를 설정하고, 로고 이미지 주소의 가로·세로 2배 이상 크기로 업로드하는 걸 권장해요.

커스텀 설정 ​

파라미터를 직접 조절하면서 워터마크 효과를 미리 볼 수 있어요. Content, Color, FontSize, zIndex, Rotate, Gap, Offset 값을 바꿔가며 확인해 보세요.

.wrapper {
  display: flex;
}
.watermark {
  display: flex;
  flex: auto;
}
.watermark-container {
  flex: auto;
}
.form {
  width: 330px;
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}

API ​

Attributes ​

Font ​

Slots ​

더 알아보기 (Learn more)