-
[TIL] 엘리스 SW 엔지니어트랙 2기 - css (Week1,Day4)IT/엘리스SW 2022. 4. 7. 18:34728x90
엘리스 SW엔지니어 트랙 2기 DAY_4
📝 목차
- 오늘의 잡담
- Transform
- Transition
- Animation
- 미디어쿼리
📢오늘의 잡담
오늘은 개인적으로 수업 듣는 날. 강의가 의외로 짧다..?!
어쨌거나 7시간은 채워야하니 켜놓기는 하는데 가만히 있을순 없고, 미리 til을 작성해보자 !
어제 배운 transition과 transform, 미디어쿼리를 조금 더 심도있게 배웠다.
그때 그때 배우면 이해는 가는데, 왜 막상 적용해보려하니 헷갈리고 고민되는지 😖
하나씩 vscode로 다시 살펴보면서 이해력을 높여보자 (오늘은 시간도 많이 남았으니까~)
다들 7시간 어떻게 채우냐고 아우성이었는데 , 오늘 디스코드를 보니 정확히 어떤식으로 운영되는지 안내가 나와 좋았다.
사진에서와 같이 기준 1,2를 모두 충족시켜야하는데
오늘 4/7일을 기준으로 80% 진도율 + 7시간학습을 하면 되는 것이다.
이걸 당일인 4/7일에 모두 충족시키는 것이 가장 좋고, 아니라면 출결이 정산(?)되는 일요일까지 해주면 된다.
조삼모사의 느낌? 나는 그냥 계획적으로 하고 싶어서 당일에 7시간 + 80%이상의 진도율 을 지켜나갈 계획이다.
계획이 어긋나면 유지하고 있는 일상이 금방 작심삼일 되어버릴 것 같은 ..🥲 곰같이 가보겠음..
🤖Transform
트랜스폼을 쓰면 돌리고 키우고 비틀고 옮기고.. 트랜스포머임 걍 ㅋㅋ
html </head> <body> <div class="box1"> </div> </body>css <head> <style> .box1 { width: 300px; height: 300px; background-color: aqua; margin: 300px 0 0 300px; transform: rotate(45deg); } </style> </head>transform을 주목해보자. rotate라는 속성에 45deg(45도)를 주면
왼쪽은 transform: rotate가 없을때, 오른쪽이 transform: rotate(45deg); 주었을때 역시 눈으로 보니까 이해가 빠르다.
참고로 트랜스폼은 마지막에 적은 하나만 반영된다. (아닐수도? 아니면 아니라고 누가 댓글좀 ㅎㅎ;)
transform: rotate(45deg); transform: scale(3);이렇게 적으면 제일 아래거인 scale만 적용되는 모습을 볼 수 있다.
🤝Transition
트랜지션은 한 줄로 적을 수 있다. 그래도 무슨 항목이 있는지 적어보자면
transition-property : 어떤 css속성에 효과를 줄 건지
transition-duration : 효과 나타나는 데 걸리는 시간
transition-timing-function : 효과 속도 (linear: 일정하게 등등 뭐 많음)
transition-delay: 특정 조건 하에서 효과 발동
보통 hover랑 같이 잘 쓰는데 hover는 마우스를 올리면 ~ 뭐를 어떻게 해주겠다는 가상 선택자임
그리고 timing-function같은 경우 종류가 너~무 많은데, 레이서 한 분이 또 cheat sheet 공유해줘서 나는 내 글에 공유 ㅎㅎ
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
easings.net
https://greensock.com/docs/v2/Easing
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
쨌든, 예를 들면
<style> .box1 { width: 300px; height: 300px; background-color: aqua; margin: 300px 0 0 300px; transform: rotate(45deg); transition: background-color 1s linear 0.5s; } .box1:hover { background-color: pink; }위에서 만든 박스에서 트랜지션을 추가한 모습이다.
background-color를 바꿀거야 ,1초동안, 일정하게, 0.5초뒤에 이벤트가 발생하게해줘!
이거를 hover 했을 때(마우스를 올려놨을때!)
위에서 프로퍼티 말했지? background-color 응 그거 핑크로 ~
그러면 이렇게 나온다.
참고로, 한 줄로 적으면 duration이랑 delay 모두 시간이라 뭐가 뭔지 모를 수 있는데
무조건 하나만 적을때는 duration임. 두 개 적혀있을때는 앞에 있는게 무조건 duration임. 그런거임.
🎬Animation
애니메이션은 위에 transition이랑 거~~~의 비슷한디
한 두개정도 더 추가된게 있다~하는 느낌?
이 친구도 한 줄로 적을 수 있는데, 무슨 속성들이 있는가 나열해보자.
animation-name: codingHoon; 애니메이션 이름을 적어줌 animation-duration: 3s; 효과 나오는 데 걸리는 시간 animation-timing-function: linear; 효과 속도 animation-delay: 1s; 조건에 맞을 때 효과 발동 animation-iteration-count: infinite; 애니메이션 반복 횟수 animation-direction: alternate; 애니메이션 진행 방향 animation: codingHoon 3s linear 1s infinite alternate; 위에 6줄을 한줄로 작성애니메이션 반복 횟수가 있는데, infinite를 많이 쓸 거 같음 (내생각)
진행방향은 alternative, normal, reverse 가 있고, alternative은 왔다 갔다 (from-to-from)인 식이고
normal은(from-to), reverse(to-from) 식이다.
아 그리고 애니메이션은 애니메이션을 쓰고 나서 from~ to를 적어줘야되는데
아래에
@keyframes codingHoon { from{} to{} }이렇게 키프레임(띄어쓰기)애니메이션 이름 을 적고 from, to를 작성해줘야한다!
말로만 쓰면 어려우 ㅠ
예시를 작성해서 또 보면 이해는 되는 매직!
.box1 { width: 300px; height: 300px; background-color: aqua; margin: 300px 0 0 300px; animation: codingHoon 1s linear 1s infinite alternate ; } @keyframes codingHoon { from{ transform: rotate(-10deg); } to{ transform: rotate(10deg); } }
결과
📱 미디어쿼리
적을라했는데 어제도 했네? 이건 그냥 혼자 연습 더 해보기로!(절대 귀찮은거 맞음)
'IT > 엘리스SW' 카테고리의 다른 글
[TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript (Week2,Day7) (0) 2022.04.12 [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript 시작 (Week2,Day6) (0) 2022.04.11 [TIL] 엘리스 SW 엔지니어트랙 2기 - git/github (Week1,Day5) (0) 2022.04.09 [TIL] 엘리스 SW 엔지니어트랙 2기 - html, css (Week1,Day3) (0) 2022.04.06 [TIL] 엘리스 SW 엔지니어트랙 2기 - html, css (0) 2022.04.05