Css 3) Study 3

Css 3) 필터효과

░ Css의 속성은 이미지나 배경, 테두리 등에 다양한 효과 함수를 사용하여 블러나 색상 변형 등의 그래픽 효과를 적용한다

필터링: filter: Css의 filter: 필터함수(값); 속성은 요소에 다양한 필터 효과를 적용하는데, 속성값은 공백으로 구분하여 복수의 필터 효과를 조합할 수도 있다: img { filter: grayscale(0.5) blur(10px); }

백드롭 필터: backdrop-filter: backdrop-filter 속성에서도 Css Filter와 동일한 필터 함수들을 사용하는데, filter 속성이 요소 전체에 필터를 적용하는 반면, 이 속성은 백그라운드에만 필터를 적용한다는 점에서 차이가 있다. 곧, backdrop-filter: 필터링함수[ 필터링함수2, ..]; 속성은 요소 뒤 배경에 블러나 색상 시프트 등의 효과를 준다

드롭 쉐도우

░ Css 는 Css의 box-shadow 속성과 다소간 유사하며, 속성값 설정 또한 비슷하다. 하지만, box-shadow 속성이 요소 전체 박스 뒤에 사각형 그림자를 그리는 반면, drop-shadow(); 함수는 이미지 자체의 모양에 맞는 그림자를 만든다는 점에서 차이가 있다!

드롭 쉐도우: Css 3의 filter: drop-shadow(offset-x offset-y [blur] [색상]); 함수는 (박스 뒤에 사각형 그림자를 그리는 것이 아니라)이미지의 배경에, 이미지의 모양에 맞게 흐릿한 블러 효과를 나타내준다 ← 곧, 이미지의 알파 마스크에 흐릿하게 블러 효과를 주어 이미지의 배경으로 합성하는 것이다!

블렌딩 모드

░ Css의 를 이용하면 다수의 레이어에서 색상을 혼합하여 흥미로운 시각적 효과를 낼 수 있고, 이 혼합모드를 활용하여 Css 필터효과나 가상요소 등을 이미지에 적용할 수도 있다!

블렌딩 모드: mix-blend-mode: 키워드; 속성은 대상이 되는 요소의 컨텐츠가 자신의 배경 및 부모요소와 어떻게 혼합되어야할 지를 키워드 값을 통해 지정하는데, 일반 이미지 및 SVG 이미지, 텍스트 모두에서 사용할 수 있다

블렌딩모드의 쌓임맥락: isolation 속성은 z-index의 쌓임 맥락과 유사하게 블렌딩 모드의 새로운 쌓임맥락을 만드는데, mix-blend-mode와 함께 사용할 때 특히 효율적이다 ← background-blend-mode에서는 (백그라운드 속성은 이미 격리되어 있으므로, 당연히)의미가 없다!

Css 트랜스폼

░ Css 은 GPU 가속 속성이므로 일반적으로 전환되며, 더 부드러운 애니메이션을 만든다. 이 속성을 사용하면 임의로 요소의 크기를 조정하거나, 회전 및 기울이기, 이동, 또는 왜곡시킬 수 있다!

트랜스폼: transform: Css transform 속성은 Css 시각적 서식모델의 좌표 공간을 변경하는데, 이는 새로운 쌓임 맥락을 생성한다 !

➥ transform 변형 함수들

transform의 지나친 크기 변경/확대/축소 애니메이션은 어떤 사용자에게는 두통을 야기시킬 수도 있다. 이 경우, 미디어 쿼리와 함께 미디어 기능을 이용하면 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있다!

rotate(각도deg);는 중심축을 기준으로 각도deg만큼 요소를 회전시키는데, 각각의 축을 기준으로 하는 rotateX/Y/Z(각도deg); 함수를 쓸 수도 있다. 좀 더 복잡하게는; rotate3d(x, y, z, 각도deg);(x, y, z 좌표와 각도) 함수를 쓸 수도 있다: * rotate() 예제

🐶

                                                    
                                                        .transform-rotate {
                                                            animation: rotate 5s ease-in-out both;
                                                        } @keyframes rotate {
                                                            0%   { transform: rotate(0); }
                                                            100% { transform: rotate(180deg); }
                                                        }

scale(값[, 값2]); 함수는 값[, 값2]만큼 요소를 확대/축소하는데(인수 하나는 x, y 양 방면이며, 인수 둘은 각각 x, y 방면이다), scaleX/Y/Z(); 및 scale3d(x, y, z); 함수도 있다: * scaleX/Y() 예제

