230906_TIL

오늘 한 일📌

내가 생각 하는 오늘의 몰입 시간! 7시간 정도! 오늘은 내용은 반응형 웹 만드는 것에 대한 CSS에 대한 내용이었다. 이 과정에 합류하기 전에 유툽에 유노코딩님이 반응형 웹 만드는 강의(?)가 있었는데 그걸 들어보자 했다가 미루고 미루다 결국 하지 못했었는데 같은 내용인지는 모르겠지만 이렇게 배워봐서 좋았다!

 

 Transform, Transition, Animation, viewport, @keyframes, @media등등 어렵지 않은 내용이지만 CSS를 잘하고 싶은 나한테는 너무나 즐거운 내용이었다. ✍️✍️✍️

 

웹에서 앱으로 보여지는 웹이 더더욱 많아진다고 생각하니 더 재밌게 느껴졌던 것 같고,

<meta charset="UTF-8">
<meta name="viewport" content=“width=device-width, initial-scale=1.0”>📌

그저 넘어갔던 이 meta태그의 내용도 미디어쿼리를 사용하기 위해서는 해당 meta태그로 viewport로 너비와 배율을 설정해주는 것이라걸 알게 됬다. 이 부분 역시도 치밀한 계산을 통해 만드는구나 생각됬고 배운 내용을 직접 해보면서 체감해볼 수 있었다.  

웹 페이지가 모바일 기기나 반응형 디스플레이에 잘 표시되도록 하는 HTML 메타 태그. 웹 브라우저에게 뷰포트의 너비와 초기 줌 레벨을 어떻게 설정할지 알려준다.

 

끝까지 궁금했던 점으로는 transition사용 예제로 hover이 무조건 같이 있길래 단독으로는 사용이 안되는지 궁금했다. gpt에서는 되긴되는데~ 사용이 매끄럽지 않을거야! 라고만 했다,,,(찝찝😣) 

transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 
만약 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용하도록 한다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.

🖇️https://poiemaweb.com/css3-transition
🖇️https://poiemaweb.com/css3-animation

 

 

p.s  다뤄보지 못했던 내용이나 배우고 싶던 내용들을 다루고 있어서 너무 만족스럽고 재밌는 나날이다😀😀 CSS 기깔나게 하고 싶다😎😎