gradient

• background 속성으로 들어가며, 보통 linear-gradient 를 사용한다.
• to right 은 방향을 나타내며, 오른쪽에서 마지막 색상으로 끝난다.
• 90deg 와 같이 각도를 넣어줄 수도 있음

<style>
  background: linear-gradient(to right, pink, purple);
  background: linear-gradient(to top right, pink, purple);
  background: linear-gradient(90deg, pink, purple);

  // 포토샵 --> CSS 
  background: linear-gradient(90deg, #a6ffbe, #f3ff8a 30%, #8e8aff 75%, #fb8fff);
</style>

❗️ 포토샵 디자인을 받을 때는 꼭 '레이어스타일'로 그라디언트를 받아야 정확하게 구현해낼 수 있다. 그라디언트 에디터에서 색상을 나타내는 삼각형 모양을 클릭하여 색상 및 % 를 가져와 적용한다. 처음(0%)과 마지막(100%)은 제외해도 무방.

• 포토샵과 CSS의 각도 계산법이 다르므로, CSS에서는 -90도를 빼주어야 한다.
• colorzilla 활용하기

box-shadow

• box-shadow: x축, y축, 번짐정도, 색상
• inset = 내부그림자

<style>
          box-shadow: inset 3px 3px 3px #000;
</style>

❗️ 포토샵은 Drop Shadow에서 확인
= rgba + opacity, 각도(x,y축)에서 Distance가 얼마나 떨어져있는지, 번짐정도

transition

• transition: 속성명, 몇초동안, 몇초뒤에, 어떻게
• 마우스, 키보드 및 다른 이벤트가 있는 경우에만 사용가능
• 예를들어, hover 시 부드러운 애니메이션 효과를 주기 위해 해당 요소에 transition 을 넣어주고, 이 속성 안에 효과를 주고자 하는 hover의 속성값을 넣어 연결시켜준다. transition은 지정한 동작을 움직인 후 다시 원래대로 돌아오는 것이 특징이다.

<style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            transition-property: border-radius, background; /* 무엇을 */
            transition-duration: 2s; /* 몇초동안 */
            transition-delay: 0.5s; /* 몇초뒤에 */
            transition-timing-function: ease; /* ease : 처음과 끝을 천천히 */
        }
        
        /* 한줄로 작성 시 */
        .box{transition: background 2s 1s ease, border-radius 3s;}  /* 각 속성별 */
        .box{transition: all 2s 1s ease;}  /* all은 모든 속성 */
        
		.box1:hover{
            border-radius: 100px;
            background: yellow;
        }
</style>

animation

• animation: keyframes명, duration, easing, delay, 반복정도, 시작끝처리
• @keyframes 네이밍
• keyframes = 0%에서 100% 사이에 동작을 설정
  ex) 29프레임 : 종이를 1초에 29장 넘기면 자연스러운 애니메이션이 되는..

<style>
	.box{
        position: relative;
        width: 100px; height: 100px; border: 1px solid #000;

        animation-name: animation; 
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-delay: 0.5s;   
        animation-iteration-count: infinite; /* 몇 번 반복할지, infinite: 무한반복 */
        animation-direction: alternate; /* 시작과 끝 처리방법, alternate: 왔다갔다 */

        /* 한줄로 작성 시 */
        animation: animation 2s ease 0.5s infinite alternate;
		}
        
     /* 지정한 duration(=2s)을 0%, 100%로 나누어 움직임*/
     @keyframes animation { 
        0% {left: 0;}
        100% {left: 100px;}
	 }
</style>

flex

부모요소에 display:flex;를 주고, 자식 요소에 flex: 1;을 주어 너비를 같은 간격으로 나누어 갖도록 한다.

<style>
		ul{ display: flex; }
 		li{ flex: 1; }  /* 각 li가 같은 간격을 나누어갖음 */
        li:nth-child(1){ flex: 2; } /* 1번째 li는 flex 2개를 갖게된다. li가 총 6개가 되는 것 */
        li:nth-child(2){ flex: none; width: 400px; } /* 2번째 li는 flex를 빼고 400px로 너비지정 */
       
        /* 가운데 정렬 */
		div{
            display: flex;
            justify-content: center; /* x축 가운데정렬 */
            align-items: center; /* y축 가운데정렬 */
        }
</style>