🐶

                                                    
                                                        .transform-scale {
                                                            animation: scale 5s both;
                                                        } @keyframes scale {
                                                                50% { transform: scale(0.5); }
                                                            100% { transform: scale(1); }
                                                        }

translate(값[, 값2]); 함수는 값[, 값2]만큼(단위는 px, % 등) 요소를 이동시키는데(인수 하나는 x 방면, 인수 둘은 각각 x, y 방면이다), translateX/Y/Z(); 및 translate3d(x, y, z); 함수도 있다

🐱

🐶

                                                    
                                                        .transform-translateX {
                                                            animation: slide-in 5s both;
                                                        } @keyframes slide-in {
                                                            0% { transform: translateX(-1000px); }
                                                            100% { transform: translateX(0); }
                                                        }
                                                    
                                                        .transform-translateY {
                                                            animation: slide-down 10s both;
                                                        } @keyframes slide-down {
                                                            0% { transform: translateY(-1000px); }
                                                            100% { transform: translateY(0); }
                                                        }

skew(값[, 값2]); 함수는 값[, 값2]만큼 요소를 비트는데(인수 하나는 x 방면, 인수 둘은 각각 x, y 방면이다), skewX/Y(값); 함수도 있다

🐶

                                                    
                                                        .transform-skew {
                                                            animation: skew 10s both;
                                                        } @keyframes skew {
                                                            0% { transform: skew(0deg, 0deg); }
                                                            50% { transform: skew(45deg, 45deg); }
                                                        }

애니메이션에 Css opacity 속성도 또한 유용하게 사용할 수 있다. 아래는, opacity 속성을 써서 요소의 화면 표시상태를 전환한다

🐶

                                                    
                                                        .animation-opacity {
                                                            animation: opacity 10s both;
                                                        } @keyframes opacity {
                                                            0% { opacity: 1; }
                                                            50% { opacity: 0; }
                                                            100% { opacity: 1; }
                                                        }

➥ 사용자정의 Css) 요소 기울이기

아래 사용자정의 클래스 .rotate-각도 및 .rotate-n-각도 는 해당 각도만큼 요소를 기울인다:

                                    
                                        .rotate-15 { transform: rotate(15deg); }
                                        .rotate-n-15 { transform: rotate(-15deg); }
                                        /* 필요하다면; 같은 방식으로 더 추가해서 사용하면 됩니다 */

➥ 사용자정의 Css) 컨텐츠 비틀기

.content-skewed 사용자정의 Css를 사용하여 컨텐츠를 비틀 수 있다

컨텐츠 기울이기
Result
html
Css

.content-skewed 사용자정의 Css를 사용하여 컨텐츠를 비틀 수 있다. 먼저 대상 요소에 .content-skewed content-skewed-right/left 클래스를 추가한 뒤, 내부 자식요소에서 .content-skewed-item 클래스를 사용해주면 된다

                                                    
                                                        /* --- 컨턴츠 기울이기 --- */
                                                        .content-skewed {
                                                            perspective: 1500px;
                                                            transform-style: preserve-3d;
                                                        }
                
                                                        .content-skewed-right {
                                                            perspective-origin: right center;
                                                        } .content-skewed-right .content-skewed-item {
                                                            transform: rotateY(30deg) rotateX(15deg);
                                                            backface-visibility: hidden;
                                                        }
                
                                                        .content-skewed-left {
                                                            perspective-origin: left center;
                                                        } .content-skewed-left .content-skewed-item {
                                                            transform: rotateY(-30deg) rotateX(15deg);
                                                            backface-visibility: hidden;
                                                        }

☞ Css의 backface-visibility 속성은 3차원으로 움직이는 요소의 뒷면이 사용자를 향할 때 이를 보여줄 지 여부를 지정한다

Css 트랜지션

░ 웹사이트와 상호작용할 때 많은 요소에 중간 상태가 있는 것을 볼 수 있다 - 예컨대, 포커스를 받거나 마우스를 올리면 버튼의 색상이 변경될 수 있는데, Css는 이러한 상태의 스타일을 즉시 전환한다. 이때, Css의 을 사용하면 요소의 초기 상태에서 타겟팅 상태로 부드럽게 전환하도록 중간 단계의 상태를 줄 수 있다. 곧, 두 상태간의 전환 시 시각적 안내나 힌트 등을 제공하여 사용자 환경을 개선할 수 있는 것이다!

