2022-02-22 / css

오늘도 역시 css에 태그에 관한 공부를했다.
오늘도 역시 css에 태그에 관한 공부를했다.
어? 왜 글이 두번씩 써지지?
어? 왜 글이 두번씩 써지지?
시작해보자

공부를 하다보니 의미있는 태그만 조금 정리하는게 더 효율적인 것 같다고 생각된다.
그래서 엄청나게 짧게 포스팅할거다.
공부한 태그들을 하나하나 다 정리하기 귀찮은 것도 맞다...!

배경

background-clip

배경 범위를 조절
선택자{background-clip : border-box | padding-box | content-box}
boder-box : border범위까지 배경색을 채움 (전부 다 채움)
padding-box : padding범위까지 배경색을 채움
content-box : 내용부분까지만 채운다고 보면 편할 것 같다

background-image

요소의 배경을 이미지로 지정
선택자{background-image : url(이미지경로)}
url의 이미지의 경로를 넣어서 배경을 색이나 다른 요소 대신에 준비된 이미지로 채움

background: (linear/radial) -gradient

lineal gradient : 색상이 수직, 수평, 대각선으로 변하도록 그라데이션 설정
radial gradient : 색상이 원 또는 타원의 중심부에서 동심원을 그리며 바깥방향으로 색상이 변화하도록 그라데이션 설정

트랜스폼 / 트랜지션

translate

지정한 크기만큼 상/하/좌/우 이동
transform: translate(100px, 100px);

transition

웹 요소의 스타일을 애니메이션처럼 반영되게 하는 것

• 시간에 따른 속성변화
  .trans8{
  transition-duration: 시간;
  }
• 여러가지 속성별 시간차 변화
  .trans9{
  transition-property: background-color,width,height,transform;
  transition-duration: 5s, 1s, 1s, 1s;
  }
• 시간 지연
  .trans10:hover{
  transition-delay: 2s;
  /2초동안 hover해놔야 동작/
  background-color: greenyellow;
  transform: rotate(180deg)
  }

애니메이션

트랜지션과 마찬가지로 시작지점 끝지점 스타일을 정해서 자연스럽게 연결
keyframes를 설정해서 중간변화단계 설정이 가능

.img1{
    margin: 100px;
    width: 300px;
    height: 300px;
    animation-duration: 1s;
    /*반복횟수*/
    animation-iteration-count: 3;
    animation-direction: alternate;
}
.img1:hover{
    animation-name: ani1;
}
@keyframes ani1{
    form{
        background-color: yellow;
        border: 3px solid red;
        border-radius: 150px;
    }
    to{
        background-color: yellow;
        border: 3px solid red;
        transform:rotate(360deg);
        border-radius: 150px;
    }
}

css 재미없당...