2023.03.06 css와 animation 그리고 조건자

오늘 배운 것은 크게 세가지이다.

1.연산자(조건자)
2.animation
3.media

1.연산자

연산자는 css를 유동적으로 설계 할 수 있게 해준다.

1.+

자신의 태그 바로 인접해 있는 형제 태그를 지칭할 수 있다.

.tab_menu > input + label {
  display: inline-block;
  padding: 30px;
  background-color: gray;
  color: white;
  font-size: 14px;

  /* 마우스를 올렸을때 보여줄 커서를 설정할 수있다. */
  cursor: pointer;
}

이런식으로 말이다. hover,input인 경우 checked를 적용 할 수도 있다!

.tab_menu > input:checked + label {
  background: #4c2eb8;
  color: wheat;
}

2.~

자신의 태그 아래에 있는 태그를 고를 수 있다.

/* input태그중 클래스가 tab01이고 checked속성이 있을 때 형제요소중
밑에있는 태그중에 item1클래스를 가지고 있는 태그 */
input[class="tab01"]:checked ~ .item1 {
  display: block;
  color: white;
}

([]이 속성은 태그 안에 있는 클래스를 선택해서 따로 적용시키게 해줄 수 있는 속성이다.)
=>주의해야할 점은 직속 태그만 적용된다는 것이다!(자식의 자식은 안됨)

2.animation

1.trnasform

.box > img {
  /* transform: translate(x축,y축)
해당 태그를 이동시켜준다.
translate 함수처럼 생겼네 */
  transform: translate(10px, 100px);
}

.box2 > img {
  transform: translateX(100px);
  /* y축은 없고 x축만 이동 */
  /* translateX(X축값) */
}

.box2 > img {
  /* css는 같은 선택자일때 밑에 있는 속성이 적용된다. */
  transform: translateY(100px);
  /* y축으로만 이동 trnaslateY(Y축값F) */
}

.box3 > img {
  transform: scale(0.1, 1);
  /* 
    1이 기본 크기고 
    크기를 조절 할 수 있다.
    0.5가 50%의 태그의 크기
    변수값이 두개이면 x크기,y크기 조절이 가능하다*/
}

.box4 > img {
  transform: rotate(90deg);
  /* 태그를 회전 시켜준다.값은 각도로 입력 45deg는 45도 회전 */
}

이와같이 회전, 이동 같은 여러 작업을 할 수 있게 해준다. 이걸 애니메이션으로 바꾸는 방법은 다음과 같다.

/* css에서 animation을 작성할 때 사용한다.@keyframe 뒤에 작성된게 애니메이션의 이름 ani */
@keyframes ani {
  0% {
    /* 전체 동작중 0~50%까지의 내용 */
    
    transform: rotate(0);
  }
  50% {
    /* 전체 동작중에 50일 때 */
    transform: rotate(360deg);
  }
  100% {
    /* 전체 동작중에 50~100%까지일 때 */
    transform: rotate(0);
  }
}

100프로까지 360도로 돌렸다 다시 0도로 돌아가는 애니메이션이다.
만약 먼저 실행해야할 움직임이 있다면 0%에서 부터 적용시켜야 한다. 요소를 translate로 움직이고 돌리고 싶은 경우=>

@keyframes ani {
  0% {
    /* 전체 동작중 0~50%까지의 내용 */
    translate:(-50%,-50%);
    transform: rotate(0);
  }
  50% {
    /* 전체 동작중에 50일 때 */
    translate:(-50%,-50%);
    transform: rotate(360deg);
  }
  100% {
    /* 전체 동작중에 50~100%까지일 때 */
    translate:(-50%,-50%);
    transform: rotate(0);
  }
}

.box5 > img {
  /* animation:keyframes의 이름 시간 변화 방법 */
  /* animation: ani 1s ease; */
}

이와 같이 적용시킬 수 있다. (만약 100프로=>애니메이션이 끝난 시점)을 유지하고 싶다면

   animation: ani 1s forwards;

이런 속성을 활용해 보자

개별적으로 애니메이션을 주고싶은 경우, 즉 border와 같은 추가 스타일을 부여하고 싶은 경우는 다음과 같이 하자.

.box5 > img {
  transition: transform 3s linear, border 1s ease-in-out,
    border-radius 1s ease-in-out, rotate 1s;
  /* 스타일 값이 변하면서 효과를 줄수가 있다. 
    transition에 대해서 변화하는 시가 변화의 방법을 설정할 수 있다.
    trnasform 3s trnasform속성이 3초간 변화하고 (태그가 돌아가는 것)
    border 1s border값이 1초동안 변화(테두리가 생기는것)
    border-radius 1s값이 1초동안 변화(둥글게 모서리가 깎임) */
}


.box5:hover > img {
  /* 마우스가 태그에 올려졌을때  */
  transform: rotate(720deg);
  border: 10px solid red;
  border-radius: 50%;
}

3.media

반응형웹의 영원한 친구 media query이다.

@media only screen and (max-width: 1000px) {
  /* media query 브라우저 환경에 따라 css를 적용시킨다. */
  /*@media only(이곳에서만) screen(화면일 때) and(조건){css 스티일 작성}   */
  /*화면 1000px까지 스타일이 적용된다. */

  /* 여기에 스타일 작성하면 된다. */
  .box {
    width: 500px;
    height: 500px;
    background-color: red;
  }
}

@media only screen and (min-width: 500px) {
  /* 너비가 500px이상  */
  .box {
    background-image:url('./bor.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
  }
  /* 1000px 까지는 @media only screen and (max-width: 1000px)의 속성을 가지고 500px이상에선
  @media only screen and (min-width: 500px) 속성을 가진다.*/
}


/* css장성하면서 손에 익질 않았기 때문에 */

간단하므로 이정도만 하고 넘어가지

추가 사항

1.font-family(글씨체 적용하는법)

/* 폰트파일을 다운받고
@font-face 작성한다.
@font-face{
    font-family:이곳에 사용한 폰트의 이름을 정해준다.
    src:url(사용할 폰트 파일의 경로를 적어준다.)
    확인방법은 개발자 모드에서 computed로 들어가면 Rendered Fonts에서 알 수 있다!
 */

@font-face {
  font-family: "noto";
  src: url("./Noto_Sans_KR/NotoSansKR-Black.otf") format("truetype");
}

body {
    /*  */
    font-family: 'noto';
}

2.hover적용시 깜빡이는 현상!

.movie-content > img:hover + .story {
  display: block;
}

/* 스토리가 block이 되는 순간, 포인터는 story 를 가리키게됨.그 때 display는 none이되고(story에 포인터를 올린 판정이 되므로)
 다시 display:block이 됨. 이를 방지하기위해 story에 올려놨을 때도 block으로 유지시켜야함->.story:hover{
    display: block;
}사용*/
.story:hover {
  display: block;
}

img에 포인터가 올라갔는데 story태그가 깜빡거리는 현상이 발생했다.
요약하자면 hover 속성이 발생됐다안됐다 해서 그렇다. 아예 story:hover도 블록으로 박아버리자.

3.display:flex의 width배분
기본적으로 1/n으로 배분되지만 하나가 더 넓어질 경우 다른 요소가 작아지게 된다... 이 때는 width를 고정시켜주자. 그 후에 over-flow를 활용하면 될 것 같다.