1. CSS 그라데이션

• 참고 사이트(https://fastfive-new.co.kr/)
  

.class{background-image: linear-gradient(to bottom, #fff 20px, transparent);}
/*가상태그를 이용한(before, after) 그라데이선*/

2.css background 고정

• 참고 사이트(https://sockstaz.com/)
  

	.class{
    	background-image:url('이미지경로')
      	background-attachment: fixed;
      	background-position: center;
      	background-repeat: no-repeat;
      	background-size: cover;
    }
    

3.video visual 설정

• 참고 사이트(https://www.hd-infracore.com/kr)
  

	<video class="visual-video" src="경로" type="video/mp4" playsinline="" muted="" loop="" autoplay=""></video>
    

4.패턴 배경

• 참고 사이트(http://rwdb.kr/css_pattern/)
  

    .class{ background:repeating-linear-gradient(-49deg, #d2d2d2, #d2d2d2 1px, #fff 0, #fff 5px);}

5.선 그라데이션 및 그라데이션 사이트

-참고 사이트(https://cssgradient.io/)

/* 참고사이트*/
/*https://velog.io/@dltjsgho/css-border%EC%97%90-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EB%84%A3%EA%B8%B0 */
.class{background:linear-gradient(90deg, rgba(2,125,66,1) 0%, rgba(32,58,125,1) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}

6.밑줄, 링크 등

-참고 사이트(https://fastfive.co.kr/)

.class .class:after{
position: absolute;
  content: "";
  left: -1px;
  right: -1px;
  bottom: -3px;
  height: 2px;
  background-color: var(--blue-color);
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.35, 1);
  transform-origin: 100% 0;
}

.class:hover .class:after{
  transform: scaleX(1);
  transform-origin: 0 0;
}