트랜지션: transition: 트랜지션을 설정하려면; 먼저 transition-property 속성으로 전환하고자 하는 스타일을 지정해주어야 하는데, 쉼표로 구분된 목록 형식의 하나 이상의 Css 속성을 지정해주어야 한다. 그외에도, 아래와 같이 여러 속성값들을 추가적으로 설정해줄 수 있다; 1. Css 트랜지션을 활성화하려면 Css에 상태 변경 및 해당 상태 변경을 트리거하는 이벤트가 포함되어야 하는데, 보통은 :hover, :focus, :target 등의 의사클래스가 사용되며, 자바스크립트를 쓸 수도 있다:; 2. 트랜지션에서 Css transform 속성은 GPU 가속 색상이므로 일반적으로 전환되며, 색상(color, background-color, border-color)도 상호작용 시의 상태를 나타내는 좋은 지표가 될 수 있다. Css filter 속성이나 박스 그림자 또한 마우스가 올라간 때의 상태를 나타낼 때 많이 사용된다

@keyframes

░ 일반적으로 애니메이션의 키프레임은 타임라인의 타임 스텝에 애니메이션의 상태를 할당하는 데 사용하는 메커니즘으로서, 시작과 종료 및 중간 지점들로 이루어진다. Css의 에서의 @keyframes 또한 애니메이션의 키프레임과 동일한 개념을 기반으로 한다

키프레임: @keyframes: Css에서 @keyframes를 사용하려면 다양한 애니메이션 속성을 개별적으로 정의하거나, animation 속성으로 일괄 설정해줄 수도 있다. 아래 코드는 여러 상태가 있는 키프레임을 정의한 것인데, 여기서 키프레임 이름(my-animation)은 함수 이름처럼 작동하여 Css 코드의 다른 위치에서 이를 참조할 수 있게 된다

Css 베이직 쉐이프

░ Css 데이터 유형은 clip-path 및 shape-outside 속성에서 사용되는 모양으로서, Css 박스모델 개념을 상속하지만, 이는 Shape 요소 자신의 외부에 적용되는 것이고, 이를 통해 주변 요소의 위치를 재설정해줄 수 있게된다!

쉐이프 도형 작성하기: 쉐이프 도형을 만들 때 기본 참조상자는 basic-shape 데이터 타입에 사용하는 속성들에 의해 정의되는데, 쉐이프의 좌표계는 기본적으로 참조박스의 좌상단 모서리가 원점이 되며, x축은 오른쪽으로, y축은 아래쪽으로 진행된다; clip-path 속성: 요소 자신의 클리핑 범위를 지정하는데, 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨진다; shape-outside 속성: 인접한 인라인 컨텐츠가 줄바꿈되어야 하는 모양(사각형이 아닐 수 있음)을 정의한다 - 곧, 인라인 컨텐츠는 기본적으로 요소 주위에서 사각형 형태로 배치되지만, shape-outside 속성을 써서 주변의 인라인 컨텐츠가 (박스모델의 사각형이 아니라)요소의 곡선을 따라 둘러싸도록 할 수 있는 것이다

쉐이프 레이아웃: 1. 아래는 Css 플로팅에 의해 이미지와 텍스트가 좌우로 배치될 때의 기본 형태이다; 2. Css 쉐이프 도형(및 쉐이프 함수)를 사용하면 박스모델의 단순한 사각형을 넘어, 주변 요소와의 관계에서 보다 추상적이고 기하학적인 레이아웃을 만들 수 있다

쉐이프 함수

░ Css의 clip-path 및 shape-outside 속성들은 도형을 사용하여 상자를 시각적으로 자르거나 컨텐츠가 흐를 도형을 작성하는데, inset();, circle();, ellipse();, polygon(); 등의 간단한 도형 작성 관련 함수들이나, 좀 더 복잡한 path(); 함수를 써서 정의해줄 수 있다

쉐이프 함수: rect();, circle();: rect(); 함수는 컨테이너 박스의 좌상단 원점으로부터 지정된 거리에 사각형을 정의하며, circle(); 함수는 반지름과 위치를 이용하여 원 도형을 정의한다: circle(50px at 30% 70%);

