국비 28일차

JAY·2022년 11월 2일

국비 국비학원 프론트엔드

국비 공부

목록 보기

28/86

figma

ex. 중앙에서 검정색 선이 옆으로 1초 동안 나타남
선을 기준으로 메인 타이틀 글자가 위로 작은 타이틀 글자가 아래로 서서히 나타남

이걸 말로 하는 것보다 피그마로 만들어서 보여주는 것이 더 효율적이다

keyframe

플러그인 대신 하드코딩으로 짜는 키프레임 애니메이션
(그래서 플러그인이 아닌 하드코딩으로 했다는 것을 알리는 게 좋다)

애니메이션이 끝난 상태를 기준으로 css를 짠 다음에
애니메이션을 넣어야 한다

정확한 수치가 있는 것들만 적용이 가능하다!!

라인을 글자 크기에 맞추기

absolute 처리를 해놓고 width값을 주지 않는다!!
그리고 그 길이에 맞춰 가운데로 움직이도록 left/top/transform 준다
(이건 배웠으니까... 홧팅!!)

html

css

.blackline에 width:100%;
부모태그인 .fixobj 클래스에서 absolute에 width값을 안 주었음
=> 자식태그의 width값이 부모태그의 width값이 되는 것

글자 애니메이션 주기

keyframe은 시간 순으로 흘러가는 분기점을 표현하는 것이므로
0%부터 100%만 존재하고 그 이상은 없다
from{ } to{ }로 표현하기도 한다

div는 height값 없으므로 p태그의 값을 원크기로 사용하고 있어
p 글자만 움직이도록 하면 된다

이 과정에서 플러그인의 대다수가 transform을 사용하고 있으므로
글자를 숨길 때에는 position:relative를 사용한다...

swiper animation 만들기

html

<body>
  <!-- swiper처럼 3중 구조 만듦 -->
<div class="banner">
  <div class="aniBox">
    <div class="aniItems">1</div>
    <div class="aniItems">2</div>
    <div class="aniItems">3</div>
  </div>
</div>
</body>

css

<style>
*{margin: 0; padding: 0;}
.banner{
  width: 1200px; margin: 0 auto;
  overflow: hidden; height: 300px;
}
.aniBox{
  display: flex;
  width: 100000px;
}
.aniItems{
  width: 1200px; height: 300px;
  background-color: #227b7b;
  color: white; font-size: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>