[css] 고급 CSS (skew, background-attachment, mask-image)

고급 CSS 파헤치기

skew

• 요소를 지정된 각도만큼 기울여서 시각적인 왜곡 효과 생성.
• 주로 인터랙션 강조나 디자인 요소로 활용. transform 속성의 함수 중 하나

원리

• 좌표 평면 상에서 각 축을 기준으로 점들의 위치를 변환.

속성

• skewX()
  • X축을 따라 기울임,
• skewY()
  • Y축을 따라 기울임.
• skew(ax, ay)
  • X축으로 ax 각도, Y축으로 ay 각도만큼 동시에 기울임.
• 각도 단위는 deg, rad, grad, turn 사용.

사용예시

<div class="box skew-x">Skew X</div>
<div class="box skew-y">Skew Y</div>
<div class="box skew">Skew XY</div>

<style>
.box {
  width: 100px; 
  height: 50px; 
  background-color: orange; 
  color: white; 
  text-align: center;
  line-height: 50px; 
  margin: 10px; 
  transition: transform 0.3s ease-in-out; 
}

.skew-x:hover {
  transform: skewX(-20deg); /* 마우스 호버 시 X축으로 -20도 기울임 */
}

.skew-y:hover {
  transform: skewY(15deg); /* 마우스 호버 시 Y축으로 15도 기울임 */
}

.skew:hover {
  transform: skew(-30deg, -10deg); /* 마우스 호버 시 X축 -30도, Y축 -10도 기울임 */
}
</style>

background-attachment

• 배경 이미지가 뷰포트 또는 요소 자체와 어떻게 연동되어 스크롤될지 결정.
• 시각적인 깊이감이나 고정된 배경 효과를 만드는 데 사용.

속성

scroll (기본값)

• 요소가 스크롤될 때 배경 이미지도 함께 스크롤됨. 일반적인 웹페이지의 배경 동작 방식.
  fixed
• 배경 이미지가 뷰포트에 대해 고정되어 스크롤과 무관하게 항상 같은 위치에 표시됨.
• 패럴랙스 효과나 워터마크처럼 사용 가능. 성능에 영향을 줄 수 있으므로 주의.
  local
• 배경 이미지가 요소의 내용과 함께 스크롤됨. 요소 내부에 스크롤이 있는 경우 유용.
• 고려사항: fixed 속성은 모바일 환경에서 예상과 다르게 동작할 수 있음.

사용예시

<div class="container bg-scroll">Scroll Background</div>
<div class="container bg-fixed">Fixed Background</div>
<div class="container bg-local">
  <div class="content">Local Background Content<br>... (긴 내용) ...</div>
</div>

<style>
.container {
  width: 300px;
  height: 200px;
  margin: 20px;
  color: white;
  text-align: center;
  line-height: 200px;
  border: 1px solid black;
}

.bg-scroll {
  background-image: url('texture.png'); 
  background-attachment: scroll; /* 스크롤될 때 함께 움직임 (기본값) */
}

.bg-fixed {
  background-image: url('landscape.jpg'); 
  background-attachment: fixed; /* 뷰포트에 고정되어 스크롤해도 움직이지 않음 */
  background-size: cover; /* 배경 이미지를 요소 전체에 채움 */
}

.bg-local {
  height: 150px; 
  overflow-y: scroll; 
  background-image: url('dots.png'); 
  background-attachment: local; /* 요소 내부 스크롤 시 함께 움직임 */
}

.bg-local .content {
  height: 400px; /* 내용 높이 400px (스크롤 발생) */
  padding: 10px; 
  background-color: rgba(255, 255, 255, 0.8);
  color: black; 
  line-height: 1.5; 
}

</style>

mask-image

• 요소의 가시 영역을 정의하는 마스크 이미지를 적용. 마스크의 투명한 부분은 요소도 투명하게 처리하고, 불투명한 부분만 요소를 표시함.
• 창의적인 시각 효과 및 이미지 처리 가능.

원리

• 마스크 이미지는 광택 채널(alpha channel)을 사용하여 투명도를 결정하거나, 밝기 값을 기준으로 투명도를 조절할 수 있음.
• CSS 그라디언트, SVG 이미지, PNG 이미지 등을 마스크로 사용 가능.

속성

• mask-mode
  • 마스크 이미지 처리 방식 (alpha, luminance). 기본값은 alpha.
• mask-size
  • 마스크 이미지 크기 조절 (auto, length, percentage, cover, contain).
• mask-repeat
  • 마스크 이미지 반복 방식 (repeat, no-repeat, repeat-x, repeat-y, space, round).
• mask-position
  • 마스크 이미지 위치 설정.
• mask-origin
  • 마스크 이미지의 원점 설정 (border-box, padding-box, content-box).
• mask-clip
  • 마스크가 적용될 영역 설정 (border-box, padding-box, content-box, text). text 값은 텍스트 형태대로 마스크 처리.

사용예시

<div class="masked image-mask"></div>
<div class="masked gradient-mask"></div>
<div class="masked text-mask">Text Mask</div>

<style>
.masked {
  width: 200px;
  height: 150px; 
  margin: 20px; 
  display: inline-block; 
  background-color: gold; 
  color: white; 
  font-size: 24px; 
  line-height: 150px; 
  text-align: center; 
}

.image-mask {
  -webkit-mask-image: url('star.svg'); /* 마스크 이미지 (크롬, 사파리) */
  mask-image: url('star.svg'); /* 마스크 이미지 */
  -webkit-mask-size: contain; /* 마스크 이미지 크기 조절 (비율 유지하며 요소 안에 맞춤) */
  mask-size: contain; /* 마스크 이미지 크기 조절 (비율 유지하며 요소 안에 맞춤) */
  -webkit-mask-repeat: no-repeat; /* 마스크 이미지 반복 없음 */
  mask-repeat: no-repeat; /* 마스크 이미지 반복 없음 */
}

.gradient-mask {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
  /* 그라디언트 마스크 (크롬, 사파리) - 아래로 갈수록 투명해짐 */
  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
  /* 그라디언트 마스크 - 아래로 갈수록 투명해짐 */
}

.text-mask {
  background-image: url('pattern.png'); 
  color: transparent; /* 글자색 투명하게 */
  -webkit-background-clip: text; /* 배경을 텍스트 영역에만 적용 (크롬, 사파리) */
  background-clip: text; /* 배경을 텍스트 영역에만 적용 */
}
</style>