쉐이프 함수: inset();: inset(값 값 값 값 [round 값]); 함수는 박스의 각 측면에서 지정된 인셋 거리에 사각형을 정의한다

offset-path & clip-path 속성
화면표시
html
Css

offset-path: xywh(x y w h); 속성은 참조 상자의 x, y 방면 거리와 해당 지점에서의 w, h 값(너비 높이)을 설정하여 사각 박스 영역을 설정해준다. 추가적으로, clip-path 속성으로 클리핑 경로를 정의해줄 수 있다

☞ 음~ 좀 어렵군요.. 너무 어려우니 대충, 대충,, 코드 만지작, 만지작 하면서 확인해 보십시오.. 덕분에, 이 세상 누구도 못 본 그 난해한 양자 도약을 눈으로 직접 구경하게 되는군요, 봤나요? 못 봤나요??

→

                                                
                                                    .xywh_path {
                                                        width: 25px; height: 25px;
                                                        background-color: rgb(140, 196, 106);
                                                        animation: move 20s linear infinite;
                                                    } @keyframes move {
                                                          0% { offset-distance: 25%; }
                                                        100% { offset-distance: 100%; }
                                                    }
                                                    
                                                    .xywh-path_sub {
                                                        offset-path: xywh(0px 0px 100% 100% round 10%);
                                                        clip-path: circle();
                                                    }

스크롤 Overflow

░ Css 오버스크롤 동작 모듈은 스크롤 위치가 '스크롤 경계'에 도달할 때(이 경계를 넘는 오버스크롤 시) 스크롤 컨테이너의 동작을 제어한다

스크롤 오버플로우: 요소의 내용이 컨테이너보다 크고, 스크롤이 가능하거나 기본적으로 스크롤되는 상황에서(예컨대, 블로그 게시판에서 [게시글] 입력 시) 요소의 스크롤 가능 영역을 지나 계속해서 스크롤하면 부모요소에서 스크롤이 시작되는 경우가 있다. 반대로, 웹사이트의 이용약관에서 보듯이, [확인란]을 활성화하기 위해 약관 설명 바깥까지 도달하더라도 페이지가 스크롤되거나 바운스되지 않도록 할 수도 있다; 1. 기본적으로, 컨테이너(또는, 페이지 자체)에서 발생한 스크롤은 끝 경계 지점까지 도달하여 오버스크롤될 때 상위요소로 전파될 수 있는데(기본값인 auto), overscroll-behavior 속성에 contain 값을 주어 상위요소로의 스크롤 체이닝 전파를 막고, 나아가 모바일앱에서의 스크롤하여 새로고침 작업도 중단시킬 수 있다. 한편, none 값은 contain과 동일하지만 Android의 오버스크롤 글로우 효과 및 iOS의 리버밴딩 효과 까지 방지한다:; 2. scroll-behavior 속성을 사용하면 요소에 대한 브라우저 제어 스크롤을 선택할 수 있고, scrollTo(); 또는 링크와 같은 페이지 내부 탐색 방법을 지정할 수 있는데, 이 모드는 prefers-reduced-motion과 함께 사용하여 사용자 환경설정에 따라 스크롤 동작을 지정하는 경우에 특히 유용하다!; 3. 모바일 앱에서 일부 스크롤러에 절대적 스크롤러(= 풀-투-리프레시) 동작이 있는데, 이는 Root Scroller에서 발생한다. 한 페이지에는 루트 스크롤러가 단 하나만 존재하며, 기본적으로 documentElement는 페이지의 루트 스크롤러이지만, 이 루트 스크롤러를 변경하면; 특정 동작이 documentElement 이외의 스크롤러에도 적용될 수 있다(= 암시적 루트 스크롤러)

스크롤 스냅

░ Css 스크롤 스냅은 스크롤 작업이 완료된 후 스크롤 컨테이너의 스크롤 오프셋을 원하는 스냅 위치가 되도록 조정하는 작업으로서, 이를 이용하면 페이지 매김된 기사나 캐러셀 이미지 등에서 스크롤 스냅 위치를 선언하여 잘 제어된 부드러운 스크롤 환경을 만들 수 있다!

