미디어쿼리
-
고급 CSS 정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 6. 05:10
지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다. (1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과, 예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과, 예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다. 즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. (3) 애니메이션, anmation: @keyframes을 만..
-
공부계획 #4 고급형 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 1. 04:20
지금부터 고급형 CSS에 대해 배워도록 하겠습니다.세부적으로 먼저, (1) 트랜지션,transition: hover와 active같은 효과, 즉, 클릭하면 변화가 생기는 효과 (2) 애니메이션, animation: 이미 customized된 애니메이션들을 사용 (3) 트랜스포메이션, transformation: 크기가 커지거나, 회전, 또는 움직이는 효과 (4)미디어쿼리, media query: 브라우저 크기에 맞춰서 움직이는 효과, 즉 웹사이트-모바일 반응형 위의 순서로 알아보도록 하겠습니다.