WEB/CSS6 CSS(Media Queries) - Media Queries - # 오직 css만을 이용해서 스크린의 사이즈를 알 수 있는 방법. # @media 라고 써서 사용할수 있다. # min(최소) max(최대)-width 등등 사용법이 있다. (device 는 핸드폰) # 우리가 조건을 주어서 다양하게 활용할 수 있다. # and 로 써서 연결이 된다. # orientation: landscape(가로모드), portrait(세로모드) 2022. 3. 28. CSS(Animation) - Animation - 1. 적용을 할 때 "@" 붙여줘야 한다. 2. 어떠한 동작 없이 스스로 적용이 된다. # keyframes (1) 어느 한 지점에서 from { }, 어느 지점 까지 to { } (2) 다양하게 조합이 가능하다. (3)0%, 50%, 100% 로 숫자로 지정해서 변경할 수 있다. 로고가 중앙에서 커졌다가 빙글빙글 돌고 테두리가 생기고 투명해지는 모습을 볼 수 있다. 2022. 3. 28. CSS(Transitions) - Transitions - "어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법" # state가 없는 요소에 붙어야한다. # esas-in function 1. 기본적으로 브라우저에게 애니메이션이 어떻게 변할지 말해주는 것. - Transformations - 1. 다른요소에 영향을 주지 않는다. 2. margin, padding이 적용되지 않는다. 3. 여러개를 조합 할 수 있다. 4. GPU에 의해 조작된다. # rotateY : y축으로 회전 # rotateX : x축으로 회전 # rotateZ : z축으로 회전 # scale(2, 2) : x, y 방향으로 2배 # translateX,Y,Z(50px) : x, y, z 축으로 이동 # matrix3d : 선형적으로 묘사 2022. 3. 28. CSS(3) - Pseudo - - div: 1. class 나 id 를 쓰는 것보다 훨씬 좋은 방법이다. 2. last-child 는 리스트에 있는 div 들 중 마지막에 있는걸 말한다. 3. first-child 는 첫번째 4. nth-child() 괄호안에 숫자를 넣어서 해당 숫자 번째를 가리킬수있다. (1) even : 짝수 번째 (2) odd : 홀수 번째 (3) 3n + 1 : 숫자 변경가능 3번째마다 적용이 되는걸 확인 할 수있다. - div p span { } 1. div 와 p 안에 존재하는 span 이 모든 영향이 미친다. 2. 내가 적용하고 싶은 하나만 적용이 되는게 아니라 모든 div 안의 p 안에있는 span 이 영향이 끼치므로 다른 작업을 추가로 해줘야할 가능성이 높아진다. - div > s.. 2022. 3. 25. 이전 1 2 다음