스크롤 스냅 활성화하기: 1. 스크롤 스냅을 활성화하기 위해서는; 먼저, 스크롤 컨테이너의 크기와 overflow 속성을 정의해주어야 한다. 다음, 스크롤 컨테이너에서 scroll-snap-type: x/y/both;(스크롤이 발생하는 축) 속성을 주어 스크롤 스냅을 활성화하는데, mandatory나 proximity 옵션(맞춤의 엄격도)을 추가해줄 수도 있다:; 2-1. 이어서, 스크롤 컨테이너의 하위 컨텐츠 요소에서 scroll-snap-align: start/center/end; 선언으로 스크롤 컨테이너 스냅 포트의 스크롤 오프셋(= 컨텐츠 정렬 위치)를 설정해준다:; 2-2. 스크롤 스냅에서 scroll-snap-align 값이 start나 end일 때, 스크롤 컨텐츠가 스냅 포트의 가장자리에 딱 붙지 않게 하려면; 스크롤 컨테이너에서 scroll-padding 값(= 인셋)을 설정해주면 된다. 나아가, 각 스크롤 컨텐츠 요소에서 scroll-margin 값(= 아웃셋)을 설정해줄 수도 있다:; 3. 기본적으로 스크롤 스냅은 사용자가 스크롤을 멈췄을 때만 작동한다. 따라서, 그 전에 여러 스냅 지점을 건너뛰어 지나칠 가능성이 있는데, 스크롤 대상요소에 scroll-snap-stop: always; 값을 주면; 이 건너뜀을 막을 수 있다:

스크롤 스냅 활용 사례: 1. 스크롤 스냅을 활용하는 가장 일반적인 사례로는 가로 이미지 캐러셀이 있다. 가로축에 scroll-snap-type이 있도록 스크롤 컨테이너를 지정해주고, scroll-snap-align 속성으로 각 이미지의 맞춤 위치를 설정해주면 된다:; 2. 스크롤 스냅을 활용하는 또 다른 대표적 사례는 세로로 스크롤할 수 있는 논리적 섹션들이 있는 페이지인데, 이 경우에는 scroll-snap-type: y proximity;가 더 적합하다 - 이는 사용자가 특정 섹션의 중앙으로 스크롤할 때 간섭을 일으키지 않으며, 사용자가 충분히 가까이 스크롤하면 스냅된다:; 3. (전체화면 섹션들로 구성된 개인 블로그 등) 및 (전체화면 이미지들로 구성된 캐러셀 이미지 슬라이더 등)도 웹사이트를 돌아다니면서 자주 접하게 되는 풍경들이다. 한편, 동시에 x, y 양방향으로 스크롤 스냅을 작동시킬 수도 있다 - 예컨대, 작은 타일들로 구성된 2차원 썸네일 갤러리를 구성할 때인데, 아래와 같은 방식으로 스크롤 스냅을 위한 Css 코드를 작성해줄 수 있다:

Css 3) 효과

Css 3) 애니메이션

Css 3) 모양

Css 3) 스크롤링

Css 3) 필터효과

블러: filter: blur(값);

명도: filter: brightness(값);

채도: filter: saturate(값);

색상 대비: filter: contrast(값);

그레이스케일 회색조: filter: grayscale(값);

세피아톤 갈색조: filter: sepia(값);

색조 회전: filter: hue-rotate(각도값);

색상 반전: filter: invert(값);

불투명도: filter: opacity(값);

공화국을 위하여 !

드롭 쉐도우

블렌딩 모드

블렌딩모드와 isolation 속성

html 블렌딩모드

Css 트랜스폼

회전 rotate();

확대 scale();

이동 translate();

비틀기 skew();

Css의 opacity 속성 사용하기

컨텐츠 기울이기

Css 트랜지션

Css 트랜지션 예제 (1)

Css 트랜지션 예제 (2)

Css 3) 슬라이딩 메뉴

메뉴 제목

@keyframes

Steps On

Css 베이직 쉐이프

쉐이프 아웃사이드

쉐이프 함수

offset-path & clip-path 속성

스크롤 Overflow

스크롤 스냅

스크롤 패딩과 마진

스티키 헤더

div 1

div 2

div 3

div 4

div 5

div 6

div 7

div 8

div 9

블러: `filter: blur(값);`

명도: `filter: brightness(값);`

채도: `filter: saturate(값);`

색상 대비: `filter: contrast(값);`

그레이스케일 회색조: `filter: grayscale(값);`

세피아톤 갈색조: `filter: sepia(값);`

색조 회전: `filter: hue-rotate(각도값);`

색상 반전: `filter: invert(값);`

불투명도: `filter: opacity(값);`