CSS-2

CSS-2

---

~웹은 언어들로 구성되어 있다. 가장 크게 3가지로 나누면, HTML, CSS, JavaScript가 있다.

HTML: 뼈대, CSS: 근육, JavaScript: 뇌

CSS : Cascading Style Sheet, 순서대로 된 스타일 시트이다.
태그를 중복해서 만들었다면 코드의 가장 마지막 부분이 스타일로 적용된다.

외울 필요없다. 모르는 유형이 나오면 Google, MDN을 찾아보자.
Do not memorize !

---

Transition - 1

• transition : state가 아닌 root에 있어야 한다.
  변화하는 모습을 사용하려면 state에도 변화 특성이 있어야 한다.
• ease-in-out을 이용해서 애니메이션을 줄 수 있다.

<style>
  div {
    width: 50px;
    height: 50px;
    background-color: teal;
    transition: all 1s ease-in-out;
  }
  div:hover {
    transform: rotateX(45deg);
  }
</style>

Transition - 2

• 변화하는 애니메이션의 속도를 정해주는 ease function이 있다. goole go !

• 디폴트를 갖고 있는 ease-in function
  

  linear / ease-in / ease-out / ease-in-out

• all을 이용해 모든 특성을 변화시킬 수 있다.
  특정 특성을 정해서 변화시킬 수 있다.

<style>
      a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 50px;
        transition: all 1s ease-in-out;
        transition: background-color 1s ease-in-out, font-size 1s ease-in;
      }
      a:hover {
        font-size: 30px;
        color: teal;
        background-color: green;
        font-size: 70px;
      }

Transformation

• block이나 다른 element에 영향을 안주고 3d로 움직이게 하는 역할이다.
• 다른 페이지의 차원에서 일어나게 변화를 준다.
  다른 박스에 영향을 주지 않는다.
• 다양한 속성들은 MDN 참고하자.

    <style>
      img {
        width: 10cm;
        height: 10cm;
        border: 10px solid black;
        border-radius: 50%;
        transition: all 1s ease-in-out;
      }
      img:hover {
        transform: rotateY(360deg);
      }
    </style>

Animations - 1

• @keyframes name

<style>
      @keyframes coinFlip {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(360deg);
        }
      }
      img {
        width: 10cm;
        height: 10cm;
        border: 10px solid black;
        border-radius: 50%;
        animation: coinFlip 5s ease-in-out infinite;
      }
</style>

Animations - 2

• % 를 넣어서 애니메이션에 연속성 부여하기

  Pading and IDs

  • Padding은 경계의 안쪽 공간이다. Padding에 margin을 준다면 border부분이 겹치지 않는다. 다음과 같이 각 태그에 id를 주고 div안에 div를 배치해둬 각 경계의 시작을 다르게 주었다. 그리고 padding margin을 주면서 서로 다른 box인 것을 보여준다.

<style>
@keyframes coinFlip {
        0% {
          transform: rotateY(0deg) translateX(-1000px);
        }
        25% {
          transform: translateX(-500px) translateY(500px);
        }
        50% {
          transform: rotateY(360deg) translateX(0px) translateY(1000px);
        }
        75% {
          transform: translateX(500px) translateY(500px);
        }
        100% {
          transform: rotateY(0deg) translateX(1000px);
        }
      }

Media Query & Media Queries recap

• screen의 사이즈에 따라 변화를 주는 법
• screen은 크롬 내에 핸드폰 모드로 할 수 있는 것이 담겨있다.
• screen and ~~~ and ~~~ and { 내부에는 element가 들어가야 한다. }
• screen 뿐만 아니라 print 등,, 다양한 기능이 있다. check the MDN

<style>
@media screen and (min-width: 400px) and (max-width: 700px) and (orientation: landscape) {
    div {
      background-color: tomato;
    }
    .good {
      color: black;
    }
    span {
      display: none;
    }
}
</style>