개발일지 210708

학습한 내용

1.트랜지션 실습

1.메뉴박스

• opacity
  불투명도 조절하는 속성
  메뉴 박스에 있는 모든 요소를 투명화 시킬 수 있음
  
  
  📌글자에 opacity를 넣지 않으려면

background-color: rgba(); 를 설정해야 됨!

ex) #ffffff 흰색 ➡ rgba(255, 255, 255, 1)
-4번째 자리(alpah)는 색상의 투명도를 뜻하며 배경에만 영향을 줌
1로 지정했을 경우 불투명도는 100% (투명도 0%라는 뜻)
💎 rgba 참고사이트 : http://hex2rgba.devoth.com/


2.무브박스

• position : relative; 일 경우 top right bottom left 설정 가능!
• animation-play-state
  --- 1. running 동작을 시키겠다.
  --- 2. paused 동작을 멈춤
• animation-fill-mode : backwards;
  @keyframe에서 설정된 배경컬러를 브라우저에서 처음으로 보여주고 싶을 때 사용
  
  
  3.슈퍼마리오 게임
  
• 부모에서 적용한 scale 영역은 자식 요소까지 영향을 끼침
• box sizing : border-box; border가 박스 안 쪽에서만 움직일 수 있도록 !
  💎 참고사이트 : flexbox.help
  
  
  4.hover-image
  

• 📌이미지가 속성값을 설정한 영역보다 크다면
  -- img { width : 100%; } 으로 설정하면 됨
  (퍼센트를 사용할 때 퍼센트는 퍼센트를 사용한 지점의 부모가 누구인지에 따라서
  공간의 크기가 설정됨.)
  -- height 값은 비율에 맞춰 설정됨
  
  
• 📌이미지 하단 공백
  태생부터 img 태그는 하단에 미세한 공백이 있음 (인라인 요소가 일부 포함)
  제거하기 위해선 img { vertical-align : middle; } 으로 설정해야 함 (default로 생각)
  
  
• 글자 부분
  부모가 2차원이고 자식이 3차원이면 자식이 부모의 높이값에 영향을 줄수 없음
  부모가 3차원이고 자식이 3차원이면 width값을 부모를 기준으로 설정할 수 있음
  
  
• 📌이미지 확대
  특정영역을 벗어날 경우 overflow: hidden; 설정
  
  
• cusor 올렸을 때 손가락 모양
  cursor : pointer; 설정

2.애니메이션 참고 사이트

https://animate.style/
https://codepen.io/

어려웠던 점

• 부모랑 자식관계가 어렵다. 오프라인에서도 어렵긴 하지(?)
  주말에 레이아웃부분 다시 복습해야겠다...

학습소감

영상만들 때보다는 직관적인 것 같아서 쉬워보이는데 4번째 실습은 영상으로 만드는 게 (지금 입장에서는) 더 빠를 것 같다는 생각이 든다. 소스 넣는게 헷갈려서 눈물이 앞을 가린다🤣🤣
지금 내리고 있는 비는 비가 아니라 CSS버뮤다에서 헤매고 있는 내 눈물...이라고 하면
오글거리겠지만 내 심경이 그러하다.