[CSS] clip / clip-path / scroll-snap / aspect-ratio / backdrop-filter

✔️ clip-path

• 요소의 클리핑 범위를 지정합니다.
  • none : 클리핑 패스가 생성되지 않습니다.
  • url(clipPath) : SVG의 클리핑 패스 요소를 참조하여 클리핑합니다.
  • path(path) : SVG 경로 정의를 사용하여 클리핑합니다.
  • circle(R at X Y) : 반지름과 위치를 사용하여 타원을 정의합니다.
  • elipse(수평R 수직R at X Y) : 두 개의 반지름과 위치를 사용하여 타원을 정의합니다.
  • triangle(좌측 상단 X Y, 우측 상단 X Y, 하단 X Y) : 세 개의 위치를 사용하여 삼각형을 정의합니다.
  • polygon(시계방향 꼭지점) : 세 개 이상의 위치를 사용하여 다각형을 정의합니다.
  • inset

 

📌 clip 과 clip-path

• 두 속성 다 요소의 어느 부분이 시각적으로 보이도록 할지를 지정합니다.
• clip 속성은 position이 absolute 또는 fixed로 되어 있어야 작동하지만 clip-path는 상관없이 작동합니다.
• clip 속성은 sr-only 에서 rect(0,0,0,0) 으로 요소를 감출 때나 사용하며 deprecated 된 속성입니다.

 

📌 clip 모양 만드는 사이트

• https://bennettfeely.com/clippy/

 

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ scroll-snap

• 사용자가 터치, 휠 스크롤 조작을 마쳤을 때 오프셋을 설정할 수 있습니다.

 

📌 scroll-snap-type

.container {
    scroll-snap-type: [scroll snap axis] [scroll snap stricness];
}

• scroll snap axis : snap position을 지정할 수 있는 축을 결정합니다.
  • x : 수평(가로)축으로 snap position을 지정합니다.
  • y : 수직(세로)축으로 snap position을 지정합니다.
  • both : 두 축의 위치를 개별적으로 스냅합니다.
  • block : block 축의 스냅 위치에만 스냅됩니다.
  • inline : inline 축의 스냅 위치에만 스냅됩니다.
• scroll snap strictness : 스냅의 엄격도를 지정합니다.
  • none : 스냅하지 않습니다.
  • proximity : 기본값으로 스냅할 위치에 가까울 때 스냅합니다.
  • mandatory : 항상 가까운 방향으로 스냅합니다.

 

📌 scroll-snap-align

.item {
    snap-scroll-align: [정렬기준];
}

• scroll-snap-type에서 지정한 축을 기준으로 snap area의 정렬을 정합니다.
  • none : snap position을 지정하지 않습니다.
  • start : 축을 기준으로 snap area의 시작 부분에 맞춰 정렬합니다.
  • end : snap area의 끝에 맞춰 정렬합니다.
  • center : snap area의 가운데에 맞춰 정렬합니다.

 

📌 scroll-padding, scroll-margin

• snap position에서 padding과 margin을 주어 snap 되는 위치에 간격을 띄웁니다.
• scroll-padding 은 부모 요소에 scroll-margin은 자식 요소에 적용해야 합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ aspect-ratio

.item {
    aspect-ratio: 16 / 9;
    aspect-ratio: 0.5;
}

• 요소를 비율대로 줄이거나 늘리는데 사용합니다.
• width나 height 중 하나가 반드시 설정되어 있어야 적용됩니다.
• width와 height가 동일한 요소에 둘 다 적용돼있다면 aspect-ratio는 무시됩니다.

 

📌 과거 비율 조절 방법

/* 2 : 1 */
width: 200px;
height: 100px;

• 직접 지정 방식
  • 반응형을 구현하지 못한다는 단점이 있습니다.

/* 2 : 1 */
.container-padding {
  width: 200px;
}
 
.inner {
  padding-top: 50%;
}

• padding-top 방식
  • padding의 기준을 부모의 width로 갖기 때문에 %값에 따라 비율을 지정할 수 있습니다.

/* 2 : 1 */
.inner {
  padding-top: calc(100% / 2 * 1);
}

 

• calc() 방식
  • padding-top 방식처럼 100%의 기준을 부모의 width로 가지므로 나눠주는 값에 따라 비율을 지정할 수 있습니다.

 

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ backdrop-filter

• 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 때 사용합니다.

 

📌 blur(blur-radius)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 brightness(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 contrast(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 drop-shadow(offset-x | offset-y | blur-radius | color)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 grayscale(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 hue-rotate(deg)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 invert(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 opacity(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 sepia(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 saturate(%)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📄 참고

https://developer.mozilla.org/

https://www.yalco.